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

【问题标题】：jQuery/Javascript css("width") / check if style is defined in css?jQuery/Javascript css("width") / 检查样式是否在 css 中定义？
【发布时间】：2010-11-05 23:38:04
【问题描述】：

我有一个样式表，它定义了图像的默认宽度。当我使用 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;
}

【问题讨论】：

有趣的问题。我想知道你为什么需要这个？
我认为这是 HTML 规范中定义的行为：如果未指定，元素的 width 属性将设置为实际元素宽度。棘手，有兴趣看看是否有任何解决方案
我有一个 CMS，它对图像和文本大小有严格的定义。但是，图像大小是在 css 中为 CMS 使用的每个特殊模板中的每个图像定义的。如果管理员滚动图像，我想显示 css 中定义的宽度和高度，以便用户知道如何裁剪/缩放图像。

标签： javascript jquery css

【解决方案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")
如果它的宽度为 1787 像素，则它没有设置宽度 - 或者，当然，它本身是 1787 像素宽，这是此方法不起作用的唯一情况。

我不完全确定这是否会奏效，但它可能会。编辑：正如@bobince 在 cmets 中指出的那样，您需要将元素插入 DOM 才能正确应用所有类，以便进行正确的宽度计算。

【讨论】：

嗯...有趣的破解！不过，我认为您必须就地更改元素，以确保所有相同的规则都适用于它。没关系，您可以addClass、测量并立即removeClass，而无需强制重绘。不幸的是，类选择器比元素选择器具有更高的特异性，所以如果元素选择器设置了宽度，这将覆盖它并决定没有设置宽度。实在看不出有什么办法，因为没有!unimportant 声明...
@bobince 关于就地做这件事的好处！较高的特异性是一个缺点，确实如此。在手头的情况下，这可能不是问题，因为 width 不会为所有 img 全局设置，但仍然如此。不过，我看不出有什么办法解决这个问题，弄乱default_width 类（比如缩小范围以匹配特定属性）只会使它更加具体。

【解决方案2】：

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

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

如果您真的想解决这个问题，您可以遍历document.styleSheets，阅读他们的每个声明，取出选择器并查询它以查看您的目标元素是否匹配，然后查看如果它包含width 规则。然而，这会很慢而且一点也不好玩，尤其是当 IE 的 styleSheet DOM 与其他浏览器不同时。（而且它仍然无法处理伪元素和伪类，比如:hover。）

【讨论】：

+1 - 使用 jQuery 1.4.3 CSS 重写，这真的应该暴露（绕过钩子）更方便一点，因为所有代码都在那里。

【解决方案3】：

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

【讨论】：

我不这么认为：如果未设置 style 属性，这将返回一个空字符串，但它不会识别样式表中任意类中设置的设置。我很高兴能得到纠正，但我对此很确定

【解决方案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;

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

【讨论】：

这不适用于类中设置的属性，不是吗？
你就在那里 Pekka！它不适用于 css 类上定义的宽度，这只适用于内联 css。