CSS DOM概述
通过JavaScript语言，使用DOM对象接口，动态的修改CSS内容，到达对页面样式进行变更。
整个页面的所有CSS样式还可以通过 document.styleSheets 进行获取
CSS DOM
CSS DOM操作
- CSS的定义方式
- link外链
- style内嵌
- 元素style属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<link rel="stylesheet" href="base.css" >
<style>/内部样式/
body{margin: 30px;} /第0个样式对象/
p{color: #aaa; line-height: 20px;} /第1个样式对象/
</style>
</head>
<body>
<p style="color: red;">行内样式</p>
</body>
</html>
- 内部样式表操作
- 包括
link外链和style内嵌方式 - 使用
element.sheet对样式进行操作
var element = document.getElementsByTagName(“style”); //获取元素
element.sheet.cssRules[1]; // 第1个样式对象
element.sheet.cssRules[1].style; //CSSStyleDeclaration对象，样式声明
element.sheet.cssRules[1].style.lingHeight; //CSSStyleDeclaration对象中，line-height属性值，“20px”
element.sheet.cssRules[1].selectorText; //返回选择器名称字符串，“p”
element.sheet.cssRules[1].cssText; //第一个样式对象的内容，字符串，即“p{color: #aaa; line-height: 20px;}”
-
行内样式表操作
-
body中的p元素 - 使用
p.style对样式直接操作
var p = document.getElementsByTagName(“p”); //获取元素
p.style.color; //返回 p元素css样式，属性名为color的值，字符串，“red”
p.style.cssText; //返回p元素的css样式内容，字符串表示，即“color: red;"
-
-
更新CSS样式
- 直接更新
style的对应属性值-
p.style.color = "blue;"， - 缺点：
a. 属性是需要按照驼峰格式书写，不符合CSS规范；
b. 更新一个属性就需要一个语句，很麻烦；
-
- 直接写CSS样式
p.style.cssText = "color: blue; border: 1px solid red"- 缺点：CSS样式混在JavaScript代码中，可维护性差
- 通过更新元素样式的class值
- 首先，在页面中增加新的样式class，例如
.newClass{...}； - 然后，在JavaScript代码中设置元素的class样式属性，
p.className += newClass; - 缺点：一次只能更新一个样式，如果有多个样式需要更新不方便，且要提前写到HTML代码中
- 首先，在页面中增加新的样式class，例如
- 更新样式表方法
- 首先，将变化后的样式（新增或删除）单独写在一个样式表文件（.css）中
- 然后，通过变更
link元素的href属性值即可完成批量样式更改操作
- 直接更新
-
获取CSS样式属性值
-
p.style.color获取的样式为元素行内样式，即只有在元素的style属性里设置的才能被获取，如果通过link或style方式设置的样式值无法获取 -
var style = window.getComputedStyle(p);，能获取元素的实际样式，获取的返回值为实际样式的属性名和属性值键值对 ，只能读取不能修改- 获取的实际为
CSSStyleDeclaration的实例对象; - 此方法不支持 IE9 以下版本，IE9中需使用
element.currentStyle来做兼容。
- 获取的实际为
-
网友评论