JavaScript通過元素的ID和name設置樣式
更新時間：2014年07月08日 11:39:09 投稿：whsnow
這篇文章主要介紹了JavaScript通過元素的ID和name設置其樣式，下面有個不錯的示例，感興趣的朋友可以測試下
1、說明
（1）根據(jù)所提供的元素的id值，返回對該元素的引用或節(jié)點
document.getElementById("tr_th")
（2）根據(jù)參數(shù)中的標記，返回對一組元素的引用或節(jié)點
document.getElementsByTagName("td")
2、實現(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通過ID和name設置樣式</title>
<style type="text/css">
#tr_th,tr td{
border: 1px #CCCCCC solid;
}
</style>
<script type="text/javascript">
/**
* JavaScript通過ID和name設置樣式
*/
function setFontColor()
{
//獲取table中的表頭ID
var tabId = document.getElementById("tr_th");
//設置表頭文字顏色
tabId.style.color = "yellow";
//獲取table中的td
var tabName = document.getElementsByTagName("td");
//計算出td的個數(shù)
var len = tabName.length;
//遍歷table中的td，并設置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>工號</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="設置顏色" onclick="setFontColor()"/>
</body>
</html>
3、實現(xiàn)結果
（1）初始化時
（2）單擊“設置顏色”按鈕
相關文章
JavaScript?Promise多并發(fā)問題的解決方法詳解
提起控制并發(fā),大家應該不陌生,這篇文章主要來和大家介紹一下JavaScript如何解決Promise多并發(fā)問題,感興趣的小伙伴可以跟隨小編一起學習一下2023-09-09
這篇文章主要介紹了利用HTML和JavaScript制作一個朗讀器，可以跟著一起念著讀，文中的示例代碼講解詳細，感興趣的小伙伴可以學習一下2022-02-02
本文主要介紹了js模擬微博發(fā)布消息的實例，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要是對JS冒泡事件的快速解決方法進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要介紹了JavaScript數(shù)組前面插入元素的方法,涉及javascript中unshift方法的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
javascript中toFixed()四舍五入使用方法詳解
最近做的項目涉及到金額的計算，有一種方式就是進行四舍五入的規(guī)則進行小數(shù)點后面的尾數(shù)處理，以前一直以為toFixed方法就是四舍五入的，這里為大家分享一下2018-09-09
純js和css實現(xiàn)漸變色包括靜態(tài)漸變和動態(tài)漸變
用javascript實現(xiàn)一下所謂的動態(tài)漸變，考慮動態(tài)原因就不上圖了，我來簡單介紹下思路2014-05-05
javascript 面向?qū)ο髮崙?zhàn)思想分享
萬物皆對象，所以，任何事物都是有特征(屬性)和動作(方法)的，一般拿到一份需求分檔，或者你瀏覽一個網(wǎng)頁看到一個畫面的時候，腦子里就要有提煉出來的屬性和方法的能力，那你才是合格的2017-09-09
這篇文章主要介紹了JS實現(xiàn)多物體緩沖運動實例代碼，有需要的朋友可以參考一下2013-11-11
這篇文章主要介紹了iframe里的頁面禁止右鍵事件的方法,需要的朋友可以參考下2014-06-06