使用javascrip改變文字顏色

詳細內容
分類：Javascript
發佈：2013-03-27, 週三 20:40
點擊數：3810

使用javascrip改變文字顏色：

現在很多網頁都有客製化的功能選項可以選，文字顏色也是最常出現的選項，下面介紹一個簡單的方法來改變文字的顏色。

範例中只使用了四個顏色，若是要使用更多的顏色可以參考這篇色彩選取器。

程式碼解說：

1.範例前面是HTML，javascript程式碼在最後面。

2.利用document.getElementById取得DOM物件。

3.利用style.color屬性來改變顏色。

4.改變字型大小與字型請參考：使用javascript改變字型與字型大小

使用javascrip改變文字顏色程式碼：

<div style="border: solid 3px gray;">
<p>
&nbsp;</p>
<div onclick="ChangeColor('black')" style="background-color:black; border:3px double; width:150px;height:50px;float:left;">
&nbsp;</div>
<div onclick="ChangeColor('red')" style="background-color:red; border:3px double; width:150px;height:50px;float:left;">
&nbsp;</div>
<div onclick="ChangeColor('blue')" style="background-color:blue ;border:3px double; width:150px;height:50px;float:left;">
&nbsp;</div>
<div onclick="ChangeColor('yellow')" style="background-color:yellow ;border:3px double; width:150px;height:50px;float:left;">
&nbsp;</div>
<div id="change_color" style="clear:both; zoom:1">
<h1>
Welcom to Vic's Blog</h1>
<p>
維克的煩惱是一個關於Javascript 與 網頁架設 等等的部落格，格主VicTsao是個悲情的工程師。虛度三十餘年，依然孤家寡人。</p>
<p>
&nbsp;</p>
</div>
<div>
<h2>
神馬Javascript</h2>
<p>
Javascript 是神馬？</p>
</div>
</div>
<script type="text/javascript">
function ChangeColor(color){
var x=document.getElementById("change_color");
x.style.color=color;
}
</script>

使用javascrip改變文字顏色輸出：

 

 
 
 
 

Welcom to Vic's Blog

維克的煩惱是一個關於Javascript 與 網頁架設 等等的部落格，格主VicTsao是個悲情的工程師。虛度三十餘年，依然孤家寡人。

 

神馬Javascript

Javascript 是神馬？

 
 

  按個讚!~支持本站!~

FB推薦載入中  

你可能會有興趣的文章

返回本頁開頭    返回部落格首頁