Is there anyway to use javascript get the attributes determined by CSS?

Question

For example,

<html>
  <head><link rel="stylesheet" type="text/css" href="theme.css"></head>
    <body>
      <img id="tmp"></img>
    </body>
</html>

in theme.css

img#tmp{
      width:120px;
      top:0;
      left:0;
      }

Is there anyway that I can get the width of the image "tmp" directly by JavaScript? Something like
var temp=document.getElementById("tmp"); var width=temp.style.width?

Duplicate http://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript — Ray Toal, Aug 16 '11 at 01:21

score 0 · Answer 1 · answered Aug 16 '11 at 01:17

You'll definitely want JQuery's help on this. Here is the list of all JQuery functions that can help you access all the style information you would want (hopefully).

Btw, if you're not familiar with some sort of Javascript library, it's probably a good idea to learn one.

score 0 · Answer 2 · answered Aug 16 '11 at 01:23

0

I 2nd Nadir's motion, however in your direct example you can change your code to:

var temp=document.getElementById("tmp");
var width=temp.style.width;

In your own example, you have used the getElementById incorrectly by pluralizing it.

This comment sums up why.

answered Aug 16 '11 at 01:23

danjah

2,939
2
30
47

@Danjah This will only work if the `width` property was set inline (inside the `style` attribute), which is *not* the case with OP's question. – Šime Vidas Aug 16 '11 at 01:31

score 0 · Answer 3 · answered Aug 16 '11 at 01:27

What you're after is the computed style of the element. As usual, IE6-8 does it differently, so we need to do some sniffing:

var getStyle = window.getComputedStyle ? function (elem, prop) {
    var styles = getComputedStyle(elem, null);
    return prop ? styles[prop] : styles;
} : function (elem, prop) {
    return prop ? elem.currentStyle : elem.currentStyle[prop];
};

score 0 · Accepted Answer · answered Aug 16 '11 at 01:28

Here you go:

getComputedStyle( elem ).getPropertyValue( 'width' )

where elem is the DOM element.

Live demo: http://jsfiddle.net/7h4cg/

Btw, some older versions of some browsers do not support this code. If you need a cross-browser solution, use a cross-browser library.

score 0 · Answer 5 · answered Aug 16 '11 at 01:33

0

This is my cross-browser inline function:

function getComputedStyle(elem, styleAttr){
    return (elem.currentStyle ? elem.currentStyle : document.defaultView.getComputedStyle(elem, null))[styleAttr];
}

answered Aug 16 '11 at 01:33

Alex

180
4

score 0 · Answer 6 · answered Aug 16 '11 at 02:45

Some browsers will return the literal style width and height, as it was written in the css- pehaps as a pecentage or an em multiple, while others translate all style dimensions to pixels.

In this case, I'd use document.getElementById('tmp').offsetWidth to be sure to get the rendered width in pixels, no matter how it was assigned.

Is there anyway to use javascript get the attributes determined by CSS?

6 Answers6