Can't access style properties when not inline

philjhanna · Jul 13, 2005

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 · Jul 13, 2005

philjhanna said:
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>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style>
#testDiv1{
position:relative;
left: 50px;
}
</style>
<script type="text/javascript">

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

</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>

ASM · Jul 13, 2005

philjhanna said:
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>

ASM · Jul 13, 2005

RobG said:
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;

Michael Winter · Jul 13, 2005

RobG said:
RobG said:

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

Click to expand...

[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

philjhanna · Jul 13, 2005

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.

RobG · Jul 13, 2005

ASM said:
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;

ASM · Jul 13, 2005

thanks for this lighting and also to Michael Winter

Image shifts to the right when export the page to pdf	4	May 5, 2023
Please Help?	0	Jul 23, 2022
Help with my responsive home page	2	Dec 14, 2022
Justify-content not working	1	Mar 29, 2021
Help with Visual Lightbox: Scripts	2	May 3, 2023
Help with code	0	Jun 12, 2022
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
Image not changing between "mute" & "un-mute" images.	5	Jun 2, 2023

Can't access style properties when not inline

philjhanna

RobG

ASM

ASM

Michael Winter

philjhanna

RobG

ASM

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads