jQuery/JavaScript的CSS（“宽度”）/检查样式是在CSS中定义？

我有一个样式表，它定义图像的默认宽度。当我用jQuery width()读取图像宽度样式时，它会返回正确的宽度。当我拨打css("width")时，它也会返回相同的宽度。但是如果样式表中没有定义宽度，函数css("width")也会返回计算的width()值，但不会说undefined或auto或类似的东西。jQuery/JavaScript的CSS（“宽度”）/检查样式是在CSS中定义？

任何想法如何我可以找出风格是否定义在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; 
}

来源

2010-11-05 i3rutus

有趣的问题。我想知道你为什么需要这个？ – Stefanvds 2010-11-05 11:28:43

我认为这是HTML规范中定义的行为：如果未指定，则元素的width属性将设置为实际元素宽度。整蛊，有兴趣看看是否有任何解决方案 – 2010-11-05 11:29:49

我有一个CMS有严格的图像和文字大小的定义。但是，图像大小是在css中为CMS使用的每个特殊模板中的每个图像定义的。如果管理员滚过图像，我想显示在CSS中定义的宽度和高度，以便用户知道如何裁剪/缩放图像。 – i3rutus 2010-11-05 11:34:51

我有一个解决方法的想法，可能工作。

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

找出图像是否具有设定宽度：

所有其它样式表之前定义一个名为default_width类

克隆它的jQuery：element = $("#img").clone()

给出克隆元素default_width class：element.addClass("default_width")

如果它的宽度是1787px，它没有设置宽度 - 或者当然宽度是1787px，这是这种方法不适用的唯一情况。

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

来源

2010-11-05 11:39:12

，完美谢谢。 – i3rutus 2010-11-05 11:47:20

嗯......有趣的黑客！不过，我认为你必须在原地修改元素，以确保所有相同的规则适用于它。没关系，你可以'addClass'，度量并立即'removeClass'而不强制重画。不幸的是，类选择器比元素选择器具有更高的特异性，所以如果宽度是由元素选择器设置的，这将覆盖它并决定没有设置宽度。由于没有'！unimportant'声明，所以无法真正看到任何解决方法...... – bobince 2010-11-05 12:14:30

@bobince关于如何使用它的好处！更高的特异性是一个缺点，是正确的。有机会在手边的情况下没有问题，因为所有'img'都不会为全局设置'width'，但仍然是。但是我看不到解决这个问题的办法，但是，使用'default_width'类（例如缩小它以匹配特定属性）只会使* *更具体。 – 2010-11-05 12:21:00

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

来源

2010-11-05 11:29:14

只在FF3.6和IE8中测试。但它应该工作。 – 2010-11-05 11:29:55

我不这么认为：如果'style'属性没有设置，这将返回一个空字符串，但它不会识别样式表中任意类中设置的设置。我很高兴能够纠正，但我很肯定这个 – 2010-11-05 11:30:23

你是对的:) – 2010-11-05 11:32:34

如果定义宽度，可以检查元素的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;

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

来源

2010-11-05 11:31:35 jerjer

这不适用于在类中设置的属性，但是，它会吗？ – 2010-11-05 11:32:26

你就在那里佩卡！它不会在CSS类定义的宽度上工作，这只会工作在内联CSS。 – jerjer 2010-11-05 11:35:49

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

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

如果你真的想要去解决它，你可以遍历document.styleSheets，阅读他们的每一个声明，让选择出来，查询它，看看你的目标元素是否匹配，然后看它是否含有width规则。然而，这样做会很慢并且一点也不好玩，特别是IE的styleSheet DOM与其他浏览器不同。（它仍然不会应付伪元素和伪类，如:hover。）

来源

2010-11-05 11:33:02 bobince

+1 - 通过jQuery 1.4.3 CSS重写，实际上应该已经暴露了（绕过钩子），因为所有的代码都在那里。 – 2010-11-05 11:52:53

jQuery/JavaScript的CSS（“宽度”）/检查样式是在CSS中定义？

回答

相关问题