網頁點選選擇設定文字不同顏色程式碼例項

admin發表於2017-04-01
網頁

本章節介紹一下如何設定文字的不同顏色，下面的程式碼非常簡單，很難應用於實際編碼，但是可以做一下參考，然後再根據自己的思路進行擴充套件豐富，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
function chColor(c){
  document.body.style.color=c;
}
window.onload=function(){
  var inputs=document.getElementsByTagName("input");
  for(var index=0;index<inputs.length;index++){
    inputs[index].onclick=function(){
      chColor(this.value);
    }
  }
}
</script>
</head>
<body>
<input name="c" type="radio" value="#000000" checked/>黑
<input name="c" type="radio" value="#0000FF"/>藍
<input name="c" type="radio" value="#FF0000"/>紅<br>
螞蟻部落歡迎您
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

1.function chColor(c){

  document.body.style.color=c;

}此函式可以設定網頁body的字型顏色，函式的引數就是顏色值。

2.window.onload=function(){}，當文件內容完全載入完畢再去執行函式中的程式碼。

3.var inputs=document.getElementsByTagName("input")，獲取input元素集合。

4.for(var index=0;index<inputs.length;index++){

  inputs[index].onclick=function(){

    chColor(this.value);

  }

}遍歷元素集合中的每一個input元素，並註冊onclick事件處理函式，為函式傳遞的引數是input元素的value屬性值。

二.程式碼註釋:

getElementsByTagName()可以參閱document.getElementsByTagName()一章節。

相關文章