JS 中关于DOM的查漏补缺获取dom元素的css样式 window.getComputedStyle的使用获取dom

很遗憾，到今天这个程度才发现自己在这个方面还有这么大的漏洞。

获取dom元素的css样式

昨天看代码遇见了这样一个方法 window.getComputedStyle(dom元素,null).width来获取元素的width，这是第一次见getComputedStyle方法，上网搜了一下用处，很羞耻，当时我还纳闷，为什么不用dom.style.width来获取width呢，我就在上面console.log输出了一下dom.style.width发现竟然是空字符串（不要见怪，纯自学，学习路径出的问题）。

后来发现，dom.style.width只能获取和设置dom元素的行内样式，对于内部样式表<style>和外部样式表<link>里的样式获取不到。对于内部样式和外部样式，js提供了另外的的获取方式，可以通过currentStyle(IE浏览器)，getComputedStyle(Firefox,opera,safari,chrome浏览器)的方式获取。

window.getComputedStyle的使用

语法：window.getComputedStyle(element, [pseudoElt]);

element是dom元素，pseudoElt是dom的伪元素。是只读属性。

示例：

没有伪元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a{
            height: 300px;
            padding: 20px;
            border: 10px solid red;
            margin: 20px;
            position: relative;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="a" style="width: 200px;"></div>
    <script>
        let a = document.querySelector('.a')
        console.log(window.getComputedStyle(a,null)); 
        // 能获取到dom元素a的所有样式,包括行内样式
    </script>
</body>
</html>

有伪元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a{
            height: 300px;
            padding: 20px;
            border: 10px solid red;
            margin: 20px;
        }
        .a::before{
            content: '虚伪';
            color: blue;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="a" style="width: 200px;"></div>
    <script>
        let a = document.querySelector('.a')
        console.log(window.getComputedStyle(a,'::before')); 
        // 能获取到dom元素a的伪元素的所有样式
    </script>
</body>
</html>

很羞耻，现在才知道这个方法，大家还是不要看时间很短的教学视频，很粗略。

dom元素的属性

dom的属性，有时候会恍惚一下，该使用哪种方式获取某个属性呢，记录一下。

全局属性

全局属性是所有HTML元素共有的属性，它们可以用于所有的元素，即使属性可能对某些元素不起作用。

例如：class,id,style,data-，on事件名等等

更多全局属性

获取全局属性：

dom.className/classList

dom.id

dom.style.width/height/···

dom.dataset.属性名 可读可写

···

自定义属性

html上添加

<div class="a" name="zb"></div>

获取：dom.getAttribute('name')

设置：dom.setAttribute('name', 'zbzb')

js上添加

const dom = document.querySelector('.a')

设置: dom.name = 'zb'

获取：dom.name

为什么我还在写这些东西，太垃圾了我。