前端样式获取

简介

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

第一种

获取的到元素，然后读取元素的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的一个对象
在这里插入图片描述
他是没有单位的，值获取大小和位置的信息

注意

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

相关阅读:
ps神经网络滤镜安装包,ps神经网络滤镜用不了
vue中使用MINIO将文件上传到指定的bucket库中（vue2和vue3）
小程序如何设置自取模式下的服务方式
Java Stream流详解
【Game Of AutoTest】5、游戏自动化测试的价值
SpringMVC的文件上传&文件下载&多文件上传---详细介绍
一篇文章掌握C++操作Access数据库
调试技巧（课件图解）
【MySQL】左连接右连接内连接与Hash连接、子查询原理与实战（MySQL专栏启动）
大一学生《Web编程基础》期末网页制作 HTML+CSS+JavaScript 网页设计实例企业网站制作

原文地址：https://blog.csdn.net/youhebuke225/article/details/127006893