js 获取元素的具体样式信息getcss(实例讲解)

JS 获取元素具体样式信息

在开发网页的过程中，我们通常需要获取元素的具体样式信息。JS 提供了一些 API 用于获取元素的样式信息。本篇攻略将详细讲解如何使用 JS 获取元素的具体样式信息的方法。

getComputedStyle()

getComputedStyle() 方法是获取元素的计算后样式的属性值，包括它的样式表层叠和任何显式的设置，返回一个 CSSStyleDeclaration 对象。它既可以对行内元素起作用，也可以对嵌入和外部样式表中的元素起作用。

语法：

window.getComputedStyle(element[, pseudoElt]);

参数说明：

1. element：要定位的元素。
2. pseudoElt（可选）：伪元素的名称。

示例1：获取元素的宽度和高度

<div id="box" style="width:200px;height:100px;background-color:#f00"></div>

const box = document.getElementById('box');
const style = window.getComputedStyle(box);
console.log(style.width);   // "200px"
console.log(style.height);  // "100px"

示例2：获取元素的颜色

<p id="text" style="color:rgb(255, 0, 0)">Hello World!</p>

const text = document.getElementById('text');
const style = window.getComputedStyle(text);
console.log(style.color);   // "rgb(255, 0, 0)"

getBoundingClientRect()

getBoundingClientRect() 方法可以用来获取元素的位置及尺寸信息。该方法返回一个 DOMRect 对象，包含了该元素的位置和尺寸信息。

语法：

element.getBoundingClientRect()

示例3：获取元素的位置信息

<div id="box" style="position:absolute;left:100px;top:50px;width:200px;height:100px;background-color:#f00"></div>

const box = document.getElementById('box');
const rect = box.getBoundingClientRect();
console.log(rect.left);   // 100
console.log(rect.top);    // 50

以上就是 JS 获取元素的具体样式信息的方法，使用起来非常简单。