既然行内样式可读可写,计算过后的样式属性也可读;
那么样式表中的样式规则也应该可以被JS修改
这篇主要是简单教大家如何读取样式表中的样式、以及如何修改样式表
样式表(CSSStyleSheet)一般分为两种:
元素包含的样式表(HTMLLinkElement)
// index.css
div {
background-color: blue;
border: 10px solid #ccc;
}
p {
color: white;
background-color: orangered;
}
div {
width: 100px;
line-height: 100px;
background-color: red;
border: 6px solid #ccc;
text-align: center;
}
应用于文档的所有样式表是可以通过 document.styleSheets 集合来表示的。通过这个集合的 length属性可以获知文档中样式表的数量,而通过方括号语法或 item() 方法可以访问到每一个样式表对象
HTML
假装有内容
段落标签!
内部样式表
div {
width: 100px;
line-height: 100px;
background-color: red;
border: 6p