Блог

Мне нужно проверить в javascript (или, может быть, jQuery), имеет ли div свойство css height:auto , или, может быть, проверить, не установлена ли у этого div какая-либо высота? Но на самом деле браузер действует так, как будто он продолжает вычислять текущую высоту div, а затем присваивает ее этому div. Таким образом, на самом деле div всегда имеет установленную высоту, даже если в css мы сказали, что div должен быть in height:auto . Как я могу это сделать?

Вот мое решение, которое я успешно реализовал в своем плагине jQuery, ScaleText:

   function checkAutoHeight(el) {
    // Get the original height of the parent.
    var origHeight = $(el).parent().outerHeight();

    // Create a 1px bump in the size of the element you are checking.
    var tester = $(el).append('<div class="scaleTextHeightCheck" style="display: block; height: 1px; width: 1px; content: '';""></div>');

    // Check to see if the parent increased by 1px as a result of the bump.
    var newHeight = $(el).parent().outerHeight();

    // Cleanup.
    $('.scaleTextHeightCheck').detach();

    // Return the result.
    return (origHeight < newHeight);
  }
  

вы можете сделать это в IE, используя атрибут currentStyle

 var height= document.getElementById('divid').currentStyle.height;
  

К сожалению, вы не можете сделать это ни в одном другом браузере (я думаю, это единственное, что мне нравится в IE). На самом деле вы можете это сделать, но не прямым способом.

Способ обхода в других браузерах следующий:

сначала вы должны проверить встроенный атрибут высоты (это может быть таблица, которой разрешено его использовать), затем вам нужно найти встроенный атрибут стиля и проверить, определена ли у него высота. Затем вам нужно перебрать все стили в вашем документе и определить более строгий стиль обработки, а также проверить, есть ли другой, менее строгий, но с модификатором !important .

Как вы можете видеть, это непростой процесс, поэтому в других браузерах это возможно, но непросто. Если вы ориентируетесь только на IE, тогда все готово 🙂

Удачи!

Вчера я боролся с этим, но нашел хак, который работает.

Плагин

 $.fn.isAuto = function(){
    var originalHeight = this.height();
    this.append('<div id="test"></div>');
    var testHeight = originalHeight 500;
    $('#test').css({height: testHeight});
    var newTestHeight = $('#test').height();
    var newHeight = this.height();
    $('#test').remove();
    if(newHeight>originalHeight){
        return true;    
    }
    else{
        return false;
    }
};
  

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

По сути, плагин добавляет div внутри исходного элемента и придает ему высоту, большую, чем у исходного элемента. Если новая высота исходного элемента больше исходной высоты, элемент вырос, а высота автоматически.

Проверьте значения одного из следующих, чтобы узнать, могут ли они вам помочь

 document.getElementById ( 'divid' ).style.height
$('#divid').css ( 'height' )
$('#divid')[0].style.height
  

Очевидно, что divid — это идентификатор вашего div