JavaScript 与 CSS

本文是 CSS tutorial 第二部分的第一章节。第二部分的内容主要是一些css和其他web技术的使用范例。

第二部分的内容主要来向你展示CSS是如何同其他技术进行交互的。但是这样做的目的并不是教你如何使用这些技术，如果你想深入学习，可以查找具体的文档。

换句话说，这些页面是用来向你展示CSS的多种用途的。通过这些页面，你不需要掌握其他技术就可以获取到很多CSS的相关知识。

上一章 (Part I)： Media
下一章： SVG

更多细节
要了解 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 {

      width: 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");
}

window.onload = function() {
    var button = document.querySelector("button");
    button.addEventListener("click", changeBg);
    console.log(button);
}

用浏览器打开HTML文件并点击按钮。

这里有在线的示例：Here is the Live Example

JavaScript demonstration

重要提示 ：

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.

下一步做什么呢？

如果你对本页内容有疑问，或者有其他想法，欢迎到 Discussion 页面进行讨论。

在示例中，尽管只有button元素使用了脚本代码，但是HTML文档还是i需要外链一个脚本文件。Mozilla 对CSS做了扩展，让它可以为选择元素引用JavaScript代码 (也可以使内容或者其他样式表文件) 。下篇文章会对此有详细说明： XBL bindings

JavaScript 与 CSS

相关知识： JavaScript

范例： 一个JavaScript的实例

下一步做什么呢？

范例：一个JavaScript的实例