獲取元素的實際寬度？

Question

我有一個頁腳，其圖像位於右側。 下面是該頁腳的抽象示例。

問題是，每當頁面變得對於窗口而言太寬並且激活水平滾動時，我的頁腳的寬度將繼續依賴於正文的寬度，而不是內容的實際寬度。

<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應用於此，以便將頁腳的寬度設置為網頁的實際寬度？ 我檢查了文檔，窗口和屏幕的寬度/寬度； 但是每個頁面都無法處理頁面的溢出大小。

Answer 1

您可以將寬度為ilke的父包裝器放置如下：

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>

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

獲取元素的實際寬度？

問題描述

2 個解決方案

解決方案1
1 2014-04-22 18:00:11

解決方案2
0 已采納 2014-04-22 17:54:42

獲取元素的實際寬度？

問題描述

2 個解決方案

解決方案1 1 2014-04-22 18:00:11

解決方案2 0 已采納 2014-04-22 17:54:42

解決方案1
1 2014-04-22 18:00:11

解決方案2
0 已采納 2014-04-22 17:54:42