Подтвердить что ты не робот

JQuery проверяет, имеет ли элемент определенное свойство стиля, определенное в строке

Мне нужно проверить, имеет ли элемент заданное ему свойство css, но у меня возникают некоторые проблемы с использованием функции jQuery.css().

Свойство, которое я ищу, - это ширина.

Если элемент не имеет определенной ширины, и я пробую это:

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

Я получаю вычисляемую ширину браузера.

4b9b3361

Ответ 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 должен работать.

Ответ 2

Почему не просто:

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

И затем вы можете протестировать его с помощью:

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

Ответ 3

Используйте .attr, чтобы проверить атрибут style.

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

Если вам нужна ширина, то

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

Ответ 4

Проверка "ширины", например:

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

Ответ 5

Matthew вы можете проверить, есть ли атрибут стиля undefined или нет

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