在一个非常困惑的页面上，我有一个 div，我正在尝试找到一种方法来计算 div 中不的所有元素的(总)高度.
无论 div 的位置、大小和内容如何，我都需要计算此值。
我已经尝试过offsetHeight , clientHeight ，和window.getComputedStyle.getPropertyValue('height')我发现 offsetHeight 提供了最可靠的结果(据我所知，仅缺少边距)。
我尝试采用非动态方式来计算所有其他元素的高度，但误差幅度超过 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 >
这是总体布局，我需要计算页面上剩余的高度减去 #body_div 的高度。所有内容的高度、填充、边框和边距都是未知的。
最佳答案
从迄今为止这个问题的情绪来看，我发布此内容的风险是立即遭到否决投票攻击。
我试图整理自从这个问题发布以来我学到的一些知识。我根据一些假设编写了一段代码，如果假设不正确，请随时纠正我，我将尝试更新代码。
- 纯 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");
});
关于javascript - 计算页面上不在此元素中的其他元素的(总)高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33143763/