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自定义camelcase函数替换为使用,因为jQuery似乎没有文档,并且可能不值得依赖.我刚刚在这里使用它,因为它更短.

这是一个有效的例子.请注意,在这种情况下,如果在元素上找不到样式,则返回值将为空字符串.那仍然会评估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"] !== '')
{...}