明輝手游網(wǎng)中心：是一個免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

JS完成改變HTML上文字顏色與內(nèi)容的方法

發(fā)表時間：2023-09-09 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]這篇文章主要介紹了JS實(shí)現(xiàn)改變HTML上文字顏色和內(nèi)容的方法,涉及JS數(shù)學(xué)運(yùn)算與頁面元素動態(tài)操作相關(guān)技巧,需要的朋友可以參考下本文實(shí)例講述了JS實(shí)現(xiàn)改變HTML上文字顏色和內(nèi)容的方法。分享給大家供大家參考，具體如下：1. JavaScript<!DOCTYPE HTML PUBLIC &qu...
這篇文章主要介紹了JS實(shí)現(xiàn)改變HTML上文字顏色和內(nèi)容的方法,涉及JS數(shù)學(xué)運(yùn)算與頁面元素動態(tài)操作相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)改變HTML上文字顏色和內(nèi)容的方法。分享給大家供大家參考，具體如下：

1. JavaScript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
 <TITLE> Day 1 </TITLE>
 <META NAME="Generator" CONTENT="EditPlus">
 <META NAME="Author" CONTENT="">
 <META NAME="Keywords" CONTENT="">
 <META NAME="Description" CONTENT="">
 <script>
  // to change the color of an object.
  function changeColor(){
  x=document.getElementById("Id1");
  x.style.color="Red";
  }
  // to change the content of an object.
  function changeContent(){
  y=document.getElementById("Id2");
  y.innerHTML="Hi, you have changed the contents using Java Script successfully!";
  }
  </script>
 </HEAD>
<BODY bgcolor="AntiqueWhite">
  <h1 ><center>Welcome Page</center></h1>
  <p id="Id1">It is test 1.</p>
  <p id="Id2">It is test 2.</p>
  <button type="button" onclick ="changeColor()">
    Change color of test 1
  </button><br/><br/>
  <button type="button" onclick ="changeContent()">
    Change content of test 2
  </button>
 </BODY>
</HTML>

2. Day 1.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
 <TITLE> Day 1 </TITLE>
 <META NAME="Generator" CONTENT="EditPlus">
 <META NAME="Author" CONTENT="">
 <META NAME="Keywords" CONTENT="">
 <META NAME="Description" CONTENT="">
 <script>
  // to change the color of an object.
  function changeColor(){
  x=document.getElementById("Id1");
  x.style.color="Red";
  }
  // to change the content of an object.
  function changeContent(){
  y=document.getElementById("Id2");
  y.innerHTML="Hi, you have changed the contents using Java Script successfully!";
  }
  </script>
 </HEAD>
<BODY bgcolor="AntiqueWhite">
  <h1 ><center>Welcome Page</center></h1>
  <p id="Id1">It is test 1.</p>
  <p id="Id2">It is test 2.</p>
  <button type="button" onclick ="changeColor()">
    Change color of test 1
  </button><br/><br/>
  <button type="button" onclick ="changeContent()">
    Change content of test 2
  </button>
 </BODY>
</HTML>

3. 運(yùn)行效果截圖：

JS實(shí)現(xiàn)改變HTML上文字顏色和內(nèi)容的方法

相關(guān)推薦：

JS實(shí)現(xiàn)加載時鎖定HTML頁面元素的方法

js獲取html的span標(biāo)簽的值方法(超簡單)

以上就是JS實(shí)現(xiàn)改變HTML上文字顏色和內(nèi)容的方法的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。