jQuery/Javascript css("width")/检查样式是否在css中定义？

Question

我有一个样式表定义图像的默认宽度.当我用jQuery读取图像宽度样式时,width()它返回正确的宽度.我打电话时也会返回相同的宽度css("width").但是,如果没有在样式表中定义的宽度的功能css("width")也将返回计算的width()值,但不会说undefined或auto或类似的东西.

我有什么想法可以找出CSS代码中是否定义了样式？

解决方案适用于跨浏览器.感谢大家的帮助:

$(this).addClass("default_width_check");
var width = ($(this).width() == 12345) ? 'none-defined' : $(this).width();
var height = ($(this).height() == 12345) ? 'none-defined' : $(this).height();
$(this).removeClass("default_width_check");

.default_width_check {
    width: 12345;
}

Answer 1

我有一个解决方法想法,可能工作.

定义default_width 在所有其他样式表之前命名的类:

.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 */

找出图像是否设置了宽度:

• 在jQuery中克隆它: element = $("#img").clone()

• 给克隆元素default_width类:element.addClass("default_width")

• 如果它的宽度是1787px,它没有宽度设置 - 或者,当然,本身是1787px宽,这是这种方法不起作用的唯一情况.

我不完全确定这是否有效,但可能会有效.编辑:正如@bobince在注释中指出的那样,您需要将元素插入到DOM中,以便正确应用所有类,以便进行正确的宽度计算.

Answer 2

不,getComputedStyle()jQuery css()函数所依赖的方法无法区分从auto显式宽度计算的宽度.您无法判断样式表中是否设置了某些内容,仅来自直接内联style="width: ..."(这反映在元素的.style.width属性中).

currentStyle工作方式不同,会给你auto,但这是一个非标准的IE扩展.

如果你真的想要解决它,你可以迭代document.styleSheets,阅读它们的每个声明,取出选择器并查询它以查看你的目标元素是否匹配,然后查看它是否包含width规则.然而,这将是缓慢而且没有任何乐趣,特别是因为IE的styleSheet DOM与其他浏览器不同.(它仍然无法处理伪元素和伪类,如:hover.)