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. 运行效果截图：

PS：这里再提供几款文字特效工具供大家参考：

在线特效文字/彩色文字生成工具：
http://tools./aideddesign/colortext

在线生成字体CSS样式工具：
http://tools./code/csscreate

仿古书排版文字竖排转换工具：
http://tools./transcoding/shupai

线条字生成工具：
http://tools./transcoding/xiantiaozi

在线钢笔手写体/手写字生成工具：
http://tools./aideddesign/shouxiezi

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

# JS # HTML # 文字 # 颜色 # 内容 # JS数组返回去重后数据的方法解析 # js实现复选框的全选和取消全选效果 # 原生JS实现在线问卷调查投票特效 # 通过AngularJS实现图片上传及缩略图展示示例 # 非常优秀的JS图片轮播插件Swiper的用法 # JS实现简单的二元方程计算器功能示例 # Angularjs使用ng-repeat中$even和$odd属性的注意事项 # Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法 # angularjs中ng-attr的用法详解 # JS实现类似百叶窗下拉菜单效果 # javascript 注释代码的几种方法总结 # 相关内容 # 遍历 # 感兴趣 # 数据结构 # 给大家 # 更多关于 # 所述 # 几款 # 程序设计 # 再提 # 转换工具 # 讲述了 # Author # EditPlus # Description # Keywords # CONTENT # Day # TITLE # Generator

返回目录在线咨询

上一篇：php增删改查报错1062怎么办_主键冲突解决方法【技巧】
下一篇：GoDaddy提供的网站建设工具有哪些优势？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求