前情摘要
一个需求。
存在一个长宽为50像素的淡灰色div块,想让它在被点击后,文字变成“White”,背景颜色变成深沉的黑。如何使用JavaScript来实现呢?
效果
点击前
点击后
关键字
- getElementById
- 通过id获取网页中的元素
- getElementsByClassName
- 通过类名获取网页中的元素,会获得一个数组
- getElementsByTagName
- 通过标签获取网页中的元素,会获得一个数组
Example
getElementById
首先,在html文件中准备一个div备用
<!--样式-->
#div_text {
width:50px;
height:50px;
background-color:#CCC;
}
<!--待会要用到的div-->
<div id="div_text" onclick="changeColorAndFont()">Black</div>
参考解释:
- 定义了一个id为“div_text”的div标签
- onclick="changeColorAndFont()"表示当这个div被单击时,执行changeColorAndFont()函数
接着,我们要写出changeColorAndFont这个函数,实现我们的需求,更换文字、文字的颜色和背景颜色
function changeColorAndFont() {
var divText = document.getElementById("div_text");
divText.style.backgroundColor = "#333";
divText.style.color = "#FFF";
divText.firstChild.nodeValue = "White";
}
参考解释:
var divText = document.getElementById("div_text");
利用document.getElementById,参数是字符串,获取id为”div_text”的元素,并将该元素赋给divText。
divText.style.backgroundColor = "#333";
divText.style.color = "#FFF";
通过.style获取该元素的CSS属性,其实看名字也可以看出来backgroundColor是背景颜色,color是字体颜色。
divText.firstChild.nodeValue = "White";
这里的firstChild可能一开始比较难理解
<body>
<h1></h1>
<div>Black</div>
</body>
在html中,有节点这么一个概念,比如上面的代码,划分一下,就是
- body
- h1
- div
- Black
像族谱一样,body的子节点(child)有两个,分别是h1和div。
然而值得注意的是,Black这个文本内容,也算是div的一个子节点(文本节点)。
所以divText.firstChild.value的意思就是其后代文本节点的值,如果在改变其的值之前使用
alert(