Javascript 获取元素的实际宽度？_Javascript_Html_Css_Scroll

Javascript 获取元素的实际宽度？

javascript html css scroll

Javascript 获取元素的实际宽度？,javascript,html,css,scroll,Javascript,Html,Css,Scroll,我有一个页脚，右边有一个图像。下面是上述页脚的一个抽象示例问题是，每当页面对于窗口来说太宽，并且水平滚动处于活动状态时，我的页脚宽度将继续取决于正文的宽度，而不是内容的实际宽度 <body> <div id='bodyContent' style="height:600px; width:600px;"> <div style="width:200px; height: 400px; float:left; background-color:pink "&

我有一个页脚，右边有一个图像。下面是上述页脚的一个抽象示例

问题是，每当页面对于窗口来说太宽，并且水平滚动处于活动状态时，我的页脚宽度将继续取决于正文的宽度，而不是内容的实际宽度

<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可以应用于此，以便我可以将页脚宽度设置为网页的实际宽度？我已检查文档、窗口和屏幕宽度/外径；但是每一个都无法处理页面的溢出大小。

EDIT

//这将获得指定元素的实际

宽度

或

高度

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

//如果您希望包含边框宽度，则可以使用我以前的一个函数->

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

}

示例（无边框）：

示例（带边框）：

这段代码也适用于IE8（如果您打算支持它）

您可以放置一个宽度如下的父包装：

我希望这是可能的，但基于我的工作（SharePoint的OOTB settle.master），我不能把一切都总结起来。我必须考虑bodycontent容器中超出父宽度的元素。bodycontent中的元素是动态生成的，因此无法在启动时指定footerContent的宽度。现在，最小宽度是可行的，但前提是我能得到bodyContent的实际宽度。@StoicDeveloper，请查看我编辑的答案，并告诉我它是否适用于您。否。您的结果是获得600px，而不是基于其内部内容的1000px。因此，如果我将页脚设置为_宽度，当用户向右滚动时，页脚旁边会有400px的空白。这很好。在一个简单的布局上，这是可行的。我没有一个简单的布局。看看我的最新消息。你知道，我真的相信你的想法会失败。但该死的，我印象深刻。当你得到边界宽度时，我不得不为isNaN（）设置条件，但是除了我这边的一些未知的小问题，这一切都有效。谢谢你的帮助，坚持到最后。

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;

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