我有两个div:
<div id="div1"></div>
<div id="div2">div2</div>
在我的css中:
#div1{ height:20px}
两个div都有20px的高度,请检查demo
我怎样才能知道div的高度是由内容决定的,还是以css或内联样式设置的?
这有助于我找出尺寸是由developer设置的,还是由浏览器计算出来的。
发布于 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
发布于 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
}
发布于 2012-05-11 21:39:12
您可以使用jQuery搜索CSS高度值并进行比较。
https://stackoverflow.com/questions/10552382
复制相似问题