JS笔记 ( 二十三 ) 脚本化 CSS

 
 

---

博主的 Github 地址

---

1. 读写元素 CSS 属性

• 语法: dom.style.prop
• 作用: 可读写行间样式, 没有兼容性问题
• 备注: 写入的值必须是字符串格式
• 注意事项
  (1) 只可改变行间样式, 对于引用 CSS 样式表并不能改变文件里面的值,
  但却会在元素的行间样式中重新赋值, 并覆盖原来的样式
   
  (2) 有的元素的属性可能会遇到保留字, 属性名前面应该加上 css
  例如: float 属性, 在 js 中访问时要写为 cssFloat
   
  (3) 复合属性必须拆解, 组合单词变成小驼峰式写法
  例如: font-size 这种组合单词, 在 js 中访问时写为 fontSize;
  border 这种复合属性, 包括了 width, style 和 color,
  访问时拆解为 borderWidth, borderStyle 和 borderColor

 
 

2. 查询计算样式

• 语法: window.getComputedStyle(ele, null)
• 作用: 返回的计算样式都是绝对值, 没有相对单位, 且只读
• 备注:
  获取的是当前 css 所展示的一切显示值, 即显示在屏幕上是什么就是什么;
  第二个参数可以用来获取伪元素的样式表