469,898 Members | 1,605 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,898 developers. It's quick & easy.

Can't access style properties when not inline

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('te stDiv1').style.left)">alert
testDiv1 width</a>
<a
href="javascript:alert(document.getElementById('te stDiv2').style.left)">alert
testDiv2 width</a>
</body>
</html>
Many thanks to anyone who can shed some light on this.

Cheers,

Phil

Jul 23 '05 #1
7 3106
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>
<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>

--
Rob
Jul 23 '05 #2
ASM
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
Jul 23 '05 #3
ASM
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;
}
}


--
Stephane Moriaux et son [moins] vieux Mac
Jul 23 '05 #4
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.
Jul 23 '05 #5
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.

Jul 23 '05 #6
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
Jul 23 '05 #7
ASM
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

--
Stephane Moriaux et son [moins] vieux Mac
Jul 23 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by Joseph | last post: by
4 posts views Thread by VK | last post: by
6 posts views Thread by scottyman | last post: by
5 posts views Thread by Rhino | last post: by
2 posts views Thread by Steve Richter | last post: by
1 post views Thread by Waqarahmed | last post: by
reply views Thread by Salome Sato | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.