js 获取当前dom元素的所有样式(getComputedStyle())，并且修改样式

最新推荐文章于 2024-06-01 00:30:00 发布

逆风优雅

最新推荐文章于 2024-06-01 00:30:00 发布

阅读量6.1k

点赞数 2

分类专栏： CSS 文章标签：前端

本文链接：https://blog.csdn.net/qq_44603011/article/details/124007320

版权

CSS 专栏收录该内容

48 篇文章 1 订阅

订阅专栏

本文介绍了JavaScript中的getComputedStyle方法，用于获取DOM元素的实际显示样式，并展示了如何使用setProperty方法修改元素的样式，包括CSS变量。示例代码演示了如何获取和设置背景颜色、字体大小等样式属性。

摘要由CSDN通过智能技术生成

1. 首先getComputedStyle（）此方法用于获取当前dom的样式

getComputedStyle() 的使用方法：
    
// getComputedStyle方法可以用来获取DOM元素实际显示时的样式
    // getComputedStyle是window全局对象的一个方法，可以传递两个参数，第一个参数指定一个用来获取计算样式的DOM元素，
    // 第二个参数（可选）指定一个要匹配的伪元素的字符串，普通元素可省略或传null。

2. 使用setProperty（）方法来修改当前dom元素的样式，传入两个参数，第一个是，要修该的样式，第二个参数是要更改为的值

3. 代码示意如下：


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    :root { 
        /* css全局变量 */
      --main-color: blue;
    }

    .alert {
        /* css局部变量 */
      --main-color: red;
    }

    p {
      color: var(--main-color);
      text-align: center;
      font-size: 2em;
    }
  </style>
</head>
<body>
  <div>
    <p>blue paragraph.</p>
    <div class="alert">
      <p>red paragraph.</p> <!--这个p标签在alert这个父元素之下，所以定义值为局部变量的值-->
    </div>
  </div>
</body>
<script>
    let div = document.querySelector('.alert') // 获取dom元素
    
    let divCss = getComputedStyle(div) // 缓存该dom的样式
    console.log(divCss); // 打印的结果中是该dom元素的所有的值
    

    let cssVal = String(divCss.getPropertyValue('--main-color')).trim() // 获取css变量的值
    // String将值转化为字符串， trim() 去除字符串两边的空格
    console.log(cssVal); // red

    div.style.setProperty('background','pink') // 给获取到的dom元素的变量设置值
    div.style.setProperty('font-size','50px') // font-size不需要使用驼峰书写

</script>
</html>

逆风优雅

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
js 获取当前dom元素的所有样式(getComputedStyle())，并且修改样式

1. 首先getComputedStyle（）此方法用于获取当前dom的样式getComputedStyle() 的使用方法： // getComputedStyle方法可以用来获取DOM元素实际显示时的样式 // getComputedStyle是window全局对象的一个方法，可以传递两个参数，第一个参数指定一个用来获取计算样式的DOM元素， // 第二个参数（可选）指定一个要匹配的伪元素的字符串，普通元素可省略或传null。2. 使用setProperty（）方法来
复制链接

扫一扫

专栏目录