JS中位置与大小的获取方法-js教程-PHP中文网

首页

web前端

js教程

JS中位置与大小的获取方法

高洛峰

Dec 06, 2016 am 10:05 AM

scrollHeight,clientHeight,offsetHeight的区别

说明：

scrollHeight：DOM元素的实际内容的高度，不包border的高度，会随DOM元素中内容的增加(超过可视区后)而变大。

clientHeight：DOM元素内容可视区的高度，不包含滚动条和边框的高度。

offsetHeight：DOM元素整体的高度，包括滚动条和边框。

当滚动条不出现的时候

这时候DOM元素中没有内容或者内容不超过可视区
scrollWidth=clientWidth，两者皆为可视区的宽度。
scrollHeight=clientHeight,两者皆为可视区的高度。
offsetWidth、offsetHeight为DOM元素的整体宽度和高度。

当滚动条出现的时候

这时候DOM元素中没有内容或者内容不超过可视区
scrollWidth>clientWidth
scrollHeight>clientHeight
scrollWidth和scrollHeight分别是实际内容的宽度和高度
clientWidth和clientHeight分别是内容可视区的宽度和高度
offsetWidth、offsetHeight为DOM元素的整体宽度和高度。

Demo

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>正确理解和运用与尺寸大小相关的DOM属性</title>
    <style type="text/css">
    html,body {margin: 0;}
    body {padding: 100px;}
  #box {
    overflow: scroll;
    width: 400px;
    height: 300px;
    padding: 20px;
    border: 10px solid #000;
    margin: 0 auto;
    box-sizing: content-box;
    /*
    box-sizing:content-box表示元素的宽度与高度不包括内边距与边框的宽度和高度
    box-sizing:border-box表示元素的宽度与高度包括内边距与边框的宽度和高度
     */
  }
  #box2 {
    border: 1px solid #000;
 
  }
    </style>
  </head>
  <body>
  <div id="box">
    <div id="box2">谷歌浏览器测试结果</div>
  </div>
  <script type="text/javascript">
  //offsetWidth ，offsetHeight对应的是盒模型的宽度和高度
  //scrollWidth，与scrollHeight对应的是滚动区域的宽度和高度，但是不包含滚动条的宽度！滚动区域由padding和content组成。
  //clientWidth，clientHeight对应的是盒模型除去边框后的那部分区域的宽度和高度，不包含滚动条的宽度
    var boxE=document.getElementById("box");
    var box=document.getElementById("box2");
    //对于scrollWidth没有发生横向的溢出，同时由于overflow: scroll的原因，scrollWidth 跟clientWidth相同，但是没有包含滚动条的宽度
    console.log(&#39;scrollWidth:&#39; + boxE.scrollWidth);//423
    console.log(&#39;scrollHeight:&#39; + boxE.scrollHeight);//672
 
    //clientWidth与clientHeight分别等于offsetWidth与offsetHeight减掉相应边框（上下共20px，左右共20px）和滚动条宽度后的值（chrome下滚动条宽度为17px）；
    console.log(&#39;clientWidth:&#39; + boxE.clientWidth);//423=460-20-17
    console.log(&#39;clientHeight:&#39; + boxE.clientHeight);//323=360-20-17
 
    //offsetWidth与offsetHeight与chrome审查元素看到的尺寸完全一致
    console.log(&#39;offsetWidth :&#39; + boxE.offsetWidth);//460=width+padding+border
    console.log(&#39;offsetHeight:&#39; + boxE.offsetHeight);//360=height+padding+border
  </script>
  </body>
</html>

登录后复制

利用JS获取DOM元素的大小

获取html根元素：document.documentElement
获取body元素：document.body

获取页面可视区的宽度和高度，不包括滚动条
IE、FF、chrome中采用：
使用document.documentElement.clientWidth和document.documentElement.clientHeight
注意：ie6标准模式下，上述方式可以

在混杂模式下：
ie6使用document.body.clientWidth和document.body.clientHeight
注意： window.innerWidth/Height是包括滚动条的宽度和高度的。这也与document.documentElement.clientWidth/Height的区别所在。
所以在使用的时候注意兼容写法：

Demo

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>页面视口宽高</title>
</head>
<body>
  <script type="text/javascript">
  //标准模式
  var w=document.documentElement.clientWidth;
  var h=document.documentElement.clientHeight;
  console.log(&#39;w宽：&#39;+w+&#39;---&#39;+&#39;h高：&#39;+h);
  //混杂模式
  var width=document.body.clientWidth;
  var height=document.body.clientHeight;
  //兼容写法
  var ww=document.documentElement.clientWidth||document.body.clientWidth;
  var hh=document.documentElement.clientHeight||document.body.clientHeight;
  console.log(&#39;ww宽：&#39;+ww+&#39;---&#39;+&#39;hh高：&#39;+hh);
  </script>
</body>
</html>

登录后复制

获取一个普通html元素的大小

docE.offsetWidth;
docE.offsetHeight;

获取滚动条滚动高度（兼容性处理）

var oTop=document.documentElement.scrollTop||document.body.scrollTop;

offsetWidth与offsetHeight

这两个属性表示元素的可视区的宽度和高度，这个值包括元素的边框(border)，水平padding，垂直滚动条宽度或者高度，元素本身宽度或者高度等。

offsetWidth与offsetHeight这两个属性的值只与该元素有关，与周围元素（父级和子级元素无关）。
offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right)

offsetHeight=(border-width)*2+(padding-top)+(height)+(padding-bottom)

offsetLeft与offsetTop

offsetLeft与offsetTop这两个属性值与offsetParent有关。

offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(即body元素)的引用。

两条规则：

如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。

如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。

offsetLeft：对象元素边界的左上角顶点相对于offsetParent的左上角顶点的水平偏移量；

offsetTop：对象元素边界的左上角顶点相对于offsetParent的左上角顶点的垂直偏移量；

offsetLeft=(offsetParent的padding-left)+(中间元素的offsetWidth)+(当前元素的margin-left)

offsetTop=(offsetParent的padding-top)+(中间元素的offsetHeight)+(当前元素的margin-top)

当offsetParent为body时情况比较特殊:

在IE8/9/10及Chrome中：
offsetLeft = (body的margin-left)+(body的border-width)+(body的padding-left)+(当前元素的margin-left)。

在FireFox中：
offsetLeft = (body的margin-left)+(body的padding-left)+(当前元素的margin-left)

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7532

CakePHP 教程

1379

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

如何使用JS和百度地图实现地图平移功能 Nov 21, 2023 am 10:00 AM

如何使用JS和百度地图实现地图平移功能百度地图是一款广泛使用的地图服务平台，在Web开发中经常用于展示地理信息、定位等功能。本文将介绍如何使用JS和百度地图API实现地图平移功能，并提供具体的代码示例。一、准备工作使用百度地图API前，首先需要在百度地图开放平台（http://lbsyun.baidu.com/）上申请一个开发者账号，并创建一个应用。创建完成

推荐：优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计

股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤 Dec 17, 2023 pm 06:55 PM

股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤，需要具体代码示例随着互联网和科技的快速发展，股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环，其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息，帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的

如何使用PHP和JS创建股票蜡烛图 Dec 17, 2023 am 08:08 AM

如何使用PHP和JS创建股票蜡烛图股票蜡烛图是股票市场中常见的一种技术分析图形，通过绘制股票的开盘价、收盘价、最高价和最低价等数据，帮助投资者更直观地了解股票的价格波动情况。本文将教你如何使用PHP和JS创建股票蜡烛图，并附上具体的代码示例。一、准备工作在开始之前，我们需要准备以下环境：1.一台运行PHP的服务器2.一个支持HTML5和Canvas的浏览器3

如何使用JS和百度地图实现地图热力图功能 Nov 21, 2023 am 09:33 AM

如何使用JS和百度地图实现地图热力图功能简介：随着互联网和移动设备的迅速发展，地图成为了一种普遍的应用场景。而热力图作为一种可视化的展示方式，能够帮助我们更直观地了解数据的分布情况。本文将介绍如何使用JS和百度地图API来实现地图热力图的功能，并提供具体的代码示例。准备工作：在开始之前，你需要准备以下事项：一个百度开发者账号，并创建一个应用，获取到相应的AP

如何使用JS和百度地图实现地图点击事件处理功能 Nov 21, 2023 am 11:11 AM

如何使用JS和百度地图实现地图点击事件处理功能概述：在Web开发中，经常需要使用地图功能来展示地理位置和地理信息。而地图上的点击事件处理是地图功能中常用且重要的一部分。本文将介绍如何使用JS和百度地图API来实现地图的点击事件处理功能，并给出具体的代码示例。步骤：导入百度地图的API文件首先，要在HTML文件中导入百度地图API的文件，可以通过以下代码实现：

PHP与JS开发技巧：掌握绘制股票蜡烛图的方法 Dec 18, 2023 pm 03:39 PM

随着互联网金融的迅速发展，股票投资已经成为了越来越多人的选择。而在股票交易中，蜡烛图是一种常用的技术分析方法，它能够显示股票价格的变化趋势，帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧，带领读者了解如何绘制股票蜡烛图，并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前，我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人

如何使用JS和百度地图实现地图多边形绘制功能 Nov 21, 2023 am 10:53 AM

如何使用JS和百度地图实现地图多边形绘制功能在现代网页开发中，地图应用已经成为常见的功能之一。而地图上绘制多边形，可以帮助我们将特定区域进行标记，方便用户进行查看和分析。本文将介绍如何使用JS和百度地图API实现地图多边形绘制功能，并提供具体的代码示例。首先，我们需要引入百度地图API。可以利用以下代码在HTML文件中导入百度地图API的JavaScript

See all articles

JS中位置与大小的获取方法

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题