获取元素的实际宽度？
获取元素的实际宽度？
提问于 2014-04-22 17:38:54
我有一个页脚与一个图像位于右侧。下面是所述页脚的抽象示例。
问题是，每当页面变得太宽以致于窗口和水平滚动变得活跃时，我的页脚的宽度将继续取决于主体的宽度，而不是内容的实际宽度。
<body>
<div id='bodyContent' style="height:600px; width:600px;">
<div style="width:200px; height: 400px; float:left; background-color:pink ">
</div>
<div style=" margin-left:220px; width:1000px; height:500px; background-color:green; padding:1px;">
<div style="width:200px; height:100px; margin:74px; background-color:lime;"></div>
<div style="width:1200px; height:100px; margin:74px; background-color:lime;"></div>
</div>
</div>
<div id='footerContent' style="min-width:100%; padding:0; background-color:black; height:150px; margin: 100px 0 0 0; position:relative;">
<div id="image" style="width:75px; height:75px; position:absolute; right:37px; bottom: 37px; background-color:yellow;"></div>
</div>
是否有一些css或javascript可以应用于此，以便我可以将页脚的宽度设置为网页的实际宽度？我已经检查了文档、窗口和屏幕宽度/外部宽度；但是每个窗口都无法处理页面的溢出大小。
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-04-22 17:54:42
编辑
//这将获得指定元素的实际width或height
<div id='bodyContent' style="height:600px; width:600px;">
<div style="width:200px; height: 400px; float:left; background-color:pink"></div>
<div style=" margin-left:220px; width:1000px; height:500px; background-color:green; padding:1px;">
<div style="width:200px; height:100px; margin:74px; background-color:lime;"></div>
<div style="width:1200px; height:100px; margin:74px; background-color:lime;">
<!-- Added this element as a check -->
<div style="width:5000px; height:100px; margin:74px; background-color:lime;"></div>
</div>
</div>
</div>
<div id='footerContent' style="min-width:100%; padding:0; background-color:black; height:150px; margin: 100px 0 0 0; position:relative;">
<div id="image" style="width:75px; height:75px; position:absolute; right:37px; bottom: 37px; background-color:yellow;"></div>
</div>Javascript
//this returns the actual `width` and `height` of the specified element (excluding `borders`)
function getActualWH(el){
return {aW:el.scrollWidth,aH:el.scrollHeight}
}//如果希望包括边框的宽度，则可以使用我前面的一个函数->
function getElProps(el,attr){
//checking if the browser is Internet Explorer
isIEX = navigator.userAgent.match(/Trident/);
whaT_ = isIEX ? el.currentStyle : window.getComputedStyle(el);
getWhaT_ = isIEX ? whaT_.getAttribute(attr) : whaT_.getPropertyValue(attr);
return getWhaT_;
}示例(无边框)：
var element = document.getElementById('bodyContent');
width = getActualWH(element).aW;
height = getActualWH(element).aH;示例(带边框)：
width = getActualWH(element).aW;
borderLeftWidth = parseInt(getElProps(element,'border-left-width'));
borderRightWidth = parseInt(getElProps(element,'border-right-width'));
actualWidth = width + borderLeftWidth + borderRightWidth;
height = getActualWH(document.getElementById('bodyContent')).aH;
borderTopWidth = parseInt(getElProps(element,'border-top-width'));
borderBottomWidth = parseInt(getElProps(element,'border-bottom-width'));
actualWidth = width + borderTopWidth + borderBottomWidth;这段代码也适用于IE8 (如果您计划支持它)
Stack Overflow用户
发布于 2014-04-22 18:00:11
您可以放置一个宽度类似于以下宽度的父包装：
<div id='wrapper' style="width:1000px;">
<div id='bodyContent' style="height:600px;">
<div style="/*width:1000px;*/ height:250px; background-color:green;"></div>
</div><div id='footerContent' style="width:100%; padding:0; background-color:black; height:150px; margin: 100px 0 0 0; position:relative;">
<div id="image" style="width:75px; height:75px; position:absolute; right:37px; bottom: 37px; background-color:yellow;"></div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23226547
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号