コンテンツが追加されたときに HTML 要素が展開されるかどうかを知る必要があります。要素の高さは、インライン スタイルの高さまたは最大高さを使用する方法、親要素に高さが設定されている場合に相対高さを設定する方法、CSS クラスを使用する方法など、さまざまな方法で事前設定できます。
子を追加すると要素の高さが増加するかどうかを知る必要があるだけです。JQuery css メソッドを使用したかったのですが、実際の値を計算し、新しい子が追加されたときに値が変更されるかどうかを教えてくれません。
コンテンツが追加されたときに HTML 要素が展開されるかどうかを知る必要があります。要素の高さは、インライン スタイルの高さまたは最大高さを使用する方法、親要素に高さが設定されている場合に相対高さを設定する方法、CSS クラスを使用する方法など、さまざまな方法で事前設定できます。
子を追加すると要素の高さが増加するかどうかを知る必要があるだけです。JQuery css メソッドを使用したかったのですが、実際の値を計算し、新しい子が追加されたときに値が変更されるかどうかを教えてくれません。
要素の高さを設定するには、いくつかの方法があります。指定された要素の高さが固定されているかどうかを判断するために使用できるテスト関数を次に示します。
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