1. Description
(1) Return a reference or node to the element according to the id value of the provided element
document.getElementById("tr_th")(2) Return a reference or node to a group of elements according to the marks in the parameter
document.getElementsByTagName("td")2. Implement source code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript styles through ID and name</title> <style type="text/css"> #tr_th,tr td{ border: 1px #CCCCCC solid; } </style> <script type="text/javascript"> /** * JavaScript styles through ID and name*/ function setFontColor() { //Get the header ID in the table var tabId = document.getElementById("tr_th"); //Set the color of the header text tabId.style.color = "yellow"; //Get the td var tabName = document.getElementsByTagName("td"); //Calculate the number of td var len = tabName.length; //Transf the td in the table and set the content color in the td for(var i=0;i<len;i++) { tabName[i].style.color = "blue"; } } </script> </head> <body> <table cellpadding="1" cellpacing="0" style="border:1px #CCCCCC solid; width:50%; text-align:center;"> <tr id="tr_th"> <th>work number</th> <th>name</th> <th>age</th> <th>gender</th> </tr> <tr> <td>2012010101</td> <td>Zhang Sansan</td> <td>23</td> <td>Male</td> </tr> <tr> <td>2012010102</td> <td>Liu Sisi</td> <td>20</td> <td>Female</td> </tr> </table> <input type="button" value="Set color" onclick="setFontColor()"/> </body> </html>3. Achieve results
(1) Initialization
(2) Click the "Set Color" button