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


Posted in Javascript onDecember 30, 2016

本文实例讲述了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上文字颜色和内容的方法

Javascript 相关文章推荐
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 06 Javascript
动态加载js和css(外部文件)
Apr 17 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 Javascript
浅谈使用MVC模式进行JavaScript程序开发
Nov 10 Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 Javascript
关于Promise 异步编程的实例讲解
Sep 01 Javascript
JavaScript面试技巧之数组的一些不low操作
Mar 22 Javascript
tracking.js实现前端人脸识别功能
Apr 16 Javascript
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
jquery实现广告上下滚动效果
Mar 04 jQuery
jQuery中页面返回顶部的方法总结
Dec 30 #Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
Dec 30 #Javascript
JS实现全屏的四种写法
Dec 30 #Javascript
js设置文字颜色的方法示例
Dec 30 #Javascript
Node.js的Mongodb使用实例
Dec 30 #Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
Dec 30 #Javascript
原生JS实现图片左右轮播
Dec 30 #Javascript
You might like
改写函数实现PHP二维/三维数组转字符串
2013/09/13 PHP
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
2011/01/27 Javascript
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
jquery struts 验证唯一标识(公用方法)
2013/03/27 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
js针对图片加载失败的处理方法分析
2019/08/24 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
vue项目中使用bpmn-自定义platter的示例代码
2020/05/11 Javascript
[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼
2014/07/07 DOTA
Python实现对比不同字体中的同一字符的显示效果
2015/04/23 Python
python实现关键词提取的示例讲解
2018/04/28 Python
Python时间序列处理之ARIMA模型的使用讲解
2019/04/02 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
python raise的基本使用
2020/09/10 Python
Answear匈牙利:来自全球200多个知名时尚品牌
2017/04/21 全球购物
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
计算机工程学院个人求职信
2013/10/05 职场文书
幼儿园毕业典礼主持词
2014/03/21 职场文书
租房协议书范本
2014/04/09 职场文书
建筑施工安全责任书
2014/07/24 职场文书
爬山的活动方案
2014/08/16 职场文书
毕业设计答辩开场白
2015/05/29 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书