CSS样式大体分为三种
1.外联样式(.css文件引入)
2.内联样式(style标签引入)
3.内嵌样式(element的Style属性)
JS获取CSS样式
1.通过element.style获取
注：这种方式获取的是元素的内嵌样式，无法获取元素内联样式和外联样式。
结果如下：CSSStyleDeclaration对象包含的value值为内嵌样式的值。
image.png
2.通过window.getComputedStyle(element, [pseudoElt])获取。
注：可以获取元素的所有css属性。
结果如下：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样式分为外联(.css文件引入) 内联(style标签) 内嵌(element的style属性)
</span>
</div>
<script>
// js获取元素的样式方法
let el = document.getElementById('content')
// element.style获取的是elment的内嵌样式
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设置元素的样式方法
</script>
</body>
</html>
引入的css文件内容
* {
padding: 0;
margin: 0;
}
