PDA

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



python
Dec 12th, 2003, 10:14 PM
hello

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

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

python
Dec 12th, 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
Dec 12th, 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
Dec 12th, 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
Dec 13th, 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
Dec 13th, 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
Dec 13th, 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