JS的 DOM 尺寸与位置属性

在 JavaScript 开发中,操作 DOM 元素的尺寸和位置是常见的任务,尤其是在实现动画、布局调整或响应式设计时。本文将全面解析 JavaScript 中与 DOM 尺寸和位置相关的属性,帮助你更好地理解和使用它们。

一、DOM 对象相关尺寸和位置属性

DOM 元素的尺寸和位置属性可以分为只读属性可读可写属性。这些属性在不同的场景下有着不同的用途。

只读属性

只读属性是 DOM 节点的固有属性,只能通过 JavaScript 获取,不能通过 JavaScript 设置。这些属性返回的值通常是不带单位的数字。

1. clientWidthclientHeight

clientWidthclientHeight 属性表示元素的可视部分宽度和高度,即 padding + content。它们不包括边框、滚动条和外边距。

html 复制代码
<div id="container" class="container"></div>
css 复制代码
.container {
  width: 200px;
  height: 200px;
  background-color: red;
  border: 1px solid;
  overflow: auto;
  padding: 10px;
  margin: 20px;
}
javascript 复制代码
var container = document.getElementById("container");
console.log("clientWidth:", container.clientWidth); // 220
console.log("clientHeight:", container.clientHeight); // 220

2. offsetWidthoffsetHeight

offsetWidthoffsetHeight 属性表示元素的 border + padding + content 的宽度和高度。它们包括边框和内边距,但不包括外边距。

javascript 复制代码
var container = document.getElementById("container");
console.log("offsetWidth:", container.offsetWidth); // 222
console.log("offsetHeight:", container.offsetHeight); // 222

3. clientTopclientLeft

clientTopclientLeft 属性表示元素的边框宽度。它们通常用于计算元素的实际位置。

javascript 复制代码
var container = document.getElementById("container");
console.log("clientTop:", container.clientTop); // 1
console.log("clientLeft:", container.clientLeft); // 1

4. offsetLeftoffsetTop

offsetLeftoffsetTop 属性表示元素相对于其 offsetParent 的左上角的距离。offsetParent 是元素的最近的定位祖先元素,如果没有定位祖先,则为 body

html 复制代码
<div id="container" class="container">
  <div id="item" class="item"></div>
</div>
css 复制代码
.container {
  width: 200px;
  height: 200px;
  background-color: red;
  border: 1px solid;
  overflow: auto;
  padding: 10px;
  margin: 20px;
  position: relative;
}
.item {
  width: 50px;
  height: 50px;
  background-color: blue;
  position: absolute;
  left: 100px;
  top: 100px;
}
javascript 复制代码
var container = document.getElementById("container");
var item = document.getElementById("item");
console.log(item.offsetParent); // container 盒子 dom 对象
console.log(item.offsetLeft); // 100
console.log(item.offsetTop); // 100

5. scrollHeightscrollWidth

scrollHeightscrollWidth 属性表示元素内部内容的实际宽度和高度。如果内容没有超出元素的可视区域,则这两个属性的值与 clientWidthclientHeight 相同。

html 复制代码
<div id="container" class="container">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla repellat porro atque culpa rem sunt sed! Voluptates vel incidunt accusamus reiciendis aut, adipisci ut. Hic, impedit officia.Quis, animi beatae. Facere dolorum quasi laborum, rem facilis illum necessitatibus sint doloribus beatae exercitationem sapiente! Quod vel cupiditate quam libero, delectus natus.</div>
javascript 复制代码
var container = document.getElementById("container");
console.log("scrollWidth:", container.scrollWidth); // 220
console.log("scrollHeight", container.scrollHeight); // 372

可读可写属性

可读可写属性不仅可以被 JavaScript 获取,还可以被 JavaScript 设置。

1. scrollTopscrollLeft

scrollTopscrollLeft 属性表示元素被卷起的高度和宽度。它们通常用于实现滚动效果。

html 复制代码
<div id="container" class="container">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla repellat porro atque culpa rem sunt sed! Voluptates vel incidunt accusamus reiciendis aut, adipisci ut. Hic, impedit officia.Quis, animi beatae. Facere dolorum quasi laborum, rem facilis illum necessitatibus sint doloribus beatae exercitationem sapiente! Quod vel cupiditate quam libero, delectus natus.</div>
javascript 复制代码
var container = document.getElementById("container");
container.onscroll = function () {
  console.log("scrollTop:", container.scrollTop);
  console.log("scrollLeft", container.scrollLeft);
}

2. domObj.style.xxx

domObj.style.xxx 属性用于获取或设置 DOM 元素的行内样式。需要注意的是,这种方式只能获取行内样式,而不能获取最终计算好的样式。如果需要获取计算好的样式,可以使用 getComputedStyle

javascript 复制代码
var container = document.getElementById("container");
console.log(container.style.width); // 获取行内样式
container.style.width = "300px"; // 设置行内样式

二、Event 对象相关尺寸和位置属性

在处理事件时,event 对象也提供了许多与尺寸和位置相关的属性。这些属性在实现交互效果时非常有用。

1. clientXclientY

clientXclientY 属性表示鼠标点击位置相对于浏览器可视区的坐标。

html 复制代码
<div id="container" class="container"></div>
javascript 复制代码
var container = document.getElementById("container");
container.onclick = function (ev) {
  var evt = ev || event;
  console.log("clientX:", evt.clientX);
  console.log("clientY:", evt.clientY);
}

2. screenXscreenY

screenXscreenY 属性表示鼠标点击位置相对于屏幕的坐标。

javascript 复制代码
var container = document.getElementById("container");
container.onclick = function (ev) {
  var evt = ev || event;
  console.log("screenX:", evt.screenX);
  console.log("screenY:", evt.screenY);
}

3. offsetXoffsetY

offsetXoffsetY 属性表示鼠标点击位置相对于事件源(即触发事件的 DOM 元素)的坐标。

javascript 复制代码
var container = document.getElementById("container");
container.onclick = function (ev) {
  var evt = ev || event;
  console.log("offsetX:", evt.offsetX);
  console.log("offsetY:", evt.offsetY);
}

4. pageXpageY

pageXpageY 属性表示鼠标点击位置相对于页面的坐标。当页面有滚动条时,pageXpageY 会考虑滚动的距离。

javascript 复制代码
var container = document.getElementById("container");
container.onclick = function (ev) {
  var evt = ev || event;
  console.log("pageX:", evt.pageX);
  console.log("pageY:", evt.pageY);
}
相关推荐
陈不知代码13 分钟前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记14 分钟前
sass中@mixin与 @include
前端·sass
陈琦鹏21 分钟前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数1 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante1 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam2 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8502 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
誰能久伴不乏2 小时前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
涔溪3 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾3 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite