獲取元素的實際寬度？

我有一個圖像位於右側的頁腳。以下是所述頁腳的抽象樣本。獲取元素的實際寬度？

問題是，無論窗口頁面變得太寬而水平滾動變爲活動狀態，我的頁腳寬度仍然依賴於主體寬度而不是內容的實際寬度。

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

來源

2014-04-22 Stoic Developer

編輯

//這將讓指定的元素的實際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（如果你打算支持它）

來源

2014-04-22 17:54:42

bodyContent中的元素是動態生成的，因此在啓動時指定footerContent的寬度是不可能的。現在最小寬度將是可行的，但只有當我可以得到bodyContent的實際寬度。 –

@StoicDeveloper，看到我編輯的答案，並讓我知道它是否適合你。 –

不會。您的結果會獲得600px，而不是基於其內容的1000px。所以，如果我將頁腳設置爲_width，那麼當用戶向右滾動時，頁腳旁邊會有400px的空白。 –

你可以把父母的包裝與寬度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>

來源

2014-04-22 18:00:11

我希望這是可能的，但根據我的工作（SharePoint的OOTB Seattle.master），我不能將所有東西都包裝起來。我必須考慮我的bodycontent容器中的元素突破父寬度。 –

獲取元素的實際寬度？

回答

相關問題