From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../css/getting_started/javascript/index.html | 171 +++++++++++++++++++++ 1 file changed, 171 insertions(+) create mode 100644 files/zh-cn/web/guide/css/getting_started/javascript/index.html (limited to 'files/zh-cn/web/guide/css/getting_started/javascript/index.html') diff --git a/files/zh-cn/web/guide/css/getting_started/javascript/index.html b/files/zh-cn/web/guide/css/getting_started/javascript/index.html new file mode 100644 index 0000000000..c5ccd6e901 --- /dev/null +++ b/files/zh-cn/web/guide/css/getting_started/javascript/index.html @@ -0,0 +1,171 @@ +--- +title: JavaScript 与 CSS +slug: Web/Guide/CSS/Getting_started/JavaScript +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +--- +

{{ CSSTutorialTOC() }}

+ +

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

+ +

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

+ +

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

+ +

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

+ +

相关知识： JavaScript

+ +

JavaScript是一种编程语言，它被广泛用来实现web站点和应用中的交互效果。

+ +

JavaScript可以同样式进行交互，你可以通过编写程序来动态改变文档上元素的样式。 

+ +

有三种方法可以实现这样的效果：

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

+
+ 		+ + + + + + +
+

JavaScript demonstration

+
+
+ +
重要提示 ： + + +
+ + + + + + + + +
挑战
修改脚本代码实现如下效果：当颜色改变的时候让方块跳至右侧20em的距离，然后再恢复到原来的位置。
+ +

这里有一个解决方案示例：See a solution to this challenge.

+ +

下一步做什么呢？

+ +

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

+ +

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

-- cgit v1.2.3-54-g00ecf