前端样式获取

简介

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

第一种

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

注意

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

相关阅读:
智己让上汽的高端梦第一次落地
ElasticSearch DSL与java API示例
【语音识别】动态时间规整算法（RTW）语音识别系统【含GUI Matlab源码 341期】
java ssm勤工助学岗位管理系统
ubantu搭建cdh6(自己留的草稿版本）
static成员，代码块，内部类
网络安全（黑客）自学
Chat Towards Data Science｜如何用个人数据知识库构建 RAG 聊天机器人？
如何选择高效率的在线分板机主轴？
DiffusionDet：第一个用于物体检测的扩散模型（DiffusionDet: Diffusion Model for Object Detection）

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