个人中心
gpt4 book ai didi

javascript - 计算页面上不在此元素中的其他元素的(总)高度

转载 作者：行者123 更新时间：2023-11-30 09:57:58 25 4
gpt4 key购买 nike

在一个非常困惑的页面上，我有一个 div，我试图找到一种方法来计算我的 div 中不的所有元素的(总)高度.

无论 div 的位置、大小和内容如何，​​我都需要计算它。我试过offsetHeight , clientHeight , 和 window.getComputedStyle.getPropertyValue('height')而且我发现 offsetHeight 提供了最可靠的结果(afaik 只缺少边距)。

我试图用一种非动态的方式来计算所有其他元素的高度，但我的误差幅度超过 120 像素(我使用 <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/

25 4 0
文章推荐： javascript - AngularJs promise 服务
文章推荐： java - IE 8 中不一致的 GWT 行为
文章推荐： javascript - 如何设置带有单选图标后缀文本的单选按钮列表？
文章推荐： javascript - 将具有给定类名的所有元素的 id 存储到数组中
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com