JQuery/Javascript css ( "width" )/проверить, определен ли стиль в css?

У меня есть таблица стилей, которая определяет ширину по умолчанию для изображений. Когда я читаю стиль ширины изображения с помощью jQuery width(), он возвращает правую ширину. Он также возвращает ту же ширину, когда я вызываю css("width"). Но если в таблице стилей нет ширины, функция css("width") также вернет вычисленное значение width(), но не сообщит undefined или auto или что-то в этом роде.

Любые идеи, как я мог узнать, есть ли стиль в коде CSS или не определен?

Решение работает для меня в кросс-браузере. Спасибо всем за помощь:

$(this).addClass("default_width_check");
var width = ($(this).width() == 12345) ? 'none-defined' : $(this).width();
var height = ($(this).height() == 12345) ? 'none-defined' : $(this).height();
$(this).removeClass("default_width_check");

.default_width_check {
    width: 12345;
}

Ответы

Ответ 1

У меня есть обходная идея, которая может работать.

Определите класс с именем default_width перед всеми другими таблицами стилей:

.default_width { width: 1787px }  
/* An arbitrary value unlikely to be an image width, but not too large
   in case the browser reserves memory for it */

чтобы узнать, имеет ли изображение ширину:

  • Клонировать его в jQuery: element = $("#img").clone()

  • дает клонированный элемент класс default_width: element.addClass("default_width")

  • Если его ширина равна 1787px, она не имеет ширины - или, конечно, имеет размер 1787px в ширину, что является единственным случаем, когда этот метод не будет работать.

Я не совсем уверен, будет ли это работать, но может. Изменить. Как отмечает @bobince в комментариях, вам нужно будет вставить элемент в DOM для всех примененных классов, чтобы сделать правильный расчет ширины.

Ответ 2

Нет, метод getComputedStyle(), по которому зависит функция jQuery css(), не может различать ширину, вычисленную из auto vs явной ширины. Вы не можете определить, было ли что-то задано в таблице стилей, только из прямой inline style="width: ..." (которая отражается в свойстве element .style.width).

currentStyle работает по-другому и даст вам auto, однако это нестандартное расширение IE.

Если вам действительно захотелось это сделать, вы можете перебирать document.styleSheets, прочитывая каждое из своих объявлений, выбирая селектор и запрашивая его, чтобы увидеть, соответствует ли ваш целевой элемент, а затем, если он содержит width править. Это было бы, однако, медленным и не совсем весело, тем более что IE styleSheet DOM отличается от других браузеров. (И он по-прежнему не справляется с псевдоэлементами и псевдоклассами, например :hover.)

Ответ 3

Вы можете использовать image.style.width (изображение должно быть вашим элементом). Это возвращает пустую строку, если она не определена в CSS.

Ответ 4

Вы можете проверить элемент style.cssText, если определена ширина;

<img id="pic" style="width:20px;" src="http://sstatic.net/ads/img/careers-ad-header-so.png" />

var pic = document.getElementById('pic');
alert(pic.style.cssText);

Но обратите внимание на следующие стили

border-width: 10px;
width: 10px;

вы должны соответствовать только ширине рамки.