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 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
你需要知道的JavsScript可以做什么?
Jun 29 Javascript
才发现的超链接js导致网页中GIF动画停止的解决方法
Nov 02 Javascript
javascript定义函数的方法
Dec 06 Javascript
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
javascript解三阶幻方(九宫格)
Apr 22 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 Javascript
Bootstrap每天必学之表单
Nov 23 Javascript
JS实现星星评分功能实例代码(两种方法)
Jun 09 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
JQuery异步提交表单与文件上传功能示例
Jan 12 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
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
Cappuccino 卡布其诺咖啡之制作
2021/03/03 冲泡冲煮
php iconv() : Detected an illegal character in input string
2010/12/05 PHP
javascript 写类方式之三
2009/07/05 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
JS获取字符对应的ASCII码实例
2017/09/10 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
vue中的mescroll搜索运用及各种填坑处理
2019/10/30 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
Python2.x和3.x下maketrans与translate函数使用上的不同
2015/04/13 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
go和python变量赋值遇到的一个问题
2017/08/31 Python
详解Python发送email的三种方式
2018/10/18 Python
python 多线程重启方法
2019/02/18 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
python队列原理及实现方法示例
2019/11/27 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
台湾演唱会订票网站:StubHub台湾
2019/06/11 全球购物
编辑硕士自荐信范文
2013/11/27 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
有限责任公司股东合作协议书
2014/12/02 职场文书
部队2015年终工作总结
2015/04/02 职场文书
成事在人观后感
2015/06/16 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书
Python基础之操作MySQL数据库
2021/05/06 Python
python实现自定义日志的具体方法
2021/05/28 Python
Java中的继承、多态以及封装
2022/04/11 Java/Android