JS完成改變HTML上文字顏色與內(nèi)容的方法
發(fā)表時(shí)間：2023-09-09 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]這篇文章主要介紹了JS實(shí)現(xiàn)改變HTML上文字顏色和內(nèi)容的方法,涉及JS數(shù)學(xué)運(yùn)算與頁面元素動(dòng)態(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)算與頁面元素動(dòng)態(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)行效果截圖：
相關(guān)推薦：
JS實(shí)現(xiàn)加載時(shí)鎖定HTML頁面元素的方法
js獲取html的span標(biāo)簽的值方法(超簡(jiǎn)單)
以上就是JS實(shí)現(xiàn)改變HTML上文字顏色和內(nèi)容的方法的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
