Jump to content

Getting an element width.


atar.yosef
 Share

Recommended Posts

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 by atar
Link to comment
Share on other sites

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

@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

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

@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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...