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

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

currentStyle的工作方式不同，会为您提供auto，但这是一个非标准的IE扩展程序。

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

Answer 3

您可以使用image.style.width（图片应该是您的元素）。如果未在CSS中定义，则返回空字符串。

Answer 4

如果定义了宽度，您可以检查元素的style.cssText;

<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);

但请注意以下样式

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

你应该只匹配宽度而不是边框宽度。

jQuery / Javascript css（“width”）/检查样式是否在css中定义？

4 个答案: