DOM-样式操作-组团学

一、行间样式表的读写

页面准备

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>行间样式表的读写</title>
</head>
<body>
	<div id="box" style="width:100px;height:200px;background-color:red"></div>
</body>
</html>

获取样式表中样式属性的属性值

格式：

style属性节点.样式属性名;

元素节点.style.样式属性名;

元素节点.style["样式属性名"];

//获取元素节点
var jsDiv = document.getElementById("box");
//获取style属性节点
var jsDivStyle = jsDiv.style;
        
console.log(jsDivStyle.width);
console.log(jsDiv.style.height); //推荐使用
console.log(jsDiv.style["height"]);

设置样式表中的样式属性的属性值

格式：元素节点.style.样式属性名 = 样式属性值;

注意：CSS样式中的-号去掉，-号后面的单词首字母大写
```
jsDiv.style.width = "200px";
jsDiv.style.backgroundColor = "green";
```

点击按钮换颜色

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>随机颜色</title>
</head>
<body>
	<div id="box" style="width:100px;height:200px;background-color:red"></div>
	<button onclick="changeColor()">换颜色</button>

	<script type="text/javascript">
		//获取元素节点
		var jsDiv = document.getElementById("box");
        
		function changeColor() {
			var r = parseInt(Math.random() * 256);
			var g = parseInt(Math.random() * 256);
			var b = parseInt(Math.random() * 256);

			var colorStr = "rgb(" + r + ", " + g + ", " + b + ")";
			jsDiv.style.backgroundColor = colorStr;
		}
	</script>
</body>
</html>

二、内部样式表与外部样式表的读写

准备页面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>内部样式表与外部样式表的读写</title>
	<link rel="stylesheet" type="text/css" href="sunck.css">
	<style type="text/css">
		#box1{
			width:100px;height: 100px;background-color: red;
		}
	</style>
</head>
<body>
	<div id="box1"></div>
	<div id="box2"></div>
</body>
</html>

#box2{
	width: 200px;height: 200px;background-color: green;
}

获取

注意：内部与外部CSS获取方式相同

IE浏览器获取格式：

元素节点.currentStyle.样式属性名;

元素节点.currentStyle["样式属性名"];

其他浏览器获取格式：

window.getComputedStyle(元素节点, 伪类).样式属性名;

window.getComputedStyle(元素节点, 伪类)["样式属性名"];

说明：伪类一般写null即可

//获取元素节点
var jsDiv1 = document.getElementById("box1");
var jsDiv2 = document.getElementById("box2");
var w1 = 0;
//判断是否是IE浏览器
if (jsDiv1.currentStyle) {
		w1 = jsDiv1.currentStyle.width;
} else {
		w1 = window.getComputedStyle(jsDiv1, null).width;
}
console.log(w1);
var w2 = 0;
if (jsDiv2.currentStyle) {
		w2 = jsDiv2.currentStyle.width;
} else {
		w2 = window.getComputedStyle(jsDiv2, null).width;
}
console.log(w2);

设置

格式：元素节点.style.样式属性名 = 样式属性值;

jsDiv1.style.backgroundColor = "black";
jsDiv2.style.backgroundColor = "blue";

getComputedStyle与style区别
- 只读与可写
  - getComputedStyle(IE下是currentStyle)方法是只读的，只能获取样式，不能设置
  - element.style能读能写
- 获取的对象范围
  - getComputedStyle(IE下是currentStyle)方法获取的是最终应用在元素上的所有CSS属性对象(即使没有CSS代码，也会把默认的都显示出来)
  - element.style只能获取元素style属性中的CSS样式。因此对于一个光秃秃的元素<p>，getComputedStyle方法返回对象中length属性值(如果有)，而element.style就是0

三、自由飞翔的div

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自由飞翔的div</title>
	<style type="text/css">
		#box{
			width: 100px;height: 100px;background-color: red;position: absolute;left: 0px;top: 0px;
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<button onclick="fly()" style="position: absolute;left: 150px;top: 150px">飞翔吧</button>

	<script type="text/javascript">
		function fly() {
			var jsDiv = document.getElementById("box");
			var timer = window.setInterval(move, 100);

			function move() {
				var currentLeft = parseInt(window.getComputedStyle(jsDiv, null).left);
				jsDiv.style.left = (currentLeft + 5) + "px";

				var currentTop = parseInt(window.getComputedStyle(jsDiv, null).top);
				jsDiv.style.top = (currentTop + 5) + "px";
			}
		}
	</script>
</body>
</html>