这篇文章主要介绍了js实现改变html上文字颜色和内容的方法,涉及js数学运算与页面元素动态操作相关技巧,需要的朋友可以参考下
本文实例讲述了js实现改变html上文字颜色和内容的方法。分享给大家供大家参考，具体如下：
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. 运行效果截图：
相关推荐：
js实现加载时锁定html页面元素的方法
js获取html的span标签的值方法(超简单)
以上就是js实现改变html上文字颜色和内容的方法的详细内容。