Can't access style properties when not inline

philjhanna

unread,

Jul 12, 2005, 8:27:48 PM7/12/05

to

Hi,

In the example code below can anyone tell me why the first link alerts
an empty string but the second alerts the width? The only difference is
the way the left: 20px; is applied but I wouldn't have thought this
should matter.
This occurs in both Firefox (1.0.2) and IE6 (On Win XP SP2).
This appears to be the behaviour no matter what style is applied (e.g.
border's too).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style>
#testDiv1{
position:relative;
left: 50px;
}
</style>
</head>
<body>
<div id="testDiv1">testDiv1</div>
<div id="testDiv2" style="position:relative; left:
50px;">testDiv2</div>
<a
href="javascript:alert(document.getElementById('testDiv1').style.left)">alert
testDiv1 width</a>
<a
href="javascript:alert(document.getElementById('testDiv2').style.left)">alert
testDiv2 width</a>
</body>
</html>

Many thanks to anyone who can shed some light on this.

Cheers,

Phil

RobG

unread,

Jul 12, 2005, 11:48:12 PM7/12/05

to

philjhanna wrote:
> Hi,
>
> In the example code below can anyone tell me why the first link alerts
> an empty string but the second alerts the width? The only difference is
> the way the left: 20px; is applied but I wouldn't have thought this
> should matter.

Neither function returns the width. Both try to access the 'left'
property of the element's style object.

> This occurs in both Firefox (1.0.2) and IE6 (On Win XP SP2).
> This appears to be the behaviour no matter what style is applied (e.g.
> border's too).

To get the style that has been applied by a CSS rule, you must use
currentStyle (IE and similar) or getComputedStyle (others). Do a search
on this newsgroup, there are plenty of examples, here's one baked earlier:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>Style play</title>

</script>

</head>
<body>
<div id="testDiv1">testDiv1</div>
<div id="testDiv2" style="position:relative; left: 50px;">testDiv2</div>

<a href="#" onclick="
alert( getLeft(document.getElementById('testDiv1')) );
return false;
">
alert testDiv1 width</a>
<a href="#" onclick="
alert( getLeft(document.getElementById('testDiv2')) );
return false;
">
alert testDiv2 width</a>

</body>
</html>

--
Rob

ASM

unread,

Jul 13, 2005, 3:29:55 AM7/13/05

to

philjhanna wrote:
> Hi,
>
> In the example code below can anyone tell me why the first link alerts
> an empty string but the second alerts the width? The only difference is
> the way the left: 20px; is applied but I wouldn't have thought this
> should matter.

because with JS you can't access to style except if :
- JS gave the style
or
- style is written in tag
(assimilated to script instruction (JS by default))

However, you can access to some attributes of some html tags
as images for instance
even if they have been styled

example (with img height OK - style.width no)

<html>
<style type="text/css">
* { text-align: center }
#test, img { position: relative;
width: 420px;
height: 120px;
left: 50px; /* think it is of no use with relative ? */
margin: 20px;
border: 1px solid red; background: yellow;
}
</style>
<div id="test" onclick="alert('height = '+this.height+
'\nwidth = '+this.width+
'\nstyle width = '+this.style.width)">
<h2>test</h2>
<p>click somewhere here in this yellow box
</div>
<img src="" onclick="alert('height = '+this.height+
'\nwidth = '+this.width+
'\nstyle width = '+this.style.width)">
click this pict
</html>

--
Stephane Moriaux et son [moins] vieux Mac

philjhanna

unread,

Jul 13, 2005, 10:10:39 AM7/13/05

to

That's brilliant. I checked it on Win 2000 SP4 in IE5.01, IE5.5 IE6,
Firefox1.0.4, NS7.2 and Opera 7 and it worked in them all.

Thanks loads.

And, oops, sorry, I mistakenly wrote width instead of left.

ASM

unread,

Jul 13, 2005, 3:45:00 AM7/13/05

to

RobG wrote:
>
> To get the style that has been applied by a CSS rule, you must use
> currentStyle (IE and similar) or getComputedStyle (others).
>

> function getLeft( el) {
> if ( el.currentStyle ) {

would that work with pseudo-class ?

i.e. el.currentStyle.hover

how to script it for others
document.defaultView.getComputedStyle(el,'').hover;

> return el.currentStyle.left;
> } else if ( document.defaultView.getComputedStyle ){
> return document.defaultView.getComputedStyle(el,'').left;
> } else {
> return;
> }
> }

--

ASM

unread,

Jul 13, 2005, 4:36:30 PM7/13/05

to

RobG wrote:

> ASM wrote:
>
>> RobG wrote:
>>
>>>
>>> To get the style that has been applied by a CSS rule, you must use
>>> currentStyle (IE and similar) or getComputedStyle (others).

thanks for this lighting and also to Michael Winter

Michael Winter

unread,

Jul 13, 2005, 5:39:34 AM7/13/05

to

On 13/07/2005 08:45, ASM wrote:

> RobG wrote:
>
>> To get the style that has been applied by a CSS rule, you must use
>> currentStyle (IE and similar) or getComputedStyle (others).

[snip]

> would that work with pseudo-class ?

In some cases it might. The CSSStyleDeclaration object returned by the
getComputedStyle method (and the inferior equivalent available as
currentStyle in IE) contains the values of properties as they apply to a
particular element.

For instance, if an element is the first child of its parent, and a
:first-child pseudo-class applies to it, then the object should reflect
this.

However, the interactive pseudo-classes (:hover, :active, and :focus)
are not persistent. If they happen to apply at the time the object is
read because of some user action then you might be able to read whatever
values they impose.

[snip]

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.

RobG

unread,

Jul 13, 2005, 10:34:26 AM7/13/05

to

ASM wrote:
> RobG wrote:
>
>>
>> To get the style that has been applied by a CSS rule, you must use
>> currentStyle (IE and similar) or getComputedStyle (others).
>>
>> function getLeft( el) {
>> if ( el.currentStyle ) {
>
>
> would that work with pseudo-class ?
>
> i.e. el.currentStyle.hover

el.currentStyle.color;

It does not return the rule, it returns the value of the style
property that is currently applied. So if you had:

#testDiv1:hover { color: green; }

then using el.currentStyle.color or the equivalent getComputedStyle
would return 'green' or rgb(0, 128, 0) depending on your browser. IE
returns exactly the rule value for the color, Firefox (and I think
Safari) the equivalent rgb value.

Of course that should happen if IE actually allowed hover on div
elements (it works on A elements where hover works for IE).

>
> how to script it for others
> document.defaultView.getComputedStyle(el,'').hover;

document.defaultView.getComputedStyle(el,'').color;

--
Rob