PDA

View Full Version : accessing all the css style values of an element



python
12-12-2003, 10:14 PM
hello

how can I access the css style attributes of an element from a javascript code?

sciguyryan
12-12-2003, 10:28 PM
simple:
document.ElementName.style: bla bla bla....

python
12-12-2003, 10:31 PM
assuming I have an element with an id of "name", the following doesn't print anything...

<script language="javascript>
var text = document.all["name"].style.fontSize;
alert(text);
</script>

what am I doing wrong?

fredmv
12-12-2003, 10:34 PM
I wouldn't recommend using document.all since it's IE-only. You should be using document.getElementById for this type of thing. I would imagine your specific code wasn't working because that specific node in the DOM wasn't yet loaded into memory when you tried to access it. All you should need to do is execute the code using an onload event handler. For example:
<script type="text/javascript">
//<![CDATA[
onload = function()
{
alert(document.getElementById('foo').style.fontSize);
}
//]]>
</script>

<div id="foo" style="font-size: 14pt;">Hello, World</div>

sciguyryan
12-12-2003, 10:36 PM
Do you use netscape or IE? that particular method only works on IE try:
document.getElementById("TagIdHere")
and, you have not specified a font size.

Kor
12-13-2003, 08:33 AM
IE5+, NS6+
document.getElementById(id).style.attribute

IE4
document.all[id].style.attribute

NS4.x
document.layers[id].attribute


NOTE:
NS4 needs a positioned attribute (absolute or relative) or a special tag (layer/ylayer) to be able to manage the style attributes on-the-fly

python
12-13-2003, 05:31 PM
assuming I have the following code:

<body>
<p id="p">
Look at this text
</p>
</body>

now, this code doesn't define any style attributes to the <p> element. Can I however obtain the default style attributes that it has?
For example, if I wanted to know what was the fontSize of that element...

document.getElementByID("p").style.fontSize will return the empty string since I didn't define it. Is there a way to obtain the DEFAULT style settings for each element?

sincerely

adios
12-13-2003, 05:44 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">

function getElementStyle(elemID, IEStyleProp, CSSStyleProp) {
var elem = document.getElementById(elemID);
if (elem.currentStyle) {
return elem.currentStyle[IEStyleProp];
} else if (window.getComputedStyle) {
var compStyle = window.getComputedStyle(elem, "");
return compStyle.getPropertyValue(CSSStyleProp);
}
return "";
}

</script>
</head>
<body>
<p id="p">
Look at this text
</p>
<script type="text/javascript" language="javascript">

fSize = getElementStyle('p', 'fontSize', 'font-size')
document.write(
'<p style="font-size:' + fSize + ';">' ,
'Look at this ' + fSize + ' text' ,
'</p>'
);

</script>
</body>
</html>

http://www.oreillynet.com/pub/a/javascript/excerpt/JSDHTMLCkbk_chap5/index5.html