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.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程序设计有所帮助。
相关推荐
-
js实现复选框的全选和取消全选效果
在很多网站都有这样的功能,当点击一个全选按钮之后,所有的复选框都会被选中,再点击之后会取消全选,功能非常的人性化,可以省却很多人力,下面就简单介绍一下JS如何实现此功能,代码实例如下: 以下是代码: <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://hovertree.com/" /> <titl
-
javascript 注释代码的几种方法总结
javascript注释代码一般有两种方法: 单行注释 多行注释 javascript单行注释 单行注释以"//"开头,到改行的末尾结束.下面是javascript单行注释实例: <html> <head> <title>javascript单行注释</title> <script language="javascript"> <!-- // The first alert is below aler
-
通过AngularJS实现图片上传及缩略图展示示例
通过AngularJS实现图片上传及缩略图展示示例,废话不多说了,具体如下: 从项目中截出的代码 HTML部分: <section> <img src="image/user-tuijian/tuijian_banner.png" /> <div> <form ng-submit="submit_form()"> <input type="text" name="aaa"
-
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
-
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实现简单的二元方程计算器功能示例
本文实例讲述了JS实现简单的二元方程计算器功能.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>二元方程</TITLE> <META NAME="Author" CONTENT=""> <META NAME="
-
原生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图片轮播插件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
-
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
-
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
-
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