homepage Welcome to WebmasterWorld Guest from 54.166.10.100
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
OK, Here's An Interesting CSS/JavaScript Puzzle:
CSS Properties Not Readable By JS Unless Specifically Added
cmarshall




msg:3898563
 12:27 pm on Apr 23, 2009 (gmt 0)

Folks, a friend sent me the following conundrum.

Apparently, if a CSS width property is set by a <style> definition, it is not readable by JS, even though it is definitely applied.

He sent me some fairly compelling example code, and I will research it more later.

I can't believe that the DOM doesn't allow JS access to style properties unless set by JS or inline style.

Can anyone explain why container1 won't display its width in the first line?

<!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" xml:lang="en-US">
<head>
<style type="text/css">

/* Assign a base style to the "Containers" */
div#container1,
div#container2,
div#container3 {
height: 200px;
margin: 0;
padding: 0;
border: 1px solid blue;
}

/* Assign a specific CSS width to "Container 1"
Note: "Container 2" and "Container 3" do NOT have CSS widths specified here!
*/
div.specificWidth {
width: 200px;
}

</style>
<script type="text/javascript">

window.onload = function () {

// Explicitly set the element.style.width for "Container 2"
document.getElementById('container2').style.width = '250px';

// Alert to show element.style.width for all three divs
alert('Container 1 element.style.width: ' + document.getElementById('container1').style.width + '\n' +
'Container 1' + getElementWidth('container1') + '\n' +
'Container 2 element.style.width: ' + document.getElementById('container2').style.width + '\n' +
'Container 2' + getElementWidth('container2') + '\n' +
'Container 3 element.style.width: ' + document.getElementById('container3').style.width + '\n' +
'Container 3' + getElementWidth('container3')
);
}

function getElementWidth ( Elem )
{
if ( document.getElementById )
{
var elem = document.getElementById ( Elem );
}
else if ( document.all )
{
var elem = document.all[Elem];
}

var prefix = null;
var xPos = 0;

if ( 'undefined' != typeof ( elem.offsetWidth ) )
{
prefix = ' element.style.offsetWidth';
xPos = parseInt ( elem.offsetWidth );
}
else if ( 'undefined' != typeof ( elem.style.pixelWidth ) )
{
prefix = ' element.style.pixelWidth';
xPos = parseInt ( elem.style.pixelWidth );
}

return prefix + ': ' + xPos;
}

</script>
</head>
<body>
<div id="container1" class="specificWidth">Container 1</div>
<div id="container2">Container 2</div>
<!-- Container 3 has the CSS style declated inline -->
<div id="container3" style="width: 300px">Container 3</div>
</body>
</html>


 

coopster




msg:3898582
 12:47 pm on Apr 23, 2009 (gmt 0)

I can't believe that the DOM doesn't allow JS access to style properties unless set by JS or inline style.

Try setAttribute or better yet use getComputedStyle
https://developer.mozilla.org/en/Gecko_DOM_Reference/Examples#Example_6:_getComputedStyle
https://developer.mozilla.org/en/DOM/style

rocknbil




msg:3898654
 2:38 pm on Apr 23, 2009 (gmt 0)

HA! I've encountered this many times [webmasterworld.com] and have never pursued the answer, just accepted it and worked around it - although in the link above, the OP's problem was only solved because his styles were inline.

Enlightening, now if it just doesn't get pushed out by Old-Timer's disease next time it comes up!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved