x
1
2
<html>3
<head>4
<meta charset="utf-8">5
<title>蜜蜂教程(mifengjc.com)</title>6
<style>7
div {8
border: 1px solid black;9
margin: 5px;10
}11
</style>12
</head>13
<body>14
15
<div class="example">16
<p>P 元素在在第一个样式为 class="example" 的 Div 元素中。Div 的索引值为 0。</p>17
</div>18
<div class="example color">19
<p>P 元素在在第一个样式为 class="example color" 的 Div 元素中。Div 的索引值为 0。</p>20
</div>21
<div class="example color">22
<p>P 元素在在第二个样式为 class="example color" 的 Div 元素中。Div 的索引值为 1。</p>23
</div>24
<p>点击按钮修改第一个类为 "example" 的 div 元素的背景颜色。</p>25
<button onclick="myFunction()">点我</button>26
<p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>27
<script>28
function myFunction() {29
var x = document.getElementsByClassName("example color");30
x[0].style.backgroundColor = "red";31
}32
</script>33
34
</body>35
</html>