jQuery/Javascript css(“width”) / check if style is defined in css?

Question

I have a stylesheet which defines default width for images. When I read the image width style with jQuery width() it returns the right width. It also returns th

Answer 1

You can use image.style.width (image should be your element). This returns an empty string if it's not defined in CSS.

Answer 2

No, the getComputedStyle() method on which jQuery's css() function depends cannot distinguish between an width computed from auto vs explicit widths. You can't tell if there was something set in the stylesheet, only from direct inline style="width: ..." (which is reflected in the element's .style.width property).

currentStyle works differently and will give you auto, however this is a non-standard IE extension.

If you really wanted to work it out, you could iterate over document.styleSheets, reading each of their declarations, getting the selector out and querying it to see whether your target element matched, then seeing if it contains a width rule. This would, however, be slow and not at all fun, especially as IE's styleSheet DOM differs from the other browsers. (And it still wouldn't cope with pseudo-elements and pseudo-classes, like :hover.)

Answer 3

I have a workaround idea that might work.

Define a class named default_width before all other style sheets:

.default_width { width: 1787px }  
/* An arbitrary value unlikely to be an image's width, but not too large
   in case the browser reserves memory for it */

to find out whether an image has a width set:

• Clone it in jQuery: element = $("#img").clone()

• give the cloned element the default_width class: element.addClass("default_width")

• If its width is 1787px, it has no width set - or, of course, is natively 1787px wide, which is the only case in which this method will not work.

I'm not entirely sure whether this will work, but it might. Edit: As @bobince points out in the comments, you will need to insert the element into the DOM for all classes to be applied correctly, in order to make a correct width calculation.

Answer 4

You can check the element's style.cssText if the width is defined;

<img id="pic" style="width:20px;" src="http://sstatic.net/ads/img/careers-ad-header-so.png" />

var pic = document.getElementById('pic');
alert(pic.style.cssText);

​But please note of the following styles

border-width: 10px;
width: 10px;

you should only match the width not the border-width.