这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JS 实现改变 html 上文字颜色和内容的方法, 涉及 JS 数学运算与页面元素动态操作相关技巧, 需要的朋友可以参考下
本文实例讲述了 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:这里再提供几款文字特效工具供大家参考:
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0717/328984.html