hongyangwu

主题

操控样式 ​

操控类名 className ​

  • 通过操作 classList，其是一个 DOMTokenList 实例
属性 / 方法说明
length有多少项类名
item(index) 或 [index]取某个下标的类名
add(value)添加字符串值 value，如已存在，则不做任何操作
contain(value)返回布尔值，表示字符串值 value 是否存在
remove(value)删除字符串值 value
toggle(value)如已存在 value，则删除
如不存在 value，则添加
js
const body = document.body
body.classList.length

此节对应书 15.3.1

操控行内样式 style ​

1. 类型 ​
  • style 是 CSSStyleDeclaration 类型的实例
2. 读写 style ​

  • 读写 style 的属性，必须转换为驼峰大小写形式，如 background-image，要转换为 backgroundImage

    • float 是保留字，不能作为属性名，要使用 cssFloat
    js
    element.style.backgroundColor = 'red'
3. 扩展属性和方法 ​
属性或方法说明
cssText包含 style 属性的 CSS 代码
设置 cssText 可以一次性修改元素
length应用给元素的 CSS 属性数量
parentRuleCSS 信息的 CSSRule 对象
getPropertyPriority(propertyName)使用了 !important 则返回 important，否则返回空字符串
getPropertyValue(propertyName)属性对应的字符串值
item(index)或[index]索引对应的属性名
removeProperty(propertyName)删除此属性
setProperty(propertyName, value, priority)设置属性对应的值为 value，priority 是 important 或空字符串

操控计算样式 ​

1. 计算样式 ​
  • 伪元素的样式
  • 经过样式优先级规则计算后样式，还包含没写，但继承了父样式的样式
2. document.defaultView.getComputedStyle() ​

参数

  1. 要去的计算样式的元素
  2. 伪元素字符串（如 :after）。如果不需要查询伪元素，则传 null

返回：CSSStyleDeclaration 对象，其是只读的

html
<html>
    <head>
        <style>
            #box {
                background-color: red;
                width: 100px;
            }
        </style>
    </head>
    <body>
        <div id="box" style="background-color: blue;" />
    </body>
</html>
js
const style = document.defaultView.getComputedStyle( document.getElementById('box'), null )

console.log(style.backgroundColor) // 'blue'
console.log(style.width)           // '100px'

操作样式表 ​

详细请看书 16.2.2 ，此处只列举可能使用的属性或方法

1. CSSStyleSheet 类型 ​
  • 表示所有 CSS 样式表，包括使用 <link> 元素和 <style> 元素
2. CSSStyleSheet 常用属性或方法 ​
属性或方法说明
cssRules获取当前样式表包含的样式规则的集合
deleteRule(index)在指定位置删除 cssRules 中的规则
insertRule(rule, index)在指定位置向 cssRules 中插入规则
3. CSSRule 类型 ​
  • 是 cssRules 中一条规则的类型
  • 有以下常用属性
属性说明
cssText整条规则的文本
selectorText返回规则的选择符文本，只读
style返回 CSSStyleDeclaration 对象，可以读写
html
<head>
    <style>
        div.box { width: 100px; }
    </style>
</head>
js
const sheet = document.styleSheets[0];       // 取出 <style> 样式表
const rules = sheet.cssRules || sheet.rules; // 取出规则集合
const rule = rules[0];                       // 取得第一条规则
console.log(rule.selectorText)               // 'div.box'
console.log(rule.style)                      // 完整的 CSS 代码
console.log(rule.width)                      // '100px'

Copyright © 2021-2024 hongyangwu