查看HTML高度是按样式设置还是按内容设置
查看HTML高度是按样式设置还是按内容设置
提问于 2012-05-11 21:33:13
我有两个div：
<div id="div1"></div>
<div id="div2">div2</div>在我的css中：
#div1{ height:20px}两个div都有20px的高度，请检查demo
我怎样才能知道div的高度是由内容决定的，还是以css或内联样式设置的？
这有助于我找出尺寸是由developer设置的，还是由浏览器计算出来的。
回答 4
Stack Overflow用户
回答已采纳
发布于 2012-05-11 21:52:26
我找到了一种方法来实现它:)
function getRealHeight(element){
var height=0;
if (element.children().length>0){
var temp = $('<div></div>');
temp.append(element.children());
height = element.height();
element.append(temp.children());
} else {
var html=element.html();
element.html('');
height = element.height();
element.html(html);
}
return height;
}
DEMO
Stack Overflow用户
发布于 2012-05-11 23:10:39
使用此函数：
function emptyHeight ( elem ) {
var $temp = $( '<div />' );
var $elem = $( elem );
var height;
$temp.append( $elem.contents() );
height = $elem.height();
$elem.append( $temp.contents() );
return height;
}其思想是暂时将所有子节点从元素中分离出来。没有子级的元素的高度为0，除非通过CSS设置它的高度。
将DIV元素传递给该函数。如果它返回0，这意味着DIV没有通过CSS设置它的高度。
if ( emptyHeight( yourDiv ) === 0 ) {
// the DIV does not have any height value set via CSS
} else {
// the DIV has a CSS height set
}Stack Overflow用户
发布于 2012-05-11 21:39:12
您可以使用jQuery搜索CSS高度值并进行比较。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10552382
复制相关文章
相似问题