JavaScript通過(guò)元素的ID和name設(shè)置樣式
1、說(shuō)明
(1)根據(jù)所提供的元素的id值,返回對(duì)該元素的引用或節(jié)點(diǎn)
document.getElementById("tr_th")
(2)根據(jù)參數(shù)中的標(biāo)記,返回對(duì)一組元素的引用或節(jié)點(diǎn)
document.getElementsByTagName("td")
2、實(shí)現(xiàn)源碼
<!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通過(guò)ID和name設(shè)置樣式</title> <style type="text/css"> #tr_th,tr td{ border: 1px #CCCCCC solid; } </style> <script type="text/javascript"> /** * JavaScript通過(guò)ID和name設(shè)置樣式 */ function setFontColor() { //獲取table中的表頭ID var tabId = document.getElementById("tr_th"); //設(shè)置表頭文字顏色 tabId.style.color = "yellow"; //獲取table中的td var tabName = document.getElementsByTagName("td"); //計(jì)算出td的個(gè)數(shù) var len = tabName.length; //遍歷table中的td,并設(shè)置td中的內(nèi)容顏色 for(var i=0;i<len;i++) { tabName[i].style.color = "blue"; } } </script> </head> <body> <table cellpadding="1" cellspacing="0" style="border:1px #CCCCCC solid; width:50%; text-align:center;"> <tr id="tr_th"> <th>工號(hào)</th> <th>姓名</th> <th>年齡</th> <th>性別</th> </tr> <tr> <td>2012010101</td> <td>張三三</td> <td>23</td> <td>男</td> </tr> <tr> <td>2012010102</td> <td>柳絲絲</td> <td>20</td> <td>女</td> </tr> </table> <input type="button" value="設(shè)置顏色" onclick="setFontColor()"/> </body> </html>
3、實(shí)現(xiàn)結(jié)果
(1)初始化時(shí)
(2)單擊“設(shè)置顏色”按鈕
- js中cookie的使用詳細(xì)分析
- JS設(shè)置cookie、讀取cookie、刪除cookie
- JS操作Cookies包括(讀取添加與刪除)
- js刪除所有的cookie的代碼
- js中的cookie的讀寫操作示例詳解
- js讀寫COOKIE實(shí)現(xiàn)記住帳號(hào)或密碼的代碼(js讀寫COOKIE)
- JS實(shí)現(xiàn)清除指定cookies的方法
- JavaScript動(dòng)態(tài)設(shè)置div的樣式的方法
- js批量設(shè)置樣式的三種方法不推薦使用with
- javaScript 讀取和設(shè)置文檔元素的樣式屬性
- JS使用cookie設(shè)置樣式的方法
相關(guān)文章
javascript實(shí)現(xiàn)yield的方法
這篇文章介紹了javascript實(shí)現(xiàn)yield的方法,有需要的朋友可以參考一下2013-11-11原生JS實(shí)現(xiàn)非常好看的計(jì)數(shù)器
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)非常好看的計(jì)數(shù)器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10bootstrap table插件的分頁(yè)與checkbox使用詳解
這篇文章主要為大家詳細(xì)介紹了bootstrap table插件的分頁(yè)與checkbox使用詳解,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07在IE6下發(fā)生Internet Explorer cannot open the Internet site錯(cuò)誤
最近在IE6下面時(shí)常會(huì)發(fā)生“Internet Explorer cannot open the Internet site ”錯(cuò)誤。2010-06-06bootstrap學(xué)習(xí)使用(導(dǎo)航條、下拉菜單、輪播、柵格布局等)
這篇文章主要為大家詳細(xì)介紹了bootstrap框架、導(dǎo)航條、下拉菜單、輪播廣告carousel、柵格系統(tǒng)布局、標(biāo)簽頁(yè)tabs等相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12JavaScript鏈?zhǔn)秸{(diào)用原理與實(shí)現(xiàn)方法詳解
這篇文章主要介紹了JavaScript鏈?zhǔn)秸{(diào)用,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript鏈?zhǔn)秸{(diào)用基本原理、實(shí)現(xiàn)方法與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-05-05alixixi runcode.asp的代碼不錯(cuò)的應(yīng)用
alixixi runcode.asp的代碼不錯(cuò)的應(yīng)用...2007-08-08JavaScript中獲取鼠標(biāo)位置相關(guān)屬性總結(jié)
這篇文章主要介紹了JavaScript中獲取鼠標(biāo)位置相關(guān)屬性總結(jié),本文重點(diǎn)在搞清楚這些屬性的區(qū)別,需要的朋友可以參考下2014-10-10