tinfanide Posted August 17, 2011 Share Posted August 17, 2011 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JS: setInterval & clearInterval within a function itself</title></head><body><div id="div3" onclick="addHeight(this.id);" style="width:50px; height:100px; background-color: red;"></div><script>var h;document.getElementById("div3").style.height = h+"px";var timer;function addHeight(e){ clearInterval(timer); document.getElementById(e).style.height = h+"px"; h+=1; timer = setInterval("addHeight('"+e+"')",1); if(h==300){clearInterval(timer);}; } </script></body></html> I want to in the JS script use variable h to represent the inline CSS height of the div in HTML.Is it allowed in JS?Because I don't want to specify a height value in inline CSS and repeat the process in JS by writing h = 100 because the height value is the same. Link to comment Share on other sites More sharing options...
Drycodez Posted August 17, 2011 Share Posted August 17, 2011 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JS: setInterval & clearInterval within a function itself</title></head><body><div id="div3" onclick="addHeight(this.id);" style="width:50px; height:100px;...sure! Link to comment Share on other sites More sharing options...
tinfanide Posted August 17, 2011 Author Share Posted August 17, 2011 sure!What do you mean by sure? Link to comment Share on other sites More sharing options...
jeffman Posted August 17, 2011 Share Posted August 17, 2011 I'm not entirely clear about the question. If you need to get the physical height of an element, including borders and padding, use element.offsetHeight. That should keep you from needing an extra variable. Link to comment Share on other sites More sharing options...
tinfanide Posted August 17, 2011 Author Share Posted August 17, 2011 I'm not entirely clear about the question. If you need to get the physical height of an element, including borders and padding, use element.offsetHeight. That should keep you from needing an extra variable.My question is:In HTML, I've specified the height of the div (100px).<div id="div3" onclick="addHeight(this.id);" style="width:50px; height:100px; background-color: red;"></div> In JS, originally I define h = 100 and in the function, h+=1 starts from h = 100 (that is the same to the value set in the HTML inline CSS above.So my question is whether there is any way in JS to replace the "100" and use, say, scrollHeight to represent the value so thatI only have to change the HTML value without also changing the h value in JS. <script>var h;document.getElementById("div3").style.height = h+"px";var timer;function addHeight(e){ clearInterval(timer); document.getElementById(e).style.height = h+"px"; h+=1; timer = setInterval("addHeight('"+e+"')",1); if(h==300){clearInterval(timer);}; } </script> Link to comment Share on other sites More sharing options...
ShadowMage Posted August 17, 2011 Share Posted August 17, 2011 Since you're setting in using inline style, you can just use the style object in java script:var h = document.getElementById("div3").style.height;And h will be whatever value you specified in the HTML. This won't work if you set the height in an embedded or external stylesheet. You'd have to use the offsetHeight like DD suggested or get the elements computed style (there's a good tutorial on accessing computed style here). Link to comment Share on other sites More sharing options...
tinfanide Posted August 17, 2011 Author Share Posted August 17, 2011 Since you're setting in using inline style, you can just use the style object in java script:var h = document.getElementById("div3").style.height;And h will be whatever value you specified in the HTML. This won't work if you set the height in an embedded or external stylesheet. You'd have to use the offsetHeight like DD suggested or get the elements computed style (there's a good tutorial on accessing computed style here). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JS: setInterval & clearInterval within a function itself</title></head><body><div id="div3" onclick="addHeight(this.id);" style="width:50px; height:100px; background-color: red;"></div><script>var h = document.getElementById("div3").style.height;document.getElementById("div3").style.height = h+"px";var timer;function addHeight(e){ clearInterval(timer); document.getElementById(e).style.height = h+"px"; h+=1; timer = setInterval("addHeight('"+e+"')",1); if(h==300){clearInterval(timer);}; } </script></body></html> I've tried it in IE8 and FF5 and it doesn't work at all.FF5 web console reported "[18:14:57.061] Error in parsing value for 'height'. Declaration dropped. @ file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/Untitled-4.html"By coding "var h = document.getElementById("div3").style.height;", has JS really taken the height value from the HTML inline CSS? I thought it hadn't, which made it just not work. Link to comment Share on other sites More sharing options...
jeffman Posted August 17, 2011 Share Posted August 17, 2011 The value of document.getElementById("div3").style.height is probably "100px" -- literally, with the "px" as part of the string. If you pass that through parseInt, you'll get the numerical value, and then it will work as you expect it to. Link to comment Share on other sites More sharing options...
ShadowMage Posted August 17, 2011 Share Posted August 17, 2011 The value of document.getElementById("div3").style.height is probably "100px" -- literally, with the "px" as part of the string. If you pass that through parseInt, you'll get the numerical value, and then it will work as you expect it to.Yeah, sorry Tin. I forgot to mention that.... Link to comment Share on other sites More sharing options...
tinfanide Posted August 17, 2011 Author Share Posted August 17, 2011 Yeah, sorry Tin. I forgot to mention that....Thanks for ya both replies.Ya acutally reminded me of the long forgotten parseInt().Seen it for many times before but not until ya told me in this example of mine, I wouldn't really get a hand at it. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.