前端知识点

配色方案

本页目录

获取元素样式 ​

分类 ​

主要有以下四种方式：

方法准确属于说明
dom.style否DOM只能获取内联样式的属性
dom.currentStyle是IEIE 私有属性，不要使用
window.getComputedStyle(dom)是window获取计算后的所有样式属性
dom.getBoundingClientRect()是DOM获取准确的 dom 位置与宽高

1. dom.style ​

其只能获取元素内联写法的样式，所以很少会用其获取样式。
一般用来对 dom 设置样式，例如：

JS
const dom = document.querySelector('body');
dom.style.color = 'red';
const dom = document.querySelector('body');
dom.style.color = 'red';

2. window.getComputedStyle(dom, [pseudoElement]) ​

它是 window 下的一个方法，不是 dom 下的，第二个参数支持伪元素；它能获取渲染后的元素所有真实样式信息对象。
注意：如果使用对象的 . 操作符获取属性时，需要使用驼峰写法。示例如下：

JS
const dom = document.querySelector('body');
window.getComputedStyle(dom, '::after');    // 获取伪元素

window.getComputedStyle(dom).fontSize;      // 驼峰写法 16px
window.getComputedStyle(dom)['font-size'];  // 属性写法 16px
const dom = document.querySelector('body');
window.getComputedStyle(dom, '::after');    // 获取伪元素

window.getComputedStyle(dom).fontSize;      // 驼峰写法 16px
window.getComputedStyle(dom)['font-size'];  // 属性写法 16px

3. dom.getBoundingClientRect() ​

获取元素的宽高，以及在视口中的位置信息，一般用于涉及位置计算时，如图片懒加载，在滚动时获取该元素距离视口距离。

JS
const dom = document.querySelector('body');
dom.getBoundingClientRect();
dom.getBoundingClientRect().width;  // 1000 注意，它是没有单位的 number 类型
const dom = document.querySelector('body');
dom.getBoundingClientRect();
dom.getBoundingClientRect().width;  // 1000 注意，它是没有单位的 number 类型
Js
// 返回结果集示例，它是一个 DOMRect 对象，它们都是没有单位的数值
{
    "x": 0,
    "y": -334,
    "width": 1213,
    "height": 1423,
    "top": -334,
    "right": 1213,
    "bottom": 1089,
    "left": 0
}
// 返回结果集示例，它是一个 DOMRect 对象，它们都是没有单位的数值
{
    "x": 0,
    "y": -334,
    "width": 1213,
    "height": 1423,
    "top": -334,
    "right": 1213,
    "bottom": 1089,
    "left": 0
}