当前位置：首页 > 资讯 > 技术文档

JS实现改变HTML上文字颜色和内容的方法

时间：2020-07-19 15:36 编辑：来源：阅读：
扫一扫，手机访问

摘要：JS实现改变HTML上文字颜色和内容的方法

本文实例讲述了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. 运行效果截图： [img]http://files.jb51.net/file_images/article/201612/20161230141803575.png?20161130141855[/img] [b]PS：这里再提供几款文字特效工具供大家参考：[/b] [b]在线特效文字/彩色文字生成工具： [/b][url=http://tools.jb51.net/aideddesign/colortext]http://tools.jb51.net/aideddesign/colortext[/url] [b]在线生成字体CSS样式工具： [/b][url=http://tools.jb51.net/code/csscreate]http://tools.jb51.net/code/csscreate[/url] [b]仿古书排版文字竖排转换工具： [/b][url=http://tools.jb51.net/transcoding/shupai]http://tools.jb51.net/transcoding/shupai[/url] [b]线条字生成工具： [/b][url=http://tools.jb51.net/transcoding/xiantiaozi]http://tools.jb51.net/transcoding/xiantiaozi[/url] [b]在线钢笔手写体/手写字生成工具： [/b][url=http://tools.jb51.net/aideddesign/shouxiezi]http://tools.jb51.net/aideddesign/shouxiezi[/url] 更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《[url=http://www.1sucai.cn/Special/502.htm]JavaScript切换特效与技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/281.htm]JavaScript遍历算法与技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/472.htm]JavaScript查找算法技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/462.htm]JavaScript动画特效与技巧汇总[/url]》、《[url=http://www.1sucai.cn/Special/439.htm]JavaScript错误与调试技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/297.htm]JavaScript数据结构与算法技巧总结[/url]》及《[url=http://www.1sucai.cn/Special/119.htm]JavaScript数学运算用法总结[/url]》希望本文所述对大家JavaScript程序设计有所帮助。

全部评论(0)

上一篇：JS基于面向对象实现的拖拽库实例
下一篇：javascript自动改变文字大小和颜色的效果的小例子

资讯排行榜
更多>>