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 相关文章推荐
IE JS编程需注意的内存释放问题
Jun 23 Javascript
jQuery选择没有colspan属性的td的代码
Jul 06 Javascript
基于jQuery的动态表格插件
Mar 28 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
Jul 29 Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 Javascript
JQuery实现简单的服务器轮询效果实例
Mar 31 Javascript
浅谈Node 调试工具入门教程
Mar 20 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
Apr 08 Javascript
vue+element实现打印页面功能
May 20 Javascript
详细分析vue响应式原理
Jun 22 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
php 数学运算验证码实现代码
2009/10/11 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
学习ExtJS 访问容器对象
2009/10/07 Javascript
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
javascript修改IMG标签的src问题
2014/03/28 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
jQuery动态添加
2016/04/07 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
JavaScript中的splice方法用法详解
2016/07/20 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
jQuery实现立体式数字动态增加(animate方法)
2016/12/21 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
js操作二进制数据方法
2018/03/03 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
Angular4 Select选择改变事件的方法
2018/10/09 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
原生JavaScript实现五子棋游戏
2020/11/09 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
Django中Forms的使用代码解析
2018/02/10 Python
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
python实现车牌识别的示例代码
2019/08/05 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
区分python中的进程与线程
2020/08/13 Python
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
英国女性时尚鞋类的潮流制造者:Koi Footwear
2018/10/19 全球购物
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
大型公益活动策划方案
2014/08/20 职场文书
2014年学校体育工作总结
2014/12/08 职场文书
法制工作总结2015
2015/07/23 职场文书
Python OpenCV之常用滤波器使用详解
2022/04/07 Python