Определение ширины: авто в jQuery
Я получаю ширину элементов, используя jQuery, и предпочел бы, чтобы я мог указать, была ли указана явная ширина (и высота).
<div id="test"></div>
<script type="text/javascript">
$(function() { alert($('#test').css('width')); });
</script>
Это предупредит неявную ширину div с точки зрения того, сколько пикселей он занимает на экране клиента. Есть ли способ, если ширина отсутствует или установлена как width: auto
что это можно проверить с помощью jQuery?
То есть вместо вышеприведенного примера, возвращающего целое число, он вернет либо auto
или же undefined
, Или, альтернативно, есть ли эквивалент isAuto
функционировать?
6 ответов
Я не верю, что это возможно на данный момент. По крайней мере, не в любом другом браузере, кроме IE. IE реализует element.currentStyle
который представляет стили в которых они были написаны в файле CSS. С другой стороны, остальные браузеры реализуют window.getComputedStyle
который возвращает вычисленные значения этих стилей. Это то, что вы получаете там, числовое значение вместо авто.
Единственный способ обойти это - проанализировать объявления CSS из document.styleSheets
,
Рекомендации:
Это получит либо строку "auto", либо "180px" для абсолютных значений.
$('element').prop('style').width
для ширины или
$('element').prop('style').height
для высоты.
$('#test')[0].style.width=="auto"
должно работать: http://jsfiddle.net/KxTLE/ и http://jsfiddle.net/KxTLE/1/ Попробуйте
jQuery.fn.isAuto=function() {
if(this[0]) {
var ele=$(this[0]);
if(this[0].style.width=='auto' || ele.outerWidth()==ele.parent().width()) {
return true;
} else {
return false;
}
}
return undefined;
};
И пример: http://jsfiddle.net/KxTLE/6/
Насколько я знаю, нет встроенной функции jQuery для определения автоматической ширины или высоты. Поэтому я написал плагин для этого.
$.fn.isAuto = function(dimension){
if (dimension == 'width'){
var originalWidth = this.innerWidth();
var marginLeft = parseInt(this.css('margin-left'));
var testMarginWidth = marginLeft+50;
this.css('margin-left', testMarginWidth);
var newWidth = this.innerWidth();
this.css('margin-left', marginLeft);
if(newWidth<originalWidth){
return true;
}
else{
return false;
}
}
else if(dimension == 'height'){
var originalHeight = this.height();
this.append('<div id="test"></div>');
var testHeight = originalHeight+500;
$('#test').css({height: testHeight});
var newHeight = this.height();
$('#test').remove();
if(newHeight>originalHeight){
return true;
}
else{
return false;
}
}
};
Первоначально я написал это, чтобы сделать высоту, поэтому я просто расширил его, чтобы включить ширину. Вы просто называете это так:
$('#element').isAuto('width');
или же
$('#element').isAuto('height');
Вот скрипка, демонстрирующая функциональность плагина.
Я не совсем уверен, правильно ли я отвечаю на ваш вопрос, но если вы используете функцию width(), это даст вам целое число, представляющее отображаемую ширину в пикселях.
- создать функцию
- передать идентификатор элемента CSS в функцию
- напишите случай, когда оператор должен быть выполнен для свойства width идентификатора элемента
ПРИМЕЧАНИЕ: для использования на нескольких элементах было бы разумно использовать цикл с массивом имен элементов