Question

如果div有css属性height:auto，我需要检查javascript（或者jQuery），或者检查这个div是否没有设置任何高度？但实际上浏览器就像它一直计算div的当前高度然后将它分配给该div。所以实际上div总是有一个高度设置，即使在css我们说div必须在height:auto。我怎么能这样做？

Answer 1

这是我的解决方案，我在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);
  }

Answer 2

检查以下某项的值，看看它们是否可以帮助您

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

显然， divid 是你的div的id

Answer 3

你可以使用currentStyle属性

在IE中完成

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

不幸的是你不能在任何其他浏览器中做到这一点（我认为这是我唯一喜欢的IE浏览器）。实际上你可以做到，但不是直接的。

其他浏览器的方法如下：

首先你必须检查内联高度属性（它可以是一个允许使用它的表），然后你必须找到内联样式属性并检查它是否有一个高度定义。然后，你必须遍历文档中的所有样式，并检测更严格的加工样式，并检查是否有另一个不那么严格，但使用！important修饰符。

正如您所看到的，这不是一个简单的过程，因此可以在其他浏览器中使用，但并不容易。如果您只针对IE，那么您就完成了： - ）

祝你好运！

Answer 4

昨天我正在努力解决这个问题，但我找到了一个有效的黑客。

<强>插件

$.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;
    }
};

这是展示该插件的fiddle。

基本上，插件会在原始元素中添加一个div，并使其高度大于原始元素。如果原始元素的新高度大于原始高度，则元素增长，高度为自动。

Answer 5

在jQuery $('#mydiv').css('height');中，您将获得<div id="mydiv"></div>

的高度

如何检查div是否具有液体/自动高度？

5 个答案: