getComputedStyle 能取到目标节点的计算后样式(最终生效的样式), 就是所见即所得
相对的 style 只能取到行内样式
修改样式表后, 能获取最新有效值
demo
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>js getComputedStyle 获取对像元素的计算后样式</title>
<style>
* {
outline: 1px red solid;
}
#box1 {
font-size: 30px;
color: red;
}
#swq {
font-size: 20px;
height: 100px;
width: 300px;
}
#swq::after {
display: block;
outline: 1px green solid;
height: 50px;
content: "#swq::after content";
font-size: 12px;
}
</style>
<style>
#swq {
color: green;
}
</style>
</head>
<body>
<div id="box1">
<div id="swq" style="width: 200px;">swq</div>
</div>
<script type="text/javascript">
"use strict"
window.onload = function (params) {
var ele = document.getElementById("swq")
console.log("getComputedStyle 能取到所有作用在该元素上的样式, 包括行内样式和非行内样式")
console.log("getComputedStyle 只读, 不能修改")
console.log(window.getComputedStyle(ele, null).width) // 200px
console.log(window.getComputedStyle(ele, null).fontSize) // 20px
console.log("结合 getPropertyValue 可以用字符串, 否则要用驼峰体")
console.log(window.getComputedStyle(ele, null).getPropertyValue("font-size")) // 20px
console.log("getComputedStyle 的第二个参数是针对伪类使用的")
console.log(window.getComputedStyle(ele, "::after").content) // "#swq::after content"
console.log(window.getComputedStyle(ele, "::after").color) // rgb(0, 128, 0)
console.log("getComputedStyle 获取的是该元素上计算后样式(最终生效的样式)")
console.log("outline 继承于 *{}")
console.log(window.getComputedStyle(ele, null).outline) // rgb(255, 0, 0) solid 1px
console.log("父节点设置 fontSize: 30px; 但被本节点的 fontSize: 20px; 覆盖了")
console.log(window.getComputedStyle(ele, null).fontSize) // 20px
console.log("行内样式的特殊性最高, width 最后被行内样式覆盖")
console.log(window.getComputedStyle(ele, null).width) // 200px
console.log("靠后的样式, 将靠前的样式覆盖")
console.log(window.getComputedStyle(ele, null).color) // rgb(0, 128, 0)
console.log("-----------------")
console.log("style 只能取到行内样式")
console.log("style 可以修改样式, 修改的样式作用在行内")
console.log(ele.style.width) // 20px
console.log(ele.style.height) // 行内样式没有设置 height, 这里取不到值
console.log("currentStyle 是旧版 ie 用的, 已过时")
if (ele.currentStyle) {
console.log("ie")
console.log(ele.currentStyle.fontSize)
// currentStyle 取不到伪类的数据
}
}
</script>
</body>
</html>
参考资料:
Window.getComputedStyle() - Web API 接口参考 | MDN
end