本文摘自PHP中文网,作者不言,侵删。
这篇文章主要介绍了JS实现改变HTML上文字颜色和内容的方法,涉及JS数学运算与页面元素动态操作相关技巧,需要的朋友可以参考下本文实例讲述了JS实现改变HTML上文字颜色和内容的方法。分享给大家供大家参考,具体如下:
1. JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!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>
function changeColor(){
x=document.getElementById( "Id1" );
x.style.color= "Red" ;
}
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!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>
function changeColor(){
x=document.getElementById( "Id1" );
x.style.color= "Red" ;
}
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. 运行效果截图:

相关推荐:
JS实现加载时锁定HTML页面元素的方法
js获取html的span标签的值方法(超简单)
以上就是JS实现改变HTML上文字颜色和内容的方法的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
html align属性是什么含义?html中的align属性设置方法介绍
html的a标签href属性指定相对路径与绝对路径的用法讲解
html代码在编写过程中的一定要注意的三点
html5中关于div与span html块级元素的详细介绍
html如何清除浮动
html的元素水平垂直居中应该怎么设置
html table的直列化格式是什么
怎样让html的下拉菜单提交后保留选中值不返回默认值
span是块元素吗?
xhtml与html之间有什么区别?xhtml与html之间的异同分析
更多相关阅读请进入《js》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » JS实现改变HTML上文字颜色和内容的方法