当前位置: 首页 > 知识库问答 >
问题:

什么是offsetHeight,clientHeight,scrollheight?

姜志
2023-03-14

想解释一下offsetheightclientheightscrollheightoffsetwidthclientwidthscrollwidth之间的区别吗?

在客户端工作之前,必须知道这个区别。否则,他们的生命中有一半的时间将花在修复UI上。

小提琴,或内联以下:

function whatis(propType) {
  var mainDiv = document.getElementById("MainDIV");
  if (window.sampleDiv == null) {
    var div = document.createElement("div");
    window.sampleDiv = div;
  }
  div = window.sampleDiv;
  var propTypeWidth = propType.toLowerCase() + "Width";
  var propTypeHeight = propType + "Height";

  var computedStyle = window.getComputedStyle(mainDiv, null);
  var borderLeftWidth = computedStyle.getPropertyValue("border-left-width");
  var borderTopWidth = computedStyle.getPropertyValue("border-top-width");

  div.style.position = "absolute";
  div.style.left = mainDiv.offsetLeft + Math.round(parseFloat((propType == "client") ? borderLeftWidth : 0)) + "px";
  div.style.top = mainDiv.offsetTop + Math.round(parseFloat((propType == "client") ? borderTopWidth : 0)) + "px";
  div.style.height = mainDiv[propTypeHeight] + "px";
  div.style.lineHeight = mainDiv[propTypeHeight] + "px";
  div.style.width = mainDiv[propTypeWidth] + "px";
  div.style.textAlign = "center";
  div.innerHTML = propTypeWidth + " X " + propTypeHeight + "( " +
    mainDiv[propTypeWidth] + " x " + mainDiv[propTypeHeight] + " )";



  div.style.background = "rgba(0,0,255,0.5)";
  document.body.appendChild(div);

}
document.getElementById("offset").onclick = function() {
  whatis('offset');
}
document.getElementById("client").onclick = function() {
  whatis('client');
}
document.getElementById("scroll").onclick = function() {
  whatis('scroll');
}
#MainDIV {
  border: 5px solid red;
}
<button id="offset">offsetHeight & offsetWidth</button>
<button id="client">clientHeight & clientWidth</button>
<button id="scroll">scrollHeight & scrollWidth</button>

<div id="MainDIV" style="margin:auto; height:200px; width:400px; overflow:auto;">
  <div style="height:400px; width:500px; overflow:hidden;">

  </div>
</div>

共有1个答案

华安民
2023-03-14

要知道区别,你必须了解盒子模型,但基本上:

ClientHeight:

返回元素的内部高度(以像素为单位),包括填充,但不包括水平滚动条高度、边框或边距

是元素内容(包括由于溢出而在屏幕上不可见的内容)的高度的度量

我会让它变得更简单:

考虑:

<element>                                     
    <!-- *content*: child nodes: -->        | content
    A child node as text node               | of
    <div id="another_child_node"></div>     | the
    ... and I am the 4th child node         | element
</element>                                    

offsetheight:可见内容和填充+边框+滚动条
文档上元素占用的高度。

 类似资料:
  • 本文向大家介绍js的各种位置,比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别?相关面试题,主要包含被问及js的各种位置,比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别?时的应答技巧和注

  • 问题内容: 什么是selenium? 当您打开Selenium的官方页面时,您首先读到的是“什么是Selenium?”中的“ Selenium automates browser”。部分。“selenium的哪个部分适合我?”部分 下面提供了Selenium WebDriver和Selenium IDE之间的选择。由此,我推断出Selenium是一组工具,并且该集合包括IDE,WebDriver

  • 硒是什么? 当你打开Selenium的官方页面,首先看到的是“什么是Selenium”中的“Selenium自动浏览器”。节。“硒的哪一部分对我合适?”下面提供了Selenium WebDriver和Selenium IDE之间的选择。由此,我推断Selenium是一个工具集合,该集合包括IDE、WebDriver API(语言绑定)、网格、Selenium独立服务器、浏览器驱动程序。一个人必须下

  • 本文向大家介绍什么是事务?什么是锁?相关面试题,主要包含被问及什么是事务?什么是锁?时的应答技巧和注意事项,需要的朋友参考一下 答:事务就是被绑定在一起作为一个逻辑工作单元的SQL语句分组,如果任何一个语句操作失败那么整个操作就被失败,以后操作就会回滚到操作前状态,或者是上有个节点。为了确保要么执行,要么不执行,就可以使用事务。要将有组语句作为事务考虑,就需要通过ACID测试,即原子性,一致性,隔

  • 我在这里读到 写入共享引用类型<代码> 理解<代码> 在另一个地方,我阅读了以下代码: 结构人中的a是什么 名称的含义是什么: 如果想避免使用

  • 我几天前听说了Docker的事,想过去看看。 但事实上,我不知道这个“容器”的用途是什么? 什么是容器? 它能取代一个专门用于开发的虚拟机吗? 简单地说,在公司中使用Docker的目的是什么?主要的优势?