获取元素的实际宽度？答案

【问题标题】：Get the actual width of an element?获取元素的实际宽度？
【发布时间】：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 可以应用于此，以便我可以将页脚的宽度设置为网页的实际宽度？我检查了文档、窗口和屏幕宽度/外部宽度；但是每一个都无法处理页面的溢出大小。

【问题讨论】：

标签： javascript html css scroll

【解决方案1】：

您可以放置一个宽度类似这样的父包装器：

http://jsfiddle.net/Lw54F/

<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>

【讨论】：

我希望这是可能的，但根据我正在使用的内容（SharePoint 的 OOTB Seattle.master），我不能将所有内容都包起来。我必须考虑我的 bodycontent 容器中的元素超出父宽度。

【解决方案2】：

编辑

//这会得到指定元素的实际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_;

}

示例（无边框）：

DEMO

var element = document.getElementById('bodyContent');

width = getActualWH(element).aW;
height = getActualWH(element).aH;

示例（带边框）：

DEMO

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（如果您打算支持它）

【讨论】：

bodyContent 中的元素是动态生成的，因此无法在启动时指定 footerContent 的宽度。现在最小宽度是可行的，但前提是我可以获得 bodyContent 的实际宽度。
@StoicDeveloper，看看我编辑的答案，如果它对你有用，请告诉我。
没有。您的结果是 600 像素，而不是基于其内部内容的 1000 像素。因此，如果我将页脚设置为 _width，当用户向右滚动时，我的页脚旁边将有 400 像素的空白。
那很好。在简单的布局上，这将起作用。我没有简单的布局。查看我的更新。
你知道，我真的相信你的概念会失败。但该死的我印象深刻。当您获得边框宽度时，我不得不为 isNaN() 设置条件，但这一切都有效，但我最终会遇到一些未知的问题。感谢所有的帮助，并坚持到最后。