原生JS DOM 重点知识笔记（第五期-CSS DOM）

一、CSS DOM操作

1. 获取一个内联样式,下面会输出：grey

<p style="color:grey" id="para">
	这里是内容
</p>
<script>
	var para=document.getElementById("para");
	alert(para.style.color);
</script>

2. 主动设置一个内联样式

var para=document.getElementById("para");
para.width="200px";

二、用CSS设置表格奇数行和偶数行的样式

tr:nth-child(odd)
{
	background-color:#ddd;
}
tr:nth-child(even)
{
	background-color:#ccc;
}

三、onmouseover与onmouseout属性

可以控制在鼠标指针悬停在某个表格上方的行为

var rows=document.getElementsByTagName("tr");
for(var i=0;i<rows.length;i++)
{
	rows[i].onmouseover=function(){
		this.style.width="200px";
	}
	rows[i].onmouseout=function(){
		this.style.width="100px";
	}
}

四、对class的操作

1. 改变class的名称

var para=document.getElementById("para");
para.className="newClassName";

2. 添加一个新的class

var para=document.getElementById("para");
para.className+="newClassName";