本文主要是介绍JS中【style】、【getComputedStyle】、【getBoundingClientRect】详解和对比，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1. style 属性
style 属性用于直接访问和修改元素的内联样式。通过 JavaScript，可以动态更改元素的样式，但只能操作元素的内联样式，即通过 HTML 中的 style 属性定义的样式。
基本用法：
const element = document.getElementById("myElement");// 修改内联样式
element.style.color = "red"; // 改变文字颜色
element.style.backgroundColor = "blue"; // 改变背景颜色// 读取内联样式
console.log(element.style.color); // "red"
特点：
- 只能操作内联样式：
style属性仅适用于元素的内联样式。如果样式是通过外部 CSS 文件定义的，style属性无法获取这些值。 - CSS 属性名转换：当通过
style属性操作 CSS 时，需要将属性名从中划线格式（kebab-case）转换为驼峰命名格式（camelCase）。例如，background-color要写成backgroundColor。
注意事项：
- 如果通过外部样式表定义样式，使用
style属性无法读取这些样式。要获取元素的最终呈现样式，应使用getComputedStyle()。
2. getComputedStyle()
getComputedStyle() 方法用于获取元素的最终计算样式，即元素实际显示时所使用的所有样式值。这些样式包含了内联样式、外部样式表以及浏览器默认的样式。
基本用法：
const element = document.getElementById("myElement");
const computedStyle = window.getComputedStyle(element);console.log(computedStyle.color); // 获取最终应用的文字颜色
console.log(computedStyle.width); // 获取计算后的宽度（包括外部样式定义）
特点：
- 返回最终样式：
getComputedStyle()获取的是元素所有样式来源（内联、外部 CSS 等）合并后的最终样式，包括已经过浏览器计算的样式值。 - 返回绝对单位：与
style属性不同，getComputedStyle()返回的样式值通常是基于像素的绝对单位。例如，即使宽度是以百分比定义的，它返回的也是计算后的像素值。
示例：
#myElement {width: 50%;color: blue;
}
const element = document.getElementById("myElement");
const computedStyle = window.getComputedStyle(element);console.log(computedStyle.width); // 获取计算后的宽度，单位为像素
console.log(computedStyle.color); // "blue"
注意事项：
getComputedStyle()返回的是元素的 最终样式，不论这些样式是否来源于内联样式、外部样式表、还是默认浏览器样式。- 返回的值通常为只读，无法直接通过此对象修改样式。
3. getBoundingClientRect()
getBoundingClientRect() 方法返回元素相对于视口（viewport）的边界框信息。调用它会返回一个 DOMRect 对象，该对象包含元素的尺寸（宽度和高度）以及相对于视口的位置（top、left、right、bottom）。
基本用法：
const element = document.getElementById("myElement");
const rect = element.getBoundingClientRect();console.log(rect.top); // 元素顶部距离视口顶部的距离
console.log(rect.left); // 元素左边距离视口左边的距离
console.log(rect.width); // 元素的宽度
console.log(rect.height); // 元素的高度
console.log(rect.x); // 元素左上角的 x 坐标（等同于 rect.left）
console.log(rect.y); // 元素左上角的 y 坐标（等同于 rect.top）
DOMRect 对象的属性：
x: 元素的左上角相对于视口的水平坐标（等于rect.left）。y: 元素的左上角相对于视口的垂直坐标（等于rect.top）。top: 元素顶部距离视口顶部的距离（单位为像素）。left: 元素左边距离视口左边的距离（单位为像素）。right: 元素右边距离视口左边的距离（单位为像素）。bottom: 元素底部距离视口顶部的距离（单位为像素）。width: 元素的宽度（单位为像素）。height: 元素的高度（单位为像素）。
返回的单位：
所有这些属性的单位都是 像素（px），并且都是相对于视口的位置，而不是相对于整个文档。
高分辨率设备上的表现：
在高DPI设备（例如视网膜显示屏）上，getBoundingClientRect() 返回的值基于 CSS 像素，而不是设备物理像素。这意味着返回的尺寸不会因为设备像素比的不同而改变。
示例：
const element = document.getElementById("myElement");
const rect = element.getBoundingClientRect();console.log(rect.top); // 元素顶部相对于视口的距离，例如 150px
console.log(rect.left); // 元素左边相对于视口的距离，例如 50px
console.log(rect.width); // 元素的宽度，例如 200px
console.log(rect.height); // 元素的高度，例如 100px
实际应用：
- 布局计算：在动态布局中，
getBoundingClientRect()常用于获取元素的确切位置和大小，例如在拖放操作中。 - 可见性检测：可以通过
top和bottom属性，判断一个元素是否在视口内。 - 碰撞检测：结合多个元素的
DOMRect对象，可以检测它们是否发生重叠或碰撞。
总结
style属性用于访问和修改内联样式，只能操作通过 HTML 中的style属性定义的样式。getComputedStyle()获取元素的最终计算样式，返回的是所有来源（内联、外部、默认）的综合样式。getBoundingClientRect()返回元素相对于视口的位置和尺寸信息，包含x、y坐标以及top、left、right、bottom、width和height等属性，所有值的单位均为像素。
这三者各有用途，可以在 DOM 操作中互为补充，帮助开发者精确控制和获取元素的样式和布局信息。
这篇关于JS中【style】、【getComputedStyle】、【getBoundingClientRect】详解和对比的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
