Jump to content

Why do I fail to retrieve a property value with js ?


MDN111
 Share

Recommended Posts

Hello !
Here is my question:
I'm going to the HTML DOM Style Object chapter on http://www.w3schools.com/ en click on the property "left" and choose "Try it yourself". That leads me to http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_left . It is a code to shift a button 100px to the left. It works fine and I understand it. So far, so good.
Now I modify two lines of the code:
Firstly, in the style block, I add the property "left" and assign to it a value of "300px".
Secondly, I rule out the line "document.getElementById("b1").style.left="100px";" and replace it by "alert(document.getElementById("b1").style.left)".
See the joined screenshot.
In fact, all I want to do is to retrieve the value of the left-property and show it in the alert-box. I expect that the alert-box would display "300px" but it does not !!! The message of the alert-box is a null string (???).
What is wrong with my way of thinking ?
Grtz,
MDN111.

post-168808-0-80840100-1386086658_thumb.png

Link to comment
Share on other sites

The style object does not contain styles set through CSS rules, it's only for setting styles with Javascript. If you set the style.left property with Javascript then you could read the same value, but setting the style with a CSS rule does not set all of the properties in the element's style object.

Link to comment
Share on other sites

there is a way for you to access the CSS styles that were defined in external sheets or even directly in a style tag with javascript

var stylesheet = document.styleSheets[document.styleSheets.length-1];var rules = stylesheet.cssRules || stylesheet.rules;for(var i = rules.length-1; i>=0;i--){   if(rules[i].selectorText == "#b1"){      var selector = rules[i];      break;   }}alert(selector.cssText)//prints://#b1 { position: absolute; left: 300px; }alert(selector.style.cssText)//prints://position: absolute; left: 300px;alert(selector.style.left)//prints: //300px;alert(selector.style[selector.style[1]])//left was the 2nd defined style in the selector so selector will also say the index "1" is "left"// and thus selector["left"] will also point to the same property and thus alert prints the same thing//300px

for those times when javascript needs to know what a selector had (honestly this is almost never). its not advised to rely on what you get from document.styleSheets, nor will it be effective to mess with it unless you devote a lot of code to administrate what you do with it. because when getting the styles from a selector you can't be sure that a certain element is actually using the selector's styles without devoting a lot of time deep checking other styles and the current element nodes.

 

its often more effective and lightweight to simply call window.getComputedStyle(element).getPropertyValue("left") to get what you wanted.

note: IE doesn't have getComputedStyle(), it has its own version, which I forget the name of at the moment, that does the same thing.

Edited by Hadien
Link to comment
Share on other sites

Hello again,
Many thanks to justsomeguy and Hadien for the reply.
Although I find it a rather weird behavior, I now understand what's happening.
To solve my problem (which is to calculate the left en top of a popup-div on the basis of its width and height), I defined the properties inline in the div tag.
It works in IE, FF and Chrome.
Thanks again.
Grtz,
MDN111.
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...