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

在非常凌乱的页面上，我有一个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

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

回答

相关问题