我们上一讲简单地讲了js的执行方法以及函数的定义。
这节课继续讲如何通过ID来获取指定元素，再进行详细的设置。
 

document.getElementById

上面提到的ID，是一个元素的标识，就像名字一样。
而且一个页面中只能有一个。
如果出现多个，会出现问题。
 
好了，下面进行我们今天的课程。
有如下代码：

<div id="div1">
Let me turn to red.
</div>

如果想让div1中的文本变成红色：

<script>
document.getElementById("div1").style.color="red";
</script>

学过了css的人很容易理解上面代码的含义。
那么我再解释一下：
首先要获取div1。方法是：document.getElementById(“div1”)。这段代码可以拆成：
document get element by id div1 意思就是：通过ID来获取文档内的div1。
接着是.style 说明要控制的是样式。
.color控制的是样式中的颜色。
=”red” 赋值为red。
就这么语义化。很简单。
 

结合事件更改样式

下面我们做这样的一个例子。就是点击按钮的时候让body的背景变成红色。
首先有个按钮。并绑定点击事件。

<a onclick="changered()">
点击我让body变成红色
</a>

再给body分一个ID。就id=”body”吧。
这样body部分的代码就如下了：

<body id="body">
<a onclick="changered()">
点击我让body变成红色
</a>
</body>

我们再定义一个点击事件所用到的函数。上面已经定义好名字了：changered()

<script>
function changered(){
	document.getElementById("body").style.backgroundColor="red";
	}
</script>

这样，当点击文本的时候，body的背景色就会变成红色。
 

相关英语

document = 文档
get = 获取，获得
element = 元素
by = 通过
ID = 标识符，编号