示例
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>访问元素</title> 5 <meta charset="UTF-8"> 6 <!--<meta name="viewport" content="width=device-width, initial-scale=1.0"> --> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <style> 9 .mycolor{ 10 color:#fff; 11 background-color: #ddd; 12 } 13 </style> 14 </head> 15 <body> 16 <ul id="ul"> 17 <li id="a">油条</li> 18 <li id="b">包子</li> 19 <li id="c">米饺</li> 20 <li id="d"><a>鱼粉</a></li> 21 </ul> 22 23 <!--按钮 onclick当点击按钮时，执行一段JavaScript代码--> 24 <button onclick="gaibianyangshi()">点击</button> 25 26 <script> 27 // 返回单一元素节点 28 function gaibianyangshi() { 29 /**getElementById按ID获取元素**/ 30 var el = document.getElementById('a'); 31 el.className='mycolor'; 32 33 } 34 35 </script> 36 </body> 37 </html>