web前端之JavaScript DOM编程艺术之CSS-DOM
1. 三位一体的网页
在浏览器中的网页主要分为三大方面:结构层、表示层、行为层
结构层:主要由HTML或XHTML之类的标记语言组成
表示层:由css负责完成
行为层:负责内容应该如何响应事件这一问题。这是由JavaScript和DOM主宰的领域。
var paras=document.getElementsByTagName("p");
for(var i=0;i<paras.length;i++){
paras[i].onclick=function(){
alert("You clicked on a paragraph.");
}
}
2. style属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload=function(){
var para=document.getElementById("example");
alert(typeof para.nodeName);
alert(typeof para.style);
}
</script>
</head>
<body>
<p id="example" style="color:grey;font-family:'Arial',sans-serif;">
An example of a paragraph.
</p>
</body>
</html>
从这里我们就可以看出,nodeName属性就是一个字符串,style属性是一个对象。
alert(“The color is” + para.style.color);
通过element.style.color就能获取相应style的对应属性。
注:如果需要获取font-family等中间有”-“的属性,element.style.fontFamily应该在“-”换成驼峰来获取其相应的属性。
如果把css封装成一个文件,那么element.style.color不能获取到其相应的css值
3. 设置样式
element.style.color=”#000”;也可以通过这个来设置样式。
className属性:
你可以通过className属性获得一个元素的class属性:element.className
用className属性和赋值操作符设置一个元素的class属性:element.className=value