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

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

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

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

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

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

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

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

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

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

时间: 2016-12-27

javascript 注释代码的几种方法总结

javascript注释代码一般有两种方法: 单行注释 多行注释 javascript单行注释 单行注释以"//"开头,到改行的末尾结束.下面是javascript单行注释实例: <html> <head> <title>javascript单行注释</title> <script language="javascript"> <!-- // The first alert is below aler

JS实现类似百叶窗下拉菜单效果

废话不多说了,直接给大家贴代码了,具体代码如下所示: function leftmove(){ var oLeft_ul=document.getElementById('left_ul'); var aLeft_li=oLeft_ul.children;//获得左侧ul下的第一个子集li var aleft_ul_hidden=oLeft_ul.getElementsByTagName('ul'); var aleft_span_hidden=oLeft_ul.getElementsByTag

JS实现简单的二元方程计算器功能示例

本文实例讲述了JS实现简单的二元方程计算器功能.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>二元方程</TITLE> <META NAME="Author" CONTENT=""> <META NAME="

通过AngularJS实现图片上传及缩略图展示示例

通过AngularJS实现图片上传及缩略图展示示例,废话不多说了,具体如下: 从项目中截出的代码 HTML部分: <section> <img src="image/user-tuijian/tuijian_banner.png" /> <div> <form ng-submit="submit_form()"> <input type="text" name="aaa"

非常优秀的JS图片轮播插件Swiper的用法

最近在一个微信公众号中用到了swiper图片轮播插件.接下来为大家介绍插件的用法 首先需要下载Swiper 1:加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件. <!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href="path/to/swiper.min.css"> </head> <body

JS数组返回去重后数据的方法解析

话不多说,请看代码: function removeRepeat(data) { var temp = ""; var mainData = []; for (var i = 0; i < data.length; i++) { if (!data[i].parent) { temp = data[i]; for (var j = 0; j < data.length; j++) { if (temp.DeliveryType == data[j].DeliveryType

js实现复选框的全选和取消全选效果

在很多网站都有这样的功能,当点击一个全选按钮之后,所有的复选框都会被选中,再点击之后会取消全选,功能非常的人性化,可以省却很多人力,下面就简单介绍一下JS如何实现此功能,代码实例如下: 以下是代码: <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://hovertree.com/" /> <titl

Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法

前言 在用AngularJS期间, 经常用到ng-repeat, 业务中有时需要在异步获取数据并用ng-repeat遍历渲染完页面后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己动手写.有经验的同学都应该知道,在ng-repeat模板实例内部会暴露出一些特殊属性$index/$first/$middle/$last/$odd/$even,$index会随着每次遍历(从0开始)递增,当遍历到最后一个时,$last的值为true,so,通过判断$last

angularjs中ng-attr的用法详解

前言 html中的属性很多,同样可以使用angularjs来定义: ng-attr-(suffix)=只能使用变量定义 <div title="angularjs中的title">title</div> <div ng-attr-title="angularjs中的title">title</div><!--这样写显示不出来标题--> <div ng-attr-title="'angular

Angularjs使用ng-repeat中$even和$odd属性的注意事项

前言 JavaScript中数组的索引是从0开始的,因此我们再取奇偶的时候需要用!$even和!$odd来将$even和$odd的布尔值反转 下面给出一个实例: 使用$odd和$even来制作一个红蓝相间的列表 <!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <meta charset="utf-8"> <title>ng-

原生JS实现在线问卷调查投票特效

效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS+CSS实现投票效果</title> <link rel="stylesheet" href="http://hovertree.com/texiao/js/24/style.css"

原生js实现图片轮播特效

本文特意为原生js实现图片轮播特效代码做了下总结,分享给大家供大家参考,欢迎大家学习. 运行效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>最简单的轮播广告</title> <style> body, div, ul, li { margin: 0; padding: 0

使用原生JS实现弹出层特效

创建遮罩层 复制代码 代码如下: _createCover: function() {       var newMask = document.createElement("div");       newMask.id = this._mark;       newMask.style.position = "absolute";       newMask.style.zIndex = "100";       _scrollWidth =

原生js轮播特效

作为一名前端工程师,手写轮播图应该是最基本掌握的技能,以下是我自己原生js写的轮播,欢迎指点批评: 首先css代码 a{text-decoration:none;color:#3DBBF5;} *{ margin: 0; padding: 0; } .wrapper{ width: 400px; height: 300px; margin: 100px auto; } #lunbo{ position: relative; overflow: hidden; } #list{ position:

原生js与jQuery实现简单的tab切换特效对比

tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形.使用面非常广,下面我们用两种方法简单实现之. 首先,构建页面元素.页签的可点击部分我们通常用列表来承载,包括ul和ol,我们这里让页签呈横向分布,所以需要使之向左浮动.而页签内容部分使用div承载即可.另外,我们需要对具有共性的元素统一控制样式和行为,所以就有了下面的dom结构: <div id="main"> <ul id="tabbar" class=&

原生js和jQuery写的网页选项卡特效对比

总的来说思路比较简单,就是先获取节点,然后对节点进行相应的处理,下面是完整的页面代码: 原生js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>原生js tab</tit

原生JS实现旋转木马式图片轮播插件

本人自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的,淡入淡出切换的.现在想做一个酷一点的放在博客或者个人网站,到时候可以展示自己的作品.逛了一下慕课网,发现有个旋转木马的jquery插件课程,有点酷酷的,于是就想着用原生JS封装出来.做起来才发现,没有自己想象中的那么容易...不啰嗦了,讲解一下实现过程吧. 二.效果 由于自己的服务器还没弄好.在线演示不了(ORZ...),只能放一张效果图了. 从图片上还是可以看出大概效果的,我就不多说了.想看

原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)

经常看到网页里图片渐变显示,自己写一个. 原理很简单就是修改元素的css透明度. 在线预览效果:http://jsfiddle.net/dtdxrk/BHUp9/embedded/result/ 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <

jQuery实现隔行变色的方法分析(对比原生JS)

本文实例分析了jQuery实现隔行变色的方法.分享给大家供大家参考,具体如下: 原生js: var tab = document.getElementByTagName('table')[0]; var tr = tab.getElementByTagName('tr'); for(var i=0;i<tr.length;i++){ if(i%2==0){ tr[i].style.background="orange"; }else{ tr[i].style.background

基于JQuery和原生JavaScript实现网页定位导航特效

慕课网的一个小课程,练习了一遍,不足之处,欢迎指正(照片在本地,大家可以着重看代码哈): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>爱淘气购物网-JQuery网页定位导航特效</title> <style> /*All tag*/ html, body, div, ul, li, img