前端样式获取

简介

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

第一种

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

注意

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

相关阅读:
C++ | Leetcode C++题解之第91题解码方法
4.随机变量
JavaScript学习笔记
基于springboot+vue社区疫情防控系统
Android recycleView或者viewpage横向或者垂直滑动(抖音)
摩天大楼记录
信息安全结业复习题（选择 + 填空 + 简答 + 计算 + 设计）含历年考题
关于类之间赋值时生成零时对象并调用析构函数的时机
容联七陌携手岚时科技，解决医美机构回访3大痛点
再谈回声消除测评丨Dev for Dev 专栏

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