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

Question

У меня есть таблица стилей, которая определяет ширину по умолчанию для изображений. Когда я читаю стиль ширины изображения с помощью 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; 
} 

Answer 1

У меня есть обходной путь идея, что мощи работы.

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

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

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

• Clone его в JQuery: element = $("#img").clone()

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

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

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

Answer 2

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

Answer 3

Вы можете проверить стиль 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; 

вы должны только соответствовать ширине не пограничную ширину.

Answer 4

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

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

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