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

Question

我需要检查元素是否具有定义的CSS属性，但是使用jQuery.css（）函数时遇到了一些麻烦。

我要寻找的属性是宽度。

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

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

我得到了浏览器的计算宽度。

Answer 1

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

​(function ($) {
    $.fn.inlineStyle = function (prop) {
         var styles = this.attr("style"),
             value;
         styles && styles.split(";").forEach(function (e) {
             var style = e.split(":");
             if ($.trim(style[0]) === prop) {
                 value = style[1];           
             }                    
         });   
         return value;
    };
}(jQuery));

您可以这样称呼它：

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

这是一个有效的例子。

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

由于undefined在找不到该样式属性时它会返回，因此可以在如下情况下使用它：

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用自定义的驼峰函数来代替对的使用，因为jQuery似乎没有文档记录，可能不好依赖。我只是在这里用它，因为它更短。

这是一个可行的例子。请注意，在这种情况下，如果在元素上找不到样式，则返回值将为空字符串。该结果仍将为false，因此上述ifhtml" target="_blank">声明仍然有效。