計算頁面上其他元素的高度（不在此元素中）

在非常凌亂的頁面上，我有一個div，我試圖找到一種方法來計算所有元素的（總）高度不是在我的div。計算頁面上其他元素的高度（不在此元素中）

我需要這個計算，不管div的位置，大小和內容。我試過offsetHeight,clientHeight和window.getComputedStyle.getPropertyValue('height')，我發現offsetHeight提供了最可靠的結果（afaik僅缺少邊距）。

我試圖做一個非動態的方式來計算所有其他元素的高度，但我有一個超過120px的誤差（我使用<body>的高度作爲目標）。

編輯：

我知道如何讓一個元素的呈現高度，我現在想的呈現高度關，除了一個所有元素。

代碼：

var heights = { 'body' : { 'element': document.getElementsByTagName('body')[ 0 ], 'computed': window.getComputedStyle(document.getElementsByTagName('body')[ 0 ], null) }, 'header' : { 'element': document.getElementById('headertxtContainer'), 'computed': window.getComputedStyle(document.getElementById('headertxtContainer'), null) }, 'content': { 'element': document.getElementById('body_div'), 'computed': window.getComputedStyle(document.getElementById('body_div'), null) }, 'footer' : { 'element': document.getElementById('footer_copy_right'), 'computed': window.getComputedStyle(document.getElementById('footer_copy_right'), null) }, 'br' : [ { 'element': document.getElementById('swipe').children[ 0 ].children[ 1 ], 'computed': window.getComputedStyle(document.getElementById('swipe').children[ 0 ].children[ 1 ], null) }, { 'element': document.getElementById('swipe').children[ 0 ].children[ 3 ], 'computed': window.getComputedStyle(document.getElementById('swipe').children[ 0 ].children[ 3 ], null) }, { 'element': document.getElementById('swipe').children[ 0 ].children[ 4 ], 'computed': window.getComputedStyle(document.getElementById('swipe').children[ 0 ].children[ 4 ], null) }, { 'element': document.getElementById('swipe').children[ 0 ].children[ 5 ], 'computed': window.getComputedStyle(document.getElementById('swipe').children[ 0 ].children[ 5 ], null) } ] }; heights.body.clientHeight = heights.body.element.clientHeight; heights.header.clientHeight = heights.header.element.clientHeight; heights.content.clientHeight = heights.content.element.clientHeight; heights.footer.clientHeight = heights.footer.element.clientHeight; heights.br[ 0 ].clientHeight = heights.br[ 0 ].element.clientHeight; heights.br[ 1 ].clientHeight = heights.br[ 1 ].element.clientHeight; heights.br[ 2 ].clientHeight = heights.br[ 2 ].element.clientHeight; heights.br[ 3 ].clientHeight = heights.br[ 3 ].element.clientHeight; heights.body.offsetHeight = heights.body.element.offsetHeight; heights.header.offsetHeight = heights.header.element.offsetHeight; heights.content.offsetHeight = heights.content.element.offsetHeight; heights.footer.offsetHeight = heights.footer.element.offsetHeight; heights.br[ 0 ].offsetHeight = heights.br[ 0 ].element.offsetHeight; heights.br[ 1 ].offsetHeight = heights.br[ 1 ].element.offsetHeight; heights.br[ 2 ].offsetHeight = heights.br[ 2 ].element.offsetHeight; heights.br[ 3 ].offsetHeight = heights.br[ 3 ].element.offsetHeight; heights.body.height = heights.body.computed.getPropertyValue('height'); heights.header.height = heights.header.computed.getPropertyValue('height'); heights.content.height = heights.content.computed.getPropertyValue('height'); heights.footer.height = heights.footer.computed.getPropertyValue('height'); heights.br[ 0 ].height = heights.br[ 0 ].computed.getPropertyValue('height'); heights.br[ 1 ].height = heights.br[ 1 ].computed.getPropertyValue('height'); heights.br[ 2 ].height = heights.br[ 2 ].computed.getPropertyValue('height'); heights.br[ 3 ].height = heights.br[ 3 ].computed.getPropertyValue('height'); heights.body.lineheight = heights.body.computed.getPropertyValue('line-height'); heights.header.lineheight = heights.header.computed.getPropertyValue('line-height'); heights.content.lineheight = heights.content.computed.getPropertyValue('line-height'); heights.footer.lineheight = heights.footer.computed.getPropertyValue('line-height'); heights.br[ 0 ].lineheight = heights.br[ 0 ].computed.getPropertyValue('line-height'); heights.br[ 1 ].lineheight = heights.br[ 1 ].computed.getPropertyValue('line-height'); heights.br[ 2 ].lineheight = heights.br[ 2 ].computed.getPropertyValue('line-height'); heights.br[ 3 ].lineheight = heights.br[ 3 ].computed.getPropertyValue('line-height'); heights.body.margin = heights.body.computed.getPropertyValue('margin'); heights.header.margin = heights.header.computed.getPropertyValue('margin'); heights.content.margin = heights.content.computed.getPropertyValue('margin'); heights.footer.margin = heights.footer.computed.getPropertyValue('margin'); heights.br[ 0 ].margin = heights.br[ 0 ].computed.getPropertyValue('margin'); heights.br[ 1 ].margin = heights.br[ 1 ].computed.getPropertyValue('margin'); heights.br[ 2 ].margin = heights.br[ 2 ].computed.getPropertyValue('margin'); heights.br[ 3 ].margin = heights.br[ 3 ].computed.getPropertyValue('margin'); heights.body.padding = heights.body.computed.getPropertyValue('padding'); heights.header.padding = heights.header.computed.getPropertyValue('padding'); heights.content.padding = heights.content.computed.getPropertyValue('padding'); heights.footer.padding = heights.footer.computed.getPropertyValue('padding'); heights.br[ 0 ].padding = heights.br[ 0 ].computed.getPropertyValue('padding'); heights.br[ 1 ].padding = heights.br[ 1 ].computed.getPropertyValue('padding'); heights.br[ 2 ].padding = heights.br[ 2 ].computed.getPropertyValue('padding'); heights.br[ 3 ].padding = heights.br[ 3 ].computed.getPropertyValue('padding'); heights.body.border = heights.body.computed.getPropertyValue('border'); heights.header.border = heights.header.computed.getPropertyValue('border'); heights.content.border = heights.content.computed.getPropertyValue('border'); heights.footer.border = heights.footer.computed.getPropertyValue('border'); heights.br[ 0 ].border = heights.br[ 0 ].computed.getPropertyValue('border'); heights.br[ 1 ].border = heights.br[ 1 ].computed.getPropertyValue('border'); heights.br[ 2 ].border = heights.br[ 2 ].computed.getPropertyValue('border'); heights.br[ 3 ].border = heights.br[ 3 ].computed.getPropertyValue('border'); console.log(heights);

頁面佈局：

的頁面是非常，非常混亂，但我會嘗試鍵入某種佈局：

<body id="swipe" > <div> <div id="headertxtContainer"></div> <br> <div id="body_div"></div> <br> <br> <br> <div id="footer_copy_right"></div> </div> </body >

這是總的佈局，我需要計算頁面上的高度減去的高度。身高，填充，邊框和所有內容的邊距都是未知的。

來源

2015-10-15 x13

jQuery有做一些好的方法這個.innerHeight（）。outerHeight（）檢查文檔 – Luke

我應該要求你提供一個鏈接，但我不會使用Jquery，所以不要緊。我想*純CSS，JavaScript，HTML解決方案*（請參閱問題標籤，並注意'jquery'不在其中）。 – x13

不需要是我的朋友mardy！去找出如何計算一個元素的邊距和填充，然後... – Luke

我發佈這個與到目前爲止這個問題的情緒判斷的立即下來投票攻擊的風險。

我試着整理一些自從發佈這個問題以來已經找到的知識。我根據一些假設生成了一段代碼，如果假設不正確，請隨時糾正我，我會嘗試更新代碼。

純JavaScript解決方案
一個解決方案，不作任何頁面（比我們要排除的難以捉摸div或元素等）上的元素的假設。
計算頁面上所有元素的總高度。我已將此作爲的直接子代元素的body代碼。
計算包括任何填充和邊界的元素according to this answer。
最終高度應減去一個單一的元素（在OP的情況下，DIV）

這裏的高度是代碼我到目前爲止：

function calculateTotalHeightMinusElement(excludeElementClass) 
{ 
    // Get all child elements of the body tag 
    var bodyChildren = (document.getElementsByTagName('body')[0]).children; 

    var totalHeight = 0; 

    // Loop through the selected elements 
    for (var i = 0; i < bodyChildren.length; i++) { 

    // Add the height of this element 
    totalHeight = totalHeight + bodyChildren[i].offsetHeight; 
    } 

    // Get the height of the element we want to exclude 
    var excludedElementHeight = document.getElementsByClassName(excludeElementClass)[0].offsetHeight; 

    // Calculate height minus the excluded element 
    var finalHeight = totalHeight - excludedElementHeight; 

    // Display the final height in an alert 
    alert("Total height: " + finalHeight); 
} 

document.addEventListener("DOMContentLoaded", function(event) { 

    // Pass in the class name of the element you want to minus from the height calculation 
    calculateTotalHeightMinusElement("myDivClass"); 
});

來源

2015-10-15 10:10:26 Luke

非常感謝。對不起，如果我聽起來有點喜怒無常，我被困在這個多天。但你只是修好了，謝謝！祝您有美好的一天！ – x13

不用擔心我的朋友：o）。很高興幫助！ – Luke

計算頁面上其他元素的高度（不在此元素中）

回答

相關問題