CSS樣式大體分為三種
1.外聯(lián)樣式(.css文件引入)
2.內(nèi)聯(lián)樣式(style標(biāo)簽引入)
3.內(nèi)嵌樣式(element的Style屬性)
JS獲取CSS樣式
1.通過element.style獲取
注：這種方式獲取的是元素的內(nèi)嵌樣式，無法獲取元素內(nèi)聯(lián)樣式和外聯(lián)樣式泌绣。
結(jié)果如下：CSSStyleDeclaration對象包含的value值為內(nèi)嵌樣式的值弊决。
image.png
2.通過window.getComputedStyle(element, [pseudoElt])獲取园细。
注：可以獲取元素的所有css屬性蚂蕴。
結(jié)果如下：CSSStyleDeclaration對象包含的value值為元素自身的所有樣式值。
image.png
示例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css.css">
<style type="text/css">
.box {
color: skyblue;
background: black;
}
.content {
background: pink;
}
div {
padding: 10px;
}
#box {
border: 10px solid grey;
}
</style>
</head>
<body>
<div class="box" id="box">
<span class="content" id="content" style="font-size: 20px; text-align: center; margin: 20px;">
CSS樣式分為外聯(lián)(.css文件引入) 內(nèi)聯(lián)(style標(biāo)簽) 內(nèi)嵌(element的style屬性)
</span>
</div>
<script>
// js獲取元素的樣式方法
let el = document.getElementById('content')
// element.style獲取的是elment的內(nèi)嵌樣式
console.log(el.style, el.style.background, el.style.fontSize)
// window.getComputedStyle(element)
console.log(window.getComputedStyle(el), window.getComputedStyle(el).background, window.getComputedStyle(el).fontSize)
// js設(shè)置元素的樣式方法
</script>
</body>
</html>
引入的css文件內(nèi)容
* {
padding: 0;
margin: 0;
}
