alex242 Posted September 5, 2010 Share Posted September 5, 2010 The bellow shows what I think to be a major flaw in web programming/browser interpretation.Apparently, you can't read in the property of an element that has been set by css styling. wtf.Please tell me I am wrong on this, Because this will be a giant pain in the rear to deal with... <html><head><style type="text/css">p#p1 {width:500px;}</style><script type="text/javascript">function ChangeStyle(){var Ewidth = document.getElementById('p1').style.width; //it seems to set Ewidth to nothing...document.getElementById("xx").innerHTML = Ewidth; //as shown when I try to display it...document.getElementById("p1").style.width = Ewidth;document.getElementById("p1").style.backgroundColor="blue";}</script></head><body><p id="p1">Hello world!</p><p id='xx'></p><input type="button" onclick="ChangeStyle()" value="Change style" /></body></html> Link to comment Share on other sites More sharing options...
jeffman Posted September 5, 2010 Share Posted September 5, 2010 Yes and no. The style property in JavaScript actually reads the style attribute in your HTML tag. Anything you hard-code there can be read immediately. Any style you set using JavaScript style property gets written into the tag. After setting a property that way, you can read it.Sounds like a limitation, but there are alternatives.Find a full write up here Link to comment Share on other sites More sharing options...
thescientist Posted September 5, 2010 Share Posted September 5, 2010 for the way you are trying to do it, the way to get width would be like this: var Ewidth = document.getElementById('p1').offsetWidth; style.width only sets the width, .width will set/return the value of a width property applied directly to the element. Link to comment Share on other sites More sharing options...
alex242 Posted September 5, 2010 Author Share Posted September 5, 2010 Deirdre's Dad, is that your site? It's brilliant! I am definitely going to see what else I can learn from that reservoir of knowledge! Thank you!Oh, and your idea seems to work as well, Scientist, although it is debatable over which method should be used. Link to comment Share on other sites More sharing options...
Synook Posted September 7, 2010 Share Posted September 7, 2010 The offsetWidth property returns the actual width of the element, CSS-specified or otherwise. Link to comment Share on other sites More sharing options...
abdelelbouhy Posted September 7, 2010 Share Posted September 7, 2010 The bellow shows what I think to be a major flaw in web programming/browser interpretation.Apparently, you can't read in the property of an element that has been set by css styling. wtf.Please tell me I am wrong on this, Because this will be a giant pain in the rear to deal with...<html><head><style type="text/css">p#p1 {width:500px;}</style><script type="text/javascript">function ChangeStyle(){var Ewidth = document.getElementById('p1').style.width; //it seems to set Ewidth to nothing...document.getElementById("xx").innerHTML = Ewidth; //as shown when I try to display it...document.getElementById("p1").style.width = Ewidth;document.getElementById("p1").style.backgroundColor="blue";}</script></head><body><p id="p1">Hello world!</p><p id='xx'></p><input type="button" onclick="ChangeStyle()" value="Change style" /></body></html> if i got waht you ment right you want to read the style from external sheet or from within the style tag that information is in document.styleSheets.cssRules that for w3c and for ieis document.styleSheets.rules then you can get the the property by using selectorText for example document.styleSheets.cssRules[0].textDecoration = "overline"; or you can loopthrough and find the element if(document.styleSheets.cssRules[0].selectorText.toLowerCase() == 'a'){do something}; Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.