JavaScript工具篇：查看浏览器的计算样式

JavaScript查看浏览器的计算样式

源自JavaScript学习0406课程

在我学习JavaScript中，学习到一个查看浏览器计算样式后结果的方式，这里分享出来给大家使用！

这里大家需要了解的概念

• 计算样式都是只读的；
• 一个元素最终应该渲染成什么样式，由浏览器决定；

下面是演示代码
火狐浏览器使用
let styles = window.getComputedStyle(p, null);
谷歌浏览器使用
let styles = document.defaultView.getComputedStyle(p, null);

这里我们以谷歌为例

示例代码如下

• 1.样式表

      .bgc-cyan {
        background: brown;
      }
      .bgc-yellow {
        background: yellow;
      }
      .border {
        border-radius: 20px;
      }
      .center {
        text-align: center;
        line-height: 200px;
      }
      .width {
        width: 200px;
      }
      .height {
        height: 200px;
      }

• 2.文档结构

<p>hello world</p>

• 3.使用JavaScript语法将样式添加到p标签上去

// 1.行内样式
const p = document.querySelector("P");
p.style.color = "lightskyblue";
console.log(p);

//   2.类样式
p.classList.add("bgc-cyan", "border", "center", "height", "width");

查看浏览器计算后的结果

// 第一个参数是要查看样式的元素，第二个是伪元素
let styles = document.defaultView.getComputedStyle(p, null);
console.log(styles.getPropertyValue("height"));
console.log(styles.getPropertyValue("background-color"));
console.log(styles.getPropertyValue("color"));
console.log(styles.getPropertyValue("width"));
console.log(styles.getPropertyValue("height"));
console.log(styles.getPropertyValue("text-align"));

---

这样谷歌浏览器就为我们计算出了样式的最后值

如果您觉得本文章对您有帮助，记得留下你的点赞窝！