Welcome to WebmasterWorld Guest from 54.166.46.226

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)

WebmasterWorld Senior Member 10+ Year Member



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)

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



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)

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



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!