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

这是working example。

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

由于在找不到该样式属性时返回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的使用替换为自定义的camelcase函数，因为jQuery似乎没有文档，并且可能不值得依赖。我刚刚在这里使用它，因为它更短。

这是那个working example。请注意，在这种情况下，如果在元素上找不到样式，则返回值将为空字符串。这仍将评估为false，因此上述if语句仍应有效。

Answer 2

为什么不呢：

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

然后你可以用以下方法测试它：

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

Answer 3

使用.attr检查style属性。

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

如果您关心宽度，那么

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

Answer 4

检查“宽度”，例如：

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

Answer 5

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

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

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

5 个答案: