JS DOM获取标签/元素style样式

最新推荐文章于 2024-07-22 14:26:01 发布

OGoodness

最新推荐文章于 2024-07-22 14:26:01 发布

阅读量2.7k

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/qq_46275230/article/details/124232879

版权

JS 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

本文详细解析了如何使用JSDOM获取HTML元素的行内样式（.style）与通过getComputedStyle()获取所有设定样式，包括来自外部CSS的选择器。通过实例对比展示两者差异，并介绍了如何结合class属性和外部样式表。

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

JS DOM获取标签/元素style样式

.style

只能获取行内样式,不能获取style标签中class的样式

<body>
  <div class="one" style="color:red;width:180px">小情歌</div>

  <script>
    let one = document.querySelector(".one")
    console.log(one.style);
  </script>
</body>

请添加图片描述

<body>
  <div class="one" style="color:red;width:180px">小情歌</div>

  <script>
    let one = document.querySelector(".one")
    console.log(one.style.color);
    console.log(one.style.width);
    console.log(one.style.height);

  </script>
</body>

请添加图片描述

getComputedStyle()

获取所有设定样式,包括style标签中的class属性

<body>
  <style>
    .one {
      height: 20px;
    }
  </style>
  <div class="one" style="color:red;width:180px">小情歌</div>

  <script>
    let one = document.querySelector(".one")
    console.log(getComputedStyle(one,null));
  </script>
</body>

请添加图片描述

<body>
  <style>
    .one {
      height: 20px;
    }
  </style>
  <div class="one" style="color:red;width:180px">小情歌</div>

  <script>
    let one = document.querySelector(".one")
    console.log(getComputedStyle(one,null)["color"]);
    console.log(getComputedStyle(one,null)["color"]);
    console.log(getComputedStyle(one,null)["height"]);
  </script>
</body>

请添加图片描述

OGoodness

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS DOM获取标签/元素style样式

JS DOM获取标签/元素style样式文章目录JS DOM获取标签/元素style样式.stylegetComputedStyle().style只能获取行内样式,不能获取style标签中class的样式<body> <div class="one" style="color:red;width:180px">小情歌</div> <script> let one = document.querySelector(".one")
复制链接

扫一扫

专栏目录