blob: 1f53ff70ba59bf617f1b1e6cd04328429ddb52c9 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
|
---
title: JavaScript 与 CSS
slug: Web/Guide/CSS/Getting_started/JavaScript
translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
translation_of_original: Web/Guide/CSS/Getting_started/JavaScript
---
<p>{{ CSSTutorialTOC() }}</p>
<p>本文是 <a href="/en/CSS/Getting_Started" title="https://developer.mozilla.org/en/CSS/Getting_Started">CSS tutorial</a> 第二部分的第一章节。第二部分的内容主要是一些css和其他web技术的使用范例。 </p>
<p>第二部分的内容主要来向你展示CSS是如何同其他技术进行交互的。但是这样做的目的并不是教你如何使用这些技术，如果你想深入学习，可以查找具体的文档。</p>
<p>换句话说，这些页面是用来向你展示CSS的多种用途的。通过这些页面，你不需要掌握其他技术就可以获取到很多CSS的相关知识。</p>
<p>上一章 (Part I)： <a href="/en/CSS/Getting_Started/Media" title="https://developer.mozilla.org/en/CSS/Getting_Started/Media">Media</a><br>
下一章： <a href="/en/CSS/Getting_Started/SVG_graphics" title="https://developer.mozilla.org/en/CSS/Getting_Started/SVG_graphics">SVG</a></p>
<h3 id="Information:_JavaScript" name="Information:_JavaScript">相关知识： JavaScript</h3>
<p>JavaScript是一种编程语言，它被广泛用来实现web站点和应用中的交互效果。</p>
<p>JavaScript可以同样式进行交互，你可以通过编写程序来动态改变文档上元素的样式。 </p>
<p>有三种方法可以实现这样的效果：</p>
<ul>
<li>控制样式表—可以添加、删除、修改样式表。</li>
<li>控制样式规则—可以添加、删除、修改样式规则。</li>
<li>控制DOM中的单个元素—可以不依赖样式表来修改元素样式。</li>
</ul>
<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em; width: 100%;">
<caption>更多细节</caption>
<tbody>
<tr>
<td>要了解 JavaScript的更多细节，可以到这个wiki <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a> 。</td>
</tr>
</tbody>
</table>
<h3 id="Action:_A_JavaScript_demonstration" name="Action:_A_JavaScript_demonstration">范例： 一个JavaScript的实例</h3>
<p>新建一个<code>doc5.html的页面，把下面的代码复制粘贴进入，注意要保证保存了所有的代码：</code></p>
<div style="width: 48em;">
<pre class="brush: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>
</pre>
</div>
<p>新建一个CSS文件<code>style5.css</code>，复制粘贴下面的样式代码到文件中：</p>
<div style="width: 48em;">
<pre class="brush:css;"> #square {
width: 20em;
height: 20em;
border: 2px inset gray;
margin-bottom: 1em;
}
button {
padding: .5em 2em;
}</pre>
</div>
<p>新建一个JavaScript文件<code>script5.js</code>，复制粘贴下面的代码到文件中：</p>
<div style="width: 48em;">
<pre class="brush: 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);
}</pre>
</div>
<p>用浏览器打开HTML文件并点击按钮。</p>
<p>这里有在线的示例：<a href="http://jsfiddle.net/diwanshi/Y4VPK/4/embedded/result/">Here is the Live Example</a></p>
<table>
<tbody>
<tr>
<td style="padding-right: 2em;">
<table style="border: 2px outset #3366bb; padding: 0 1em .5em .5em;">
<tbody>
<tr>
<td>
<p><strong>JavaScript demonstration</strong></p>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table style="border: 2px outset #3366bb; padding: 0 1em .5em .5em;">
<tbody>
<tr>
<td>
<p><strong>JavaScript demonstration</strong></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div class="note"><strong>重要提示</strong> ：
<ul>
<li>HTML文档中外链了CSS文件和JavaScript文件。</li>
<li>脚本直接修改了DOM元素的样式，通过修改属性值来改变按钮的样式。</li>
<li>在JavaScript中<code>document.getElementById("square")</code> 在功能上同 CSS 选择器 <code>#square的功能是类似的。</code></li>
<li>在 JavaScript代码中, <code>backgroundColor</code> 对应于CSS 属性<code>background-color</code>。因为JavaScript中不允许在命名中出现中划线，所以采用了驼峰式,的写法来做替代。</li>
<li>浏览器针对button有内置的CSS规则 <code>button{{ mediawiki.external('disabled=\"true\"') }}</code> ，这会导致按钮在不可点击状态下的显示样式跟预期有出入。</li>
</ul>
</div>
<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: .5em; padding: 1em;">
<caption>挑战</caption>
<tbody>
<tr>
<td>修改脚本代码实现如下效果：当颜色改变的时候让方块跳至右侧20em的距离，然后再恢复到原来的位置。</td>
</tr>
</tbody>
</table>
<p>这里有一个解决方案示例：<a href="/en/CSS/Getting_Started/Challenge_solutions#JavaScript" title="https://developer.mozilla.org/en/CSS/Getting_Started/Challenge_solutions#JavaScript">See a solution to this challenge.</a></p>
<h3 id="下一步做什么呢？">下一步做什么呢？</h3>
<p>如果你对本页内容有疑问，或者有其他想法，欢迎到 <a href="/Talk:en/CSS/Getting_Started/JavaScript" title="Talk:en/CSS/Getting_Started/JavaScript">Discussion</a> 页面进行讨论。</p>
<p>在示例中，尽管只有button元素使用了脚本代码，但是HTML文档还是i需要外链一个脚本文件。Mozilla 对CSS做了扩展，让它可以为选择元素引用JavaScript代码 (也可以使内容或者其他样式表文件) 。下篇文章会对此有详细说明： <strong><a href="/en/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL bindings</a></strong></p>
|
