how to get css properties via js?

**Falkon303** · 10-26-2009, 05:19 PM

Ok, so I have a div with the class "layoutleft", and the "layoutleft" class has the following styling "border:1px;padding:5px;height:10px;".

I am curious if there is a way to have javascript read the css class properties as values?

Reason being, I'd like to be able to adjust width measurements based on padding-left/right, border-left/right, and margin-left/right, but also allow the user to style.

Any help appreciated.

- Ben

**Falkon303** · 10-26-2009, 05:31 PM

found the answer (very useful imo)

-

following code from - http://www.java2s.com/Code/JavaScrip...yleExample.htm

Code:

<html>
<head>
<style>
td {background-color:red; 
    font-family:verdana; 
    font-size:12pt; 
    font-weight:bold; 
    color:white; 
    width:322px;
}
</style>
</head>
<body>
<table>
    <tr>
        <td width="1100" id="myCell">content</td>
    </tr>
</table>
<button onclick="alert(myCell.currentStyle.width);">Width of the table</button>
</body>
</html>

**jscheuer1** · 10-26-2009, 05:35 PM

I believe that only works in IE.

There is no standard method respected cross browser for style declared in a stylesheet. I believe most browsers follow the W3C method, but it is pretty complex. IE (no surprise here) has it own simpler method, but it too is a little complex. There are some units out there that do a fairly good job of taking care of this for you, but some style properties are still inaccessible via any of these methods.

As a result, most developers opt for using inline style and/or acting on assumptions of what is 'known' to be in the stylesheet for those elements where this sort of operation is required.

So if you have:

<div id="mydiv" style=""border:1px solid red;padding:5px;height:10px;">
whatever
</div>

You may then fairly easily get the styles, ex:

Code:

alert(document.getElementById('mydiv').style.padding);

**Falkon303** · 10-26-2009, 06:37 PM

Originally Posted by jscheuer1

I believe that only works in IE.

There is no standard method respected cross browser for style declared in a stylesheet. I believe most browsers follow the W3C method, but it is pretty complex. IE (no surprise here) has it own simpler method, but it too is a little complex. There are some units out there that do a fairly good job of taking care of this for you, but some style properties are still inaccessible via any of these methods.

As a result, most developers opt for using inline style and/or acting on assumptions of what is 'known' to be in the stylesheet for those elements where this sort of operation is required.

So if you have:

<div id="mydiv" style=""border:1px solid red;padding:5px;height:10px;">
whatever
</div>

You may then fairly easily get the styles, ex:

Code:

alert(document.getElementById('mydiv').style.padding);

Ack, yes I knew about that. I wasn't aware that you couldn't use the currentstyle property in FF.... I may resort to using offsetleft/width by inner spans to divs instead. It would be a bit more tedious, but at least give me a proper reading.

**jscheuer1** · 10-26-2009, 09:53 PM

Originally Posted by Falkon303

Ack, yes I knew about that. I wasn't aware that you couldn't use the currentstyle property in FF.... I may resort to using offsetleft/width by inner spans to divs instead. It would be a bit more tedious, but at least give me a proper reading.

That sounds feasible, but be careful or at least aware that even offsets vary by browser due to different interpretations of what actually constitutes the entire element (offsetHeight and offsetWidth) and/or what the offset is from. In the first case this is known as box model differences. In the second it is just a case of whether or not the offset (Left or Top) is from the immediate parent or the ultimate (top) parent.

Generally scripts that deal in such matters are not disturbed by the (usually) few pixels differences (as can be the case with the height and width), and/or they account for the possibility of different offsets top and left by recursing in some sort of loop through the offsetParent property. For the latter see:

http://www.quirksmode.org/js/findpos.html

If precision is required for the size of the element and styles that can affect that in different ways in different browsers are involved, inline style and its evaluation/manipulation is to be preferred. Whatever you do though, it should be tested in at least a few browsers. Optionally, one can use a library like jQuery and just forget about the browsers it doesn't cover properly, there aren't too many of those in wide use. Even with jQuery though, one should be sure one is using the techniques most applicable to ones objectives.

**jscheuer1** · 10-27-2009, 08:31 AM

I was thinking about this a bit more, and it looks like jQuery is pretty good with width, for example:

Code:

<!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 type="text/css">
.some {
 padding: 5px;
 border: 3px dashed red;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
</head>
<body>
<div class="some"></div>
<div style="width: 40px;">
<div class="some"></div>
</div>
<script type="text/javascript">
alert($('.some').eq(1).width());
</script>
</body>
</html>

This targets the 2nd element with a class of 'some'. It alerts 24 in IE 7, Fx 3.5.3, Safari 4, Opera 10 and Chrome 3. This means it has subtracted the padding and the border for you.

**Falkon303** · 10-27-2009, 04:38 PM

Thanx much for the reply...

After a bit of scouring, I found the following works in IE fine -

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.cssstyling {border-right:3px solid #003333;padding-left:5px;}
</style>
</head>
<body>
<div class="opera" onclick="alert(document.styleSheets(0).cssText);">get info</div>
</body>
</html>

learned from - http://www.quirksmode.org/dom/tests/stylesheets.html

Many of the examples on that page also work in FF/IE/other browsers, so it's a matter of learning the terminology.
I find this awesome to know.

I much appreciate the responses.

**jscheuer1** · 10-27-2009, 06:04 PM

Yes there are several methods, that in my opinion is the real problem. As for the method in your post, it amounts to pretty much the same thing as just assuming certain things about the stylesheet. If you (or an end user of your code) change the order of the sheets, you will get unexpected results. Perhaps even just changing the one stylesheet you are focusing on could mess things up - that would depend upon how you parse the information this method yields, and that can get fairly tricky in itself.

A little more about jQuery. I find it increasingly reliable (they keep improving it), and for any project that is at all complex, it can really cut down on the amount of code you have to write. Of all the libraries, it is the one which is most compatible (via its noConflict mode) with other libraries.

**Falkon303** · 10-29-2009, 05:22 PM

jscheuer1 - Thanx, I'll check it out a bit more. I am very much used to using the scriptaculous library, but it seems I may have passed jquery by. I'm pretty much in love with the accordian script anyways, so it may be a nice time for a change!

**jscheuer1** · 10-31-2009, 03:37 AM

If you are already using Prototype/Scriptaculous, rather than adding jQuery, you should probably investigate the efficacy of using your existing library first. Personally I presently prefer jQuery, but I'm not opposed to working in other environments that employ other libraries. Prototype has:

Code:

el.cumulativeOffset()

and:

Code:

el.getDimensions()

where el is a reference to the element you want info about. The cumulativeOffset() function returns an object that has two properties, top and left which contain the pixel offsets (from the top and left of the window) as numbers. Like if you do:

Code:

alert($$('html')[0].cumulativeOffset().left);

you will generally get 0, the pixel offset of the HTML element from the left of the window as a number.

As for getDimensions(), it returns an object that has a width and a height property, for example - if you do:

Code:

alert($$('html')[0].getDimensions().width);

You will generally get the pixel width of the HTML element as a number.

I say generally because this will depend to an extent upon the style set for the given element (in this case the html element), and because it will depend upon the load state of the element and its content at the time you ask for the information. All pretty much standard javascript considerations though.

A bit of testing would also be a good idea to see what sorts of results you get in at least a few browsers. However, once you establish how these functions behave in the sort of situations you are most likely to use them in, they can be more or less relied upon to behave as expected.

Thread: how to get css properties via js?

Thread Tools

Search Thread

how to get css properties via js?

Bookmarks

Bookmarks

Posting Permissions