zl程序教程

您现在的位置是:首页 >  前端

当前栏目

前端样式获取

前端 获取 样式
2023-09-11 14:19:18 时间

简介

一般我们有两种方式来获取前端的样式

第一种

  • 获取的到元素,然后读取元素的style属性
  • 这里获取的都是内敛标签上面的样式,在css样式表上面的是获取不到的

第二种

  • 通过getComputedStyle来获取元素最终展示的样式
  • 他可以获取多个属性

第三种

第三种只获取位置

  • 使用getBoundingClientRect来进行获取

例子

<body>
    <div id="box" style="width: 200px; height:200px;">

    </div>
    <style>
        #box{
            background-color: red;
        }
    </style>
    <script>
        const box = document.getElementById("box")
        // 第一种方式
        console.log(box.style);
        // 第二种方式
        console.log(getComputedStyle(box));
    </script>
</body>

我们看他们的打印
在这里插入图片描述
他们打印的对象是相同的
box.style的打印

在这里插入图片描述
在属性是数字的,就表示能获取到的属性,他只有两个就是标签上的属性

getComputedStyle的打印

在这里插入图片描述
我们发现他有很多,也就是css的属性都能获取

getBoundingClientRect的打印

他获取的是DOM的一个对象
在这里插入图片描述
他是没有单位的,值获取大小和位置的信息

注意

我们获取到的位置信息他都是有单位的
在这里插入图片描述