我需要检查元素是否具有定义的CSS属性,但是使用jQuery.css()函数时遇到了一些麻烦。
我要寻找的属性是宽度。
如果该元素没有定义的宽度,请尝试以下操作:
if(base.$element.css('width') !== 'undefined')
我得到了浏览器的计算宽度。
这是我放在一起的一个非常简单(可能需要改进)的插件,它将为您提供内联样式属性的值(undefined如果找不到该属性,则返回):
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")返回一个对象,而不是字符串,并且该对象的属性与可用的样式属性相对应。因此,您可以执行以下操作:
prop("style")
(function ($) { $.fn.inlineStyle = function (prop) { return this.prop("style")[$.camelCase(prop)]; }; }(jQuery));
您可能想$.camelCase用自定义的驼峰函数来代替对的使用,因为jQuery似乎没有文档记录,可能不好依赖。我只是在这里用它,因为它更短。
$.camelCase
这是一个可行的例子。请注意,在这种情况下,如果在元素上找不到样式,则返回值将为空字符串。该结果仍将为false,因此上述if声明仍然有效。
false
if