js代碼控制顏色（js文字顏色代碼）

本文目錄一覽：

• 1、js點擊改變文字顏色，再點擊又變回原樣
• 2、js控制字體顏色
• 3、JS控制table特定tr的背景顏色

js點擊改變文字顏色，再點擊又變回原樣

這是針對你的問題的測試界面測試頁面，界面結構如圖。

1、點擊按鈕變紅。

2、再次點擊按鈕變黑。

3、這是javascript代碼，由於每次點擊，都要記錄一個狀態，所以用i這個變數記錄這個狀態，根據它的奇偶性來控制顏色變化。

var i = 0;

function changeColor() {

if (i++%2 == 0) {

document.getElementById(‘id1’).style.color = ‘red’;

} else {

document.getElementById(‘id1’).style.color = ‘black’;

}

}

js控制字體顏色

input type=”text” onfocus=”this.style.color=’#272727′” style=”color:#3c3c3c;” value=”adf321klfds” /

如上代碼就可以了，不過#3c3c3c和#272727這兩個顏色太接近了，肉眼好難看出來 – -，你改個別的顏色就可以看出效果了，比如#272727改成#00ff00

JS控制table特定tr的背景顏色

代碼如下：

script

  //js放到table下，才能檢測到tr數組

  var trs = document.getElementById(“tableBox”).getElementsByTagName(“tr”);

 var trs=document.getElementById(“tableBox”).getElementsByTagName(“tr”);

     $(function(){

         for(var i=0;itrs.length;i++){

             trs[i].onmousedown = function(){

                 mousedownclick(this);

             }

         }

     });

     function mousedownclick(obj){

         for(var j=0;jtrs.length;j++){

             if(trs[j]==obj){

                 trs[j].style.background=’blue’;

             }else{

                 trs[j].style.background=”;

             }

         }

     }

/script

擴展資料

js操作table的各種用法：

(1)得到table 中tbody 的內容 ：$(‘#simple-table’).find(‘tbody’).html();

(2)點擊td時，獲取點擊的行號：

$(‘#simple-table tbody’).on( ‘click’, ‘td’, function (e) {

normalRowIndex = $(this).parent().index(); //行號

console.log(“正常工作錶行：”+normalRowIndex);

});

(3)為table追加一行：

function addNormalTR(){

$(‘#simple-table’).find(‘tbody’).append(trtd); //tdtd為拼接的trtd 的html內容。

}

(4) 點擊td中的元素獲取，當前行號： obj.parentNode.parentNode.rowIndex;//obj 為元素對象