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"));
这样谷歌浏览器就为我们计算出了样式的最后值
如果您觉得本文章对您有帮助,记得留下你的点赞窝!