atar.yosef Posted September 24, 2012 Share Posted September 24, 2012 (edited) Hi there!!I wanted to know please why does JavaScript fail to get the "example" element width in the following code: <html><head><title></title><script type="text/javascript">try{function start(){alert(document.getElementById("example").style.width);}//end start().}//end try.catch(err){alert("there's an error in this page. \n the error message is:\n" + err.message + "\n the error name is: \n" + err.name + "\n and the error details are:\n" + err.constructor);}//end catch statement.</script><style type="text/CSS">div.example {width:10px; border:solid;}</style></head><body onload="start()"><div id="example" class="example">some text goes here...</div></body></html> Any help will be appreciated!Thanks in advance!!Atar. Edited September 24, 2012 by atar Link to comment Share on other sites More sharing options...
Ingolme Posted September 24, 2012 Share Posted September 24, 2012 Because the width wasn't set in the style attribute. It would work if the HTML looked like this: <div id="example" style="width: 10px">Text</div> If you want to get the width of an element, use its offsetWidth property: alert(document.getElementById("example").offsetWidth); Your class attribute is redundant, you can style a div by its ID rather than class like this: #example { width: 10px; border: solid; } Link to comment Share on other sites More sharing options...
atar.yosef Posted September 24, 2012 Author Share Posted September 24, 2012 @Ingolme:Thanks you about your response!! But I didn't understand two things in your words:1) Because the width wasn't set in the style attribute.This is correct that the width wasn't set in the style attribute but for this purpose I set it in the "<style>" section as W3schools recommend to do in their html tutorial. So why is JavaScript not able to achieve the width property from the CSS's section?2)If you want to get the width of an element, use its offsetWidth property:alert(document.getElementById("example").offsetWidth);I tried to do it and the result was: "undefined", why?Thanks in advance!!Atar. Link to comment Share on other sites More sharing options...
Ingolme Posted September 25, 2012 Share Posted September 25, 2012 The style object is directly associated with the style attribute, that's how it is You need to use other properties or methods to find all the CSS values of an element. offsetWidth shouldn't return undefined as long as the element is attached to the page, there might be some mistake in your code, or perhaps you're trying to get the value before the element has been loaded. Link to comment Share on other sites More sharing options...
atar.yosef Posted September 25, 2012 Author Share Posted September 25, 2012 @Ingolme:Thanks for your answer!! The style object is directly associated with the style attribute, that's how it is You need to use other properties or methods to find all the CSS values of an element.Can you give me a code demonstration please?Thanks in advance!!Atar. Link to comment Share on other sites More sharing options...
Ingolme Posted September 25, 2012 Share Posted September 25, 2012 You've seen the demonstration in your own code. <div id="example" style="width: 10px; height: 20px; background-color: #0099FF;"></div> var element = document.getElementById("example");alert(element.style.width); // Displays "10px"alert(element.style.backgroundColor) // Displays "rgb(0, 153, 255)"alert(element.style.fontSize); // Displays "undefined" because it was not set in the style attribute If you wish to find out the position and size of an element you can use offsetWidth, offsetHeight, offsetTop and offsetLeft. A popular way to get other styles from an element is getComputedStyle()/currentStyle. You'll have to look it up, there are tutorials around to explain it. Link to comment Share on other sites More sharing options...
atar.yosef Posted September 26, 2012 Author Share Posted September 26, 2012 @ingolme:Thanks you about your response, but again, I still didn't understand why is JavaScript not enable to retrieve this info from the CSS parameters that were set between the two "style" tags. Link to comment Share on other sites More sharing options...
justsomeguy Posted September 26, 2012 Share Posted September 26, 2012 Because the style property does not contain all CSS styles that have been set in any possible way on the element. The style property only contains the styles that were set in the style attribute. That is what the style property is for, it is not for containing all styles that currently affect the element. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now