Определение ширины: авто в jQuery - PullRequest
Новая
       26

Определение ширины: авто в jQuery

15 голосов
/ 24 августа 2010

Я получаю ширину элементов, используя jQuery, и предпочел бы, чтобы я мог указать, была ли указана явная ширина (и высота). 

<div id="test"></div>
<script type="text/javascript">
$(function() { alert($('#test').css('width')); });
</script>

Это предупредит неявноеширина div с точки зрения того, сколько пикселей он занимает на экране клиента.Есть ли способ, что если ширина либо отсутствует, либо установлена ​​как width: auto, что ее можно проверить с помощью jQuery?

То есть вместо приведенного выше примера, возвращающего целое число, он вернет либо autoили undefined.Или, альтернативно, есть эквивалент isAuto функции?

Ответы [ 6 ]

8 голосов
/ 28 апреля 2015

Это получит либо строку "auto", либо "180px" для абсолютных значений. 

$('element').prop('style').width

для ширины или 

$('element').prop('style').height

для высоты.

8 голосов
/ 24 августа 2010

Я не верю, что это возможно на данный момент. По крайней мере, не в любом другом браузере, кроме IE. IE реализует element.currentStyle, который представляет стили, в которых они были написаны в файле CSS. С другой стороны, остальные браузеры реализуют window.getComputedStyle, который возвращает вычисленные значения этих стилей. Это то, что вы получаете, числовое значение вместо auto.

Единственный способ обойти это - проанализировать объявления CSS из document.styleSheets.

Ссылки:

4 голосов
/ 25 августа 2010

$('#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/

3 голосов
/ 03 января 2014

Насколько я знаю, нет встроенной функции 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');

Вот скрипка , демонстрирующая функциональность плагина.

0 голосов
/ 25 августа 2010
  1. функция создания
  2. передать идентификатор элемента css в функцию
  3. записать случай, когда инструкция будет выполняться для свойства width элемента id

ПРИМЕЧАНИЕ: для использования на нескольких элементах было бы разумно использовать цикл с массивом имен элементов

0 голосов
/ 24 августа 2010

Я не совсем уверен, правильно ли я отвечаю на ваш вопрос, но если вы используете функцию width () , это даст вам целое число, представляющее ширину визуализации в пикселях.

...