jQuery检查元素是否具有内联定义的特定样式属性

我需要检查一个元素是否具有已定义的css属性，但是我在使用jQuery.css（）函数时遇到了一些问题

我要找的属性是宽度

如果元素没有定义的宽度，我尝试以下操作：

if(base.$element.css('width') !== 'undefined')

---

我获取浏览器的计算宽度。

使用

.attr

检查

style

属性

if(base.$element.attr('style').length > 0) {
   //...
}

如果你关心宽度，那么

if(base.$element.attr('style').indexOf('width') !== -1) {
   //...
}

下面是一个非常简单（可能需要改进）的插件，它将为您提供内联样式属性的值（如果找不到该属性，则返回

undefined

）：

你可以这样称呼它：

//Returns value of "width" property or `undefined`
var width = $("#someElem").inlineStyle("width");

if (base.$element.inlineStyle("width")) {
    // It has a `width` property!
}

这是一个例子

请注意，它将只返回匹配集中第一个元素的值

由于当找不到该样式属性时，它返回

undefined

，因此您可以在如下情况下使用它：

//Returns value of "width" property or `undefined`
var width = $("#someElem").inlineStyle("width");

if (base.$element.inlineStyle("width")) {
    // It has a `width` property!
}

---

更新

这是一个非常非常简短的版本。我意识到

prop（“style”）

返回的是一个对象，而不是字符串，并且该对象的属性对应于可用的样式属性。所以你可以这样做：

(function ($) {
    $.fn.inlineStyle = function (prop) {
        return this.prop("style")[$.camelCase(prop)];
    };
}(jQuery));

您可能希望使用自定义的camelCase函数替换

$.camelCase

，因为jQuery函数似乎没有文档记录，可能不值得依赖。我只是在这里用它，因为它比较短

---

这是那个的一张照片。注意，在这种情况下，如果在元素上找不到样式，则返回值将是空字符串。这仍然会计算为

false

，因此上面的

if

语句应该仍然有效。

您可以检查样式属性是否未定义

    var attr = $(this).attr('style');
    if (typeof attr !== 'undefined' ) {
   }

为什么不只是：

var $el = $('element[style*="width"]');

然后您可以使用以下工具进行测试：

if ( $el.length ) {
    //...
}

检查“宽度”，例如：

if ($(element).prop("style")["width"] !== '')
{...}

---

但这如何检查它是否有宽度？我实际上并不关心元素是否有其他样式，我需要知道它是否在“样式”属性中定义了宽度。@ubercooluk op只需要检查是否有内联样式。如果要检查

宽度

，则可以执行类似

.indexOf（'width'）！=-1

@ubercooluk如果它是在CSS定义中定义的（在外部CSS文件或

标记中），那么根据定义，它不是内联的。@xdazz-如果有一个

边框宽度

属性，但没有

宽度

属性呢？太好了。首先我想到了一些基于reg-ex的解决方案。如果这样做很好@MatthewGrima-我已经用一个更短版本的插件代码更新了我的答案。也许值得在几个不同的浏览器中测试——我只在Chrome上试过。这不是问题所在。它要求确定

样式

属性中是否定义了

宽度

！非常感谢。我喜欢它，但这个解决方案也将匹配“最小宽度”和“最大宽度”，如果专门寻找非连字符的“宽度”，这可能会有问题。