Welcome to WebmasterWorld Guest from 54.205.126.164

Forum Moderators: not2easy

Message Too Old, No Replies

OK, Here's An Interesting CSS/JavaScript Puzzle:

CSS Properties Not Readable By JS Unless Specifically Added

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2005
posts: 1526
votes: 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>

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

Administrator

WebmasterWorld Administrator coopster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:July 31, 2003
posts:12547
votes: 2


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
[developer.mozilla.org...]
[developer.mozilla.org...]

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

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 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!

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members