相关知识： JavaScript
JavaScript是一种编程语言，它被广泛用来实现web站点和应用中的交互效果。
JavaScript可以同样式进行交互，你可以通过编写程序来动态改变文档上元素的样式。
有三种方法可以实现这样的效果：
- 控制样式表—可以添加、删除、修改样式表。
- 控制样式规则—可以添加、删除、修改样式规则。
- 控制DOM中的单个元素—可以不依赖样式表来修改元素样式。
| 要了解 JavaScript的更多细节，可以到这个wiki JavaScript 。 |
范例： 一个JavaScript的实例
新建一个doc5.html的页面，把下面的代码复制粘贴进入，注意要保证保存了所有的代码：
<!DOCTYPE html> <html> <head> <title>Mozilla CSS Getting Started - JavaScript demonstration</title> <link rel="stylesheet" type="text/css" href="style5.css" /> <script type="text/javascript" src="script5.js"></script> </head> <body> <h1>JavaScript sample</h1> <div id="square"></div> <button>Click Me</button> </body> </html>
新建一个CSS文件style5.css，复制粘贴下面的样式代码到文件中：
#square {
20em;
height: 20em;
border: 2px inset gray;
margin-bottom: 1em;
}
button {
padding: .5em 2em;
}
新建一个JavaScript文件script5.js，复制粘贴下面的代码到文件中：
// JavaScript demonstration
var changeBg = function (event) {
console.log("method called");
var me = event.target
, square = document.getElementById("square");
square.style.backgroundColor = "#ffaa44";
me.setAttribute("disabled", "disabled");
setTimeout(function () { clearDemo(me) }, 2000);
}
function clearDemo(button) {
var square = document.getElementById("square");
square.style.backgroundColor = "transparent";
button.removeAttribute("disabled");
}
var button = document.querySelector("button");
button.addEventListener("click", changeBg);
console.log(button);
用浏览器打开HTML文件并点击按钮。
这里有在线的示例：Here is the Live Example
|
|
重要提示 ：
- HTML文档中外链了CSS文件和JavaScript文件。
- 脚本直接修改了DOM元素的样式，通过修改属性值来改变按钮的样式。
- 在JavaScript中
document.getElementById("square")在功能上同 CSS 选择器#square的功能是类似的。 - 在 JavaScript代码中,
backgroundColor对应于CSS 属性background-color。因为JavaScript中不允许在命名中出现中划线，所以采用了驼峰式,的写法来做替代。 - 浏览器针对button有内置的CSS规则
button[disabled="true"]，这会导致按钮在不可点击状态下的显示样式跟预期有出入。
| 修改脚本代码实现如下效果：当颜色改变的时候让方块跳至右侧20em的距离，然后再恢复到原来的位置。 |
这里有一个解决方案示例：See a solution to this challenge.