Question

我需要知道HTML元素是否会随着内容的添加而扩展。可以通过多种方式预设元素的高度 - 使用内联样式高度或最大高度，通过设置父元素设置其高度时的相对高度，通过css类等等。

我需要知道在添加子元素时元素的高度是否会增加。我希望使用JQuery css方法，但是它会计算实际值并且不会告诉我它是否会随着新子项的添加而改变。

Answer 1

有几种方法可以设置元素的高度。这是一个测试函数，您可以使用它来确定指定的元素是否具有固定的高度：

<强> HTML

<span id="notAffected"></span>
<div id="hasCSSHeight"/>
<div id="hasInlineHeight" style="height:50px"/>
<div id="hasAttribureHeight" height="10px" />
<div id="hasNoHeight"/>

<强> CSS

#notAffected,
#hasCSSHeight {
  height: 100px;
}

<强>的JavaScript

function hasHeight(el) {
  var i,
      l,
      rules = window.getMatchedCSSRules(el),
      display = window.getComputedStyle(el).getPropertyValue('display');

  // Inline displayed elements are not affected by height definition
  if(display === 'inline') {
    return false;
  }

  // CSS
  if(rules) {
    for(i=0,l=rules.length;i<l;i++) {
      if(rules[i].style.getPropertyValue('height')) {
        return true;
      }
    }
  }

  // Inline style
  if(el.style.height) {
    return true;
  }

  // Attribute
  if(el.getAttribute('height')) {
    return true;
  }

  return false;
}

示例请参见此处http://jsbin.com/usojec/3/edit

如何确定元素高度是否固定

1 个答案: