x13*_*x13 2 html javascript css
在一个非常凌乱的页面上，我有一个 div，我试图找到一种方法来计算不在我的 div 中的所有元素的（总）高度。
无论 div 的位置、大小和内容如何，我都需要计算它。我曾尝试offsetHeight，clientHeight和window.getComputedStyle.getPropertyValue('height')我已经发现的offsetHeight提供了最可靠的结果（据我所知只有保证金缺失）。
我试图用一种非动态的方式来计算所有其他元素的高度，但我的误差幅度超过了 120 像素（我使用<body>的高度作为目标）。
编辑：
我知道如何获得一个元素的渲染高度，我现在想要渲染高度关闭除 one 之外的所有元素。
代码：
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. 所有东西的高度、内边距、边框和边距都是未知的。
到目前为止，根据这个问题的情绪判断，我发布此内容的风险可能会立即遭到反对。
自从发布这个问题以来，我试图整理一些我学到的知识。我根据一些假设生成了一段代码，如果假设不正确，请随时纠正我，我将尝试更新代码。
div我们想要排除的难以捉摸的元素）的解决方案。body。这是我到目前为止的代码：
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");
});