Miembros principales de la hoja de estilo y tabla de relaciones
| datos | tipo de datos | Anotación |
|---|---|---|
| document.styleSheets | StyleSheetList | Equivalente a una colección de etiquetas de estilo |
| document.styleSheets [0] | CSSStyleSheet | CSSStyleSheet hereda de StyleSheet
Equivalente a una determinada etiqueta de estilo; es decir, la legendaria [hoja de estilo] |
| document.styleSheets [0] .cssRules | CSSRuleList | Una colección de reglas equivalente a una determinada etiqueta de estilo. |
| document.styleSheets [0] .cssRules 0 | CSSImportRule | Aquí solo se puede recuperar el contenido de texto de [@import url ()], pero no se puede recuperar el contenido de la regla |
| document.styleSheets [0] .cssRules [0] .styleSheet | CSSStyleSheet | En el caso de @import, el siguiente nivel de styleSheet es del tipo CSSStyleSheet; @import solo corresponde a una hoja de estilo, por lo que styleSheet no tiene s, y no es necesario especificar un subíndice |
| document.styleSheets [0] .cssRules 1 | CSSStyleRule | CSSStyleRule hereda de CSSRule
Es equivalente a una determinada regla de una determinada etiqueta de estilo; un @import o un par de {} contenido correspondiente |
| document.styleSheets [0] .cssRules [1] .cssText | Cuerda | El texto de la regla 1 de la hoja de estilo 0; cssText es de solo lectura y no tiene función de modificación |
| document.styleSheets [0] .cssRules [0] .style | CSSStyleDeclaration | El subíndice numérico es el nombre completo del atributo de "valor no inicial" (el contorno se dividirá en color, estilo, ancho) |
| document.styleSheets [0] .cssRules [0] .style. Nombre de la propiedad | Cuerda | El valor del atributo se puede obtener directamente por el nombre del atributo; el estilo se puede modificar en el estilo |
Objeto CSSStyleSheet
| Método / atributo | Descripción | gramática |
|---|---|---|
| cssRules | Devuelve una CSSRuleList en tiempo real, que contiene una lista actualizada de objetos CSSRule que componen la hoja de estilo. | |
| ownerRule | Si un estilo indica que el documento se importa a través de la regla @import, la propiedad ownerRule devolverá el objeto CSSImportRule correspondiente; de lo contrario, devolverá un valor nulo | Este método sigue siendo un borrador, no sé cómo usarlo. |
| insertRule (regla [, índice]) | Inserte una nueva regla en una posición específica de la hoja de estilo, debe proporcionar el texto completo de la nueva regla | regla: regla; índice: posición (por defecto primero); |
| deleteRule (índice) | Eliminar una regla en una ubicación específica de la hoja de estilo | índice: posición; |
| normas | Misma función que cssRules; método obsoleto | |
| addRule (selector, styleBlock, índice) | Similar a la función insertRule (), uso diferente; método obsoleto | selector: selector; styleBlock: texto de la regla; índice: posición (último predeterminado); |
| removeRule (índice) | Mismo uso de función que deleteRule (); método obsoleto | índice: posición; |
Nota: Aunque varios métodos como insertRule son un método de CSSStyleSheet, el lugar de inserción real es la CSSRuleList interna de CSSStyleSheet.cssRules
Objeto StyleSheet
| Método / atributo | Descripción |
|---|---|
| discapacitado | Devuelve un valor booleano que indica si la hoja de estilo actual está disponible |
| href | Devuelve DOMString indicando la posición de la hoja de estilo |
| medios de comunicación | Devuelve MediaList que representa los medios de destino esperados del estilo. |
| ownerNode | Regrese al nodo para asociar esta hoja de estilo con el documento actual |
| parentStyleSheet | Devolver StyleSheet si hay alguno; devolver nulo si no hay |
| título | 返回 DOMString 表示当前样式表的顾问标题 |
| type | 返回 DOMString 表示当前样式表的语言 |
demo 中的表格同以上表格
demo 主要目的是示范用 javascript 控制样式表
<!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 样式表入门基础及简单操作</title>
<link rel="stylesheet" href="./css/outsideStyle.css">
<style>
@import url("./css/outsideStyle.css");
* {
outline: 1px red solid;
}
#box1 {
font-size: 30px;
}
p {
font-size: 20px;
height: 100px;
width: 300px;
}
#box2 ::after {
display: block;
outline: 1px green solid;
height: 50px;
content: "attr()";
font-size: 12px;
}
</style>
<style>
#box3 {
color: red;
}
</style>
</head>
<body>
<h1>样式表核心成员及关系表</h1>
<table>
<tr>
<th>数据</th>
<th>数据类型</th>
<th>注释</th>
</tr>
<tr>
<td>document.styleSheets</td>
<td>StyleSheetList</td>
<td>相当于 style 标签的集合</td>
</tr>
<tr>
<td>document.styleSheets[0]</td>
<td>CSSStyleSheet</td>
<td>
<div>CSSStyleSheet 继承自 StyleSheet</div>
<div>相当于某个 style 标签; 也就是传说中的[样式表]</div>
</td>
</tr>
<tr>
<td>document.styleSheets[0].cssRules</td>
<td>CSSRuleList</td>
<td>相当于某个 style 标签的规则的集合</td>
</tr>
<tr>
<td>document.styleSheets[0].cssRules[0](@import)</td>
<td>CSSImportRule</td>
<td>这里只能取到 [@import url()] 的文本内容, 并不能取到规则内容</td>
</tr>
<tr>
<td>document.styleSheets[0].cssRules[0].styleSheet</td>
<td>CSSStyleSheet</td>
<td>@import 的情况, 下一层 styleSheet 又是 CSSStyleSheet 类型; @import 只对应一个样式表, 所以 styleSheet 没有 s, 也不用指定下标</td>
</tr>
<tr>
<td>document.styleSheets[0].cssRules[1](常规的{})</td>
<td>CSSStyleRule</td>
<td>
<div>CSSStyleRule 继承自 CSSRule</div>
<div>相当于某个 style 标签的某条规则; 一个 @import 或者一对{}对应的内容</div>
</td>
</tr>
<tr>
<td>document.styleSheets[0].cssRules[1].cssText</td>
<td>String</td>
<td>第0个样式表的第1条规则的文本;cssText 是只读, 没有修改功能</td>
</tr>
<tr>
<td>document.styleSheets[0].cssRules[0].style</td>
<td>CSSStyleDeclaration</td>
<td>数字下标的是"非初始值"的完整属性名(outline 会被拆分成 color, style, width)</td>
</tr>
<tr>
<td>document.styleSheets[0].cssRules[0].style.属性名</td>
<td>String</td>
<td>用属性名可以直接取到属性值;在style可以修改样式</td>
</tr>
</table>
<h1>CSSStyleSheet 对象</h1>
<table>
<tr>
<th>方法/属性</th>
<th>说明</th>
<th>语法</th>
</tr>
<tr>
<td>cssRules</td>
<td>返回一个实时的 CSSRuleList，其中包含组成样式表的 CSSRule 对象的一个最新列表</td>
<td></td>
</tr>
<tr>
<td>ownerRule</td>
<td>如果一个样式表示通过@import 规则引入文档，那么 ownerRule 属性会返回相应的CSSImportRule对象，否则返回 null</td>
<td>这个方法还是草案, 不知道怎么用</td>
</tr>
<tr>
<td>insertRule(rule [, index])</td>
<td>向样式表的特定位置插入一条新规则，需要提供新规则的完整文本</td>
<td>rule: 规则; index: 位置(默认最前);</td>
</tr>
<tr>
<td>deleteRule(index)</td>
<td>从样式表中删除特定位置的一条规则</td>
<td>index: 位置;</td>
</tr>
<tr>
<td>rules</td>
<td>跟 cssRules 功能用法相同; 过时方法</td>
<td></td>
</tr>
<tr>
<td>addRule(selector, styleBlock, index)</td>
<td>跟 insertRule() 功能相似, 用法不同; 过时方法</td>
<td>selector: 选择器; styleBlock: 规则正文; index: 位置(默认最后);</td>
</tr>
<tr>
<td>removeRule(index)</td>
<td>跟 deleteRule() 功能用法相同; 过时方法</td>
<td>index: 位置;</td>
</tr>
</table>
<div>注意：尽管 insertRule 等几个方法是 CSSStyleSheet 的一个方法，但它实际插入的地方是 CSSStyleSheet.cssRules 的内部 CSSRuleList。</div>
<h1>StyleSheet 对象</h1>
<table>
<tr>
<th>方法/属性</th>
<th>说明</th>
</tr>
<tr>
<td>disabled</td>
<td>返回Boolean表示当前样式表是否可用</td>
</tr>
<tr>
<td>href</td>
<td>返回 DOMString 表示样式表的位置</td>
</tr>
<tr>
<td>media</td>
<td>返回 MediaList 表示样式的预期目标媒体</td>
</tr>
<tr>
<td>ownerNode</td>
<td>返回 Node 将此样式表与当前文档相关联</td>
</tr>
<tr>
<td>parentStyleSheet</td>
<td>返回 StyleSheet 如果有的话; 返回 null 如果没有</td>
</tr>
<tr>
<td>title</td>
<td>返回 DOMString 表示当前样式表的顾问标题</td>
</tr>
<tr>
<td>type</td>
<td>返回 DOMString 表示当前样式表的语言</td>
</tr>
</table>
<script type="text/javascript">
"use strict"
window.onload = function (params) {
console.log(document.styleSheets)
console.log(document.styleSheets[0])
console.log(document.styleSheets[1].cssRules)
console.log(document.styleSheets[0].cssRules[0])
console.log(document.styleSheets[0].cssRules[0].cssText)
document.styleSheets[1].insertRule("#swq{color:#000}", 1)
document.styleSheets[1].addRule("#swq", "color:#000", 1)
document.styleSheets[1].deleteRule(0)
document.styleSheets[1].removeRule(0)
}
</script>
</body>
</html>
参考资料:
styleSheet;
StyleSheet - Web API 接口参考 | MDN;
CSSStyleSheet - Web API 接口参考 | MDN;
Document.styleSheets - Web API 接口参考 | MDN;
end