diff --git a/files/zh-cn/games/introduction_to_html5_game_development/index.html b/files/zh-cn/games/introduction_to_html5_game_development/index.html index 5758856b642864..223f57ce7228fa 100644 --- a/files/zh-cn/games/introduction_to_html5_game_development/index.html +++ b/files/zh-cn/games/introduction_to_html5_game_development/index.html @@ -10,7 +10,7 @@
data
URIsatob()
and btoa()
using TypedArray
s and UTF-8ArrayBuffer
Chrome 浏览器是 Google 开发的一个免费网络{{glossary("浏览器")}}. 它基于开源项目 Chromium。在 Chromium wiki 中描述了它们之间的差异。Chrome 维护使用自己的渲染引擎:开源引擎{{glossary("WebKit")}}中 WebCore 组件的一个分支 {{glossary("Blink")}} 。注意:IOS 版本的 Chrome 使用了 IOS 平台的渲染引擎,而非 {{glossary("Blink")}}。
-如果您只想使用 Chrome,请点击下面的链接。
diff --git a/files/zh-cn/glossary/localization/index.html b/files/zh-cn/glossary/localization/index.html index 1b9ea47611ddbc..665b0de3062010 100644 --- a/files/zh-cn/glossary/localization/index.html +++ b/files/zh-cn/glossary/localization/index.html @@ -9,7 +9,7 @@实际上,如果我在{{glossary("JavaScript")}} 程序中划分两个变量,结果可能是 NaN,它在 JavaScript 中被预定义为“undefined”。于是这个除法可能中断程序。现在,如果这个计算是一个大规模算法的一小部分,那么确定错误实际发生的地方真的很困难。幸运的是,由于结果将是 NaN,我知道我的除数可能会变为 0,我可以设置防止任何此类计算的测试条件,或通知我发生的位置。
-在计算机编程语言中,语句 是一行任务指令的代码。每个程序都包含若干语句。
-前 128 个 UTF-8 字符与前 128 个 ASCII 字符 (编号为 0-127) 精确匹配,这意味着现有的 ASCII 文本已经是有效的 UTF-8。所有其他字符都使用 2 到 4 个字节。每个字节都有一些用于编码目的的保留位。由于非 ASCII 字符需要一个以上的字节来存储,如果字节被分隔而不重组,那么它们就会有损坏的风险。
-Tim Berners-Lee 在发明 Web 之后不久就创建了 {{Glossary("W3C")}}(万维网联盟),进一步规范和开发 Web。该联盟由核心 Web 兴趣小组组成,如网页浏览器开发人员,政府机构,研究人员和大学。其使命包括教育和外联。
-2000 年底,国际 W3C(World Wide Web Consortium) 组织公布发行了 XHTML 1.0 版本。XHTML 1.0 是一种在 HTML 4.0 基础上优化和改进的的新语言,目的是基于 XML 应用。XHTML 是一种增强了的 HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。
diff --git a/files/zh-cn/learn/css/css_layout/grid_skills/index.html b/files/zh-cn/learn/css/css_layout/grid_skills/index.html index 9598a607367de5..509bf106a597a0 100644 --- a/files/zh-cn/learn/css/css_layout/grid_skills/index.html +++ b/files/zh-cn/learn/css/css_layout/grid_skills/index.html @@ -63,7 +63,7 @@评估或进一步的工作目的,可以 下载此任务的源文件 在你自己的编辑器或使用线编辑器。
-此例中,你需要同时使用 Grid Layout 和 Flexbox 来完成下图所示的任务。这个过程中你不需要通过改变 HTML 来完成。
diff --git a/files/zh-cn/learn/css/howto/css_faq/index.html b/files/zh-cn/learn/css/howto/css_faq/index.html index 5ba9cd2205e53b..4d5902574edd92 100644 --- a/files/zh-cn/learn/css/howto/css_faq/index.html +++ b/files/zh-cn/learn/css/howto/css_faq/index.html @@ -35,11 +35,11 @@为了使浏览器渲染样式文件,CSS 样式表必须用 text/css 的 MIME。如果 Web 服务器不服务于这种类型,则 CSS 也不会被应用。
-HTML元素可以拥有一个id/或class属性。 id属性为元素指定应用一个有效名称,只能有一个具有该名称的元素。class属性指定一个类名的元素,而这个名称可以被页面内的许多元素被使用。 CSS允许你可以对特定的id和/或类名的元素应用样式。
@@ -52,17 +52,17 @@
最初 CSS 没有提供“defaule”关键字和还原默认属性的值,唯一途径是显式地重新声明该属性。
与 CSS2 相比,已经发生了改变。 关键字 initial 现在是一个有效的 CSS 属性。它将给定的 CSS 属性值重置为默认值。
-CSS 不允许这样做。(See Eric Meyer's note about the Working Group's stance). 但是,将多个类分配给单个元素,可以提供相同的效果。
-HTML 元素可以通过列出的类属性,用空格分开它们。
@@ -78,11 +78,11 @@如果相同的属性中声明的规则,解决冲突首先通过特异性,然后根据 CSS 声明的顺序。在 class 属性类的顺序是不相关的。
-在语法上正确的样式规则可能在某些情况下不适用。你可以使用 DOM Inspector's CSS Style Rules 调试这类问题。 下面列出了最常见的忽略样式规则的实例:
-The way CSS styles are applied to HTML elements depends also on the elements hierarchy. It is important to remember that a rule applied to a descendent overrides the style of the parent, in spite of any specificity or priority of CSS rules.
@@ -97,7 +97,7 @@In case of complex HTML hierarchies, if a rule seems to be ignored, check if the element is inside another element with a different style.
-In CSS stylesheets, order is important. If you define a rule and then you re-define the same rule, the last definition is used.
@@ -116,7 +116,7 @@Using shorthand properties for defining style rules is good because it uses a very compact syntax. Using shorthand with only some attributes is possible and correct, but it must be remembered that undeclared attributes are automatically reset to default. This means that a previous rule for a single attribute could be implicitly overridden.
@@ -136,7 +136,7 @@*
选择器*
选择器The *
wildcard selector refers to any element, and it has to be used with particular care.
*<
The use of the * selector should be minimized as it is a slow selector, especially when not used as the first element of a selector. Its use should be avoided as much as possible.
-CSS 中的优先级
+CSS 中的优先级
When multiples rules apply to a certain element, the rule chosen depends on its style specificity. Inline style (in HTML style
attributes) comes first, followed by ID selectors, then class selectors and eventually element-name selectors.
@@ -167,9 +167,9 @@ CSS 中的优先级
The rules are more complicated when the selector has multiple parts. More detailed information about how selector specificity is calculated can be found in the CSS 2.1 Specification chapter 6.4.3
- -moz-*, -ms-*, -webkit-*, -o-* 以及 -khtml-* 属性有什么用?
+ -moz-*, -ms-*, -webkit-*, -o-* 以及 -khtml-* 属性有什么用?
-These properties, called prefixed properties, are extension to the CSS standard. They are used to use experimental and non-standard features without polluting the regular namespace, preventing future incompatibilities to arise when the standard is extended.
+These properties, called prefixed properties, are extension to the CSS standard. They are used to use experimental and non-standard features without polluting the regular namespace, preventing future incompatibilities to arise when the standard is extended.
The use of such properties on production websites is not recommended. If nevertheless needed, you are hinted to make a plan for the website evolution: these prefixed properties can be modified or even suppressed when the standard evolve.
diff --git a/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_1/index.html b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_1/index.html
index b2bfa229e8a899..c3b1bb52d15d30 100644
--- a/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_1/index.html
+++ b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_1/index.html
@@ -9,9 +9,9 @@
---
这是第一个如果构建自定义表单小部件的代码解释事例。
-基本状态
+基本状态
-HTML
+HTML
<div class="select">
<span class="value">Cherry</span>
@@ -24,7 +24,7 @@ HTML
</ul>
</div>
-CSS
+CSS
/* --------------- */
/* Required Styles */
@@ -146,9 +146,9 @@ 基本状态结果
{{ EmbedLiveSample('Basic_state', 120, 130) }}
-活动状态
+活动状态
-HTML
+HTML
<div class="select active">
<span class="value">Cherry</span>
@@ -161,7 +161,7 @@ HTML
</ul>
</div>
-CSS
+CSS
/* --------------- */
/* Required Styles */
@@ -282,9 +282,9 @@ 活动状态结果
{{ EmbedLiveSample('Active_state', 120, 130) }}
-展开状态
+展开状态
-HTML
+HTML
<div class="select active">
<span class="value">Cherry</span>
@@ -297,7 +297,7 @@ HTML
</ul>
</div>
-CSS
+CSS
/* --------------- */
/* Required Styles */
diff --git a/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_2/index.html b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_2/index.html
index f755de58e61548..790223ac75d42d 100644
--- a/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_2/index.html
+++ b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_2/index.html
@@ -9,7 +9,7 @@
---
这是解释 如何构建自定义表单小部件的第二个示例。
-使用 JS
+使用 JS
HTML 内容
@@ -173,7 +173,7 @@ 使用 JS 的结果
{{ EmbedLiveSample('JS', 120, 130) }}
-不使用 JS
+不使用 JS
HTML 内容
diff --git a/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_3/index.html b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_3/index.html
index 7e1906cdc57c5e..9eabb856220420 100644
--- a/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_3/index.html
+++ b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_3/index.html
@@ -9,7 +9,7 @@
---
这是解释 如何构建自定义表单小部件 的第三个示例。
-Change states
+Change states
HTML 内容
diff --git a/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_4/index.html b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_4/index.html
index 0219ad6218a78b..75e4f40f5638c1 100644
--- a/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_4/index.html
+++ b/files/zh-cn/learn/forms/how_to_build_custom_form_controls/example_4/index.html
@@ -11,7 +11,7 @@
---
这是解释 如何构建自定义表单小部件 的第四个示例。
-改变状态
+改变状态
HTML 内容
diff --git a/files/zh-cn/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/zh-cn/learn/getting_started_with_the_web/publishing_your_website/index.html
index 9df0cbbc92f7bf..5446024a816aa4 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/publishing_your_website/index.html
+++ b/files/zh-cn/learn/getting_started_with_the_web/publishing_your_website/index.html
@@ -38,7 +38,7 @@ 获取主机服务和域名
-寻找主机服务和域名的建议
+寻找主机服务和域名的建议
- 我们不会推荐任何商业化的主机公司。要找到主机公司和域名注册商,只需要搜索 "网络主机服务" 和 "域名" 来找到一家出售域名的公司。所有这种类型的公司都允许你查看你想要的域名是否可用。
diff --git a/files/zh-cn/learn/getting_started_with_the_web/the_web_and_web_standards/index.html b/files/zh-cn/learn/getting_started_with_the_web/the_web_and_web_standards/index.html
index f0bf107e620569..9a85de2ae1e867 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/the_web_and_web_standards/index.html
+++ b/files/zh-cn/learn/getting_started_with_the_web/the_web_and_web_standards/index.html
@@ -37,7 +37,7 @@ Web 标准
Web 标准是由标准机构创建的——这些机构邀请不同技术公司的人员聚集在一起,并就如何以最佳方式实现所有用例达成共识。W3C 是最著名的 Web 标准组织,但还有其他组织,例如WHATWG(负责 HTML 语言的现代化),ECMA(发布基于 JavaScript 的 ECMAScript 标准),Khronos(发布 3D 图形技术,例如 Web GL)等。
-“开放”标准
+“开放”标准
Web 标准的关键方面之一,TimBL 和 W3C 从一开始就认同的一点,Web(和 Web 技术)应该自由地贡献和使用,并且不受专利/许可的约束。因此,任何人都可以编写代码免费建立网站,并且任何人都可以为编写规范的标准创建过程做出贡献。
@@ -45,7 +45,7 @@ “开放”标准
这一点允许 Web 保持免费可用,使其成为公共资源。
-不要破坏 Web
+不要破坏 Web
关于开放式 Web 标准,您将听到的另一句话是“不要破坏 Web”——这句话是说,引入的任何新 Web 技术都应向后兼容以前的版本(即旧网站仍将继续工作),并向前兼容(将未来的技术与我们目前拥有的技术兼容)。在阅读此处介绍的学习材料时,您将开始学习如何通过一些非常精妙的设计和做法来实现这一点。
@@ -162,7 +162,7 @@ Web 最佳做法
- 隐私与安全(Privacy & Security) 这两个概念相关但不同。隐私是指允许人们私下从事其业务,而不是监视他们或收集您绝对不需要的更多数据。安全性是指以安全的方式构建您的网站,以使恶意用户无法从您或您的用户那里窃取信息。
-See also
+See also
- History of the World Wide Web
diff --git a/files/zh-cn/learn/html/howto/author_fast-loading_html_pages/index.html b/files/zh-cn/learn/html/howto/author_fast-loading_html_pages/index.html
index 2e36e53472e23e..14d3cc458cff45 100644
--- a/files/zh-cn/learn/html/howto/author_fast-loading_html_pages/index.html
+++ b/files/zh-cn/learn/html/howto/author_fast-loading_html_pages/index.html
@@ -14,9 +14,9 @@
页面加载性能的优化不仅仅是针对那些带宽有限的拨号上网或移动设备用户需要看的内容,对于提供给宽带用户访问的内容同样重要并且可以导致巨大的提升,哪怕对于那些拥有最快网速的访客。
-Tips
+Tips
-减小页面的大小
+减小页面的大小
直至今日,页面的大小仍是页面加载性能的最重要因素。
@@ -24,7 +24,7 @@ HTML Tidy 这类的工具可以从有效的 HTML 源文件中自动截去行首空格和额外的空行,其它工具则可以通过重新格式化源代码来压缩 JavaScript 或者通过混淆源码将长标识符替换为短标识符来减小文件大小。
-最小化文件数量
+最小化文件数量
减少一个页面引用的文件数量可以降低在下载一个页面的过程中需要的HTTP请求数量,从而减少这些请求的收发时间。
@@ -44,7 +44,7 @@ 使用 CDN
- Understanding CDNs
-减少域名查找
+减少域名查找
每个独立的域名都会消耗 DNS 查找的时间,页面加载时间会随着独立域名数量、CSS 链接数量、JavaScript 还有图片资源的数量增加而增加。
@@ -53,7 +53,7 @@ 减少域名查找
-缓存重用的内容
+缓存重用的内容
确保任何内容可以被缓存,并且拥有一个合理的有效期。
@@ -70,17 +70,17 @@ 缓存重用的内容<
- Caching in HTTP
-高效地排列页面组件
+高效地排列页面组件
在页面最初显示时,会首先下载页面内容以及所需的 CSS 和 JavaScript,这样在页面加载时用户可以最快获得外观的反馈。由于内容通常都是文本,有利于在传输过程中压缩,因此给用户以更快的响应。
页面中任何具有动态特性的资源需要在页面被完全加载后才可以使用,所以最好在初始化时关闭动态特性(disable dynamic features),等页面加载完后再打开它。这样 JavaScript 就会在网页内容之后才加载,有助于提升页面加载的整体表现。
-减少内联脚本的数量
+减少内联脚本的数量
内联脚本在页面加载过程中消耗很多资源,因为解析器认为内联脚本会改变页面结构。通常,尽量少的使用内联脚本和减少用document.write()
来输出内容,在一定情况下可以加速整体页面的载入。现在浏览器中一般使用现代的 W3C DOM 方法操作页面内容,优于使用document.write()
的传统方法。
-使用现代 CSS 和合法标记
+使用现代 CSS 和合法标记
使用现代 CSS 减少标记(markup)的用量,可以减少对(spacer)图片的需求。在布局方面,图片通常可以用风格化的文本(text)来替代,这样会“节省”许多资源。
@@ -88,7 +88,7 @@
再者,合法标记可以让那些给你的网站做预处理的工具功能最大化。例如,HTML Tidy 可以移除空白(whitespace)和可选的末尾标记(ending tags);然而,在有严重的错误标记的网页中这些工具便无法工作。
-给内容分块
+给内容分块
使用 table 布局是一种不应该再采用的传统方法,而应运用 floats, positioning, flexbox, 或 grids 来布局。
@@ -120,7 +120,7 @@ Minify and compress your images
Large images cause your page to take more time to load. Consider compressing your images before adding them to your page, using compression features built into image-manipulation tools such as Photoshop, or using a specialized tool such as Compress Jpeg or Tiny PNG,.
-指定图像和表格的大小
+指定图像和表格的大小
如果浏览器可以即时决定你的照片(images)和表格(tables)宽高,它在展示网页时就不必进行内容重新排版。这不仅可以加速网页的显示,还能在网页完成加载的过程中防止恼人的布局改变。因此,图片的 height
和 width
应尽可能确定下来。
@@ -130,7 +130,7 @@ <col>
和 <colgroup>
元素来指定列宽。
-为使页面设计得到极大提升,应确保在工程中指定一个合理的 user-agent。不要奢求你的内容在所有浏览器中都完美的展现,特别是在那些低版本的浏览器中。
@@ -146,7 +146,7 @@注意:这些特性在页面第一次加载时会有所帮助,你可以这样用但不能指靠它在所有的浏览器中起作用。如果你遵循指南(guidelines)写出了非常优秀的 JavaScript 代码,也不必要再去修改它了。
-· {{htmlelement('html')}}
在 FireFox 49.0.2(其他版本也有可能) 中,javascript 将无法读出包含 1022 个及以上字符的 data 属性 (EcmaScript 4).
-本篇文章提供了更一步的技术来使表格的可访问性尽可能地提高。
-屏幕阅读设备会识别所有的标题,然后在它们和它们所关联的单元格之间产生编程关联。列和行标题的组合将标识和解释每个单元格中的数据,以便屏幕阅读器用户可以类似于视力正常的用户的操作来理解表格。
我们之前的文章就提到过这一点,可见 Adding headers with <th> elements.
-本篇文章的一个新话题是 {{htmlattrxref("scope","th")}} 属性,可以添加在<th>
元素中,用来帮助屏幕阅读设备更好地理解那些标题单元格,这个标题单元格到底是列标题呢,还是行标题。比如:回顾我们之前的支出记录示例,你可以明确地将列标题这样定义:
scope
还有两个可选的值: colgroup
和 rowgroup
。这些用于位于多个列或行的顶部的标题。如果你回顾这部分文章开始部分的 "Items Sold August 2016" 表格。你会看到 "Clothes" 单元格在"Trousers", "Skirts", 和 "Dresses" 单元格的上面。这几个单元格都应该被标记为 (<th>
),但是 "Clothes" 是一个位于顶部且定义了其他三个子标题的标题。 因此 "Clothes" 应该有一个 scope="colgroup"
属性,而另外三个子标题应该有 scope="col"
属性。
如果要替代 scope
属性,可以使用 {{htmlattrxref("id")}} 和 {{htmlattrxref("headers", "td")}} 属性来创造标题与单元格之间的联系。使用方法如下:
JavaScript 是一种脚本,一门编程语言,它可以在网页上实现复杂的功能,网页展现给你的不再是简单的静态信息,而是实时的内容更新,交互式的地图,2D/3D 动画,滚动播放的视频等等。JavaScript 怎能缺席。它是标准 Web 技术蛋糕的第三层,其中 HTML 和 CSS 我们已经在学习中心的其他部分进行了详细的讲解。
@@ -141,7 +141,7 @@JavaScript 能做的远不止这些。让我们来仔细探索。
-客户端(client-side)JavaScript 语言的核心包含一些普遍的编程特性,以让你可以做到如下的事情:
@@ -186,7 +186,7 @@先稳住!你看到的只是冰山一角。你不可能学一天 JavaScript 就能构建下一个 Facebook, 谷歌地图,或者 Instagram。敬请「牢记初心,砥砺前行」。
-现在我们实实在在的学习一些代码,与此同时,探索 JavaScript 运行时背后发生的事情。
@@ -198,7 +198,7 @@这样很好,因为 JavaScript 最普遍的用处是通过 DOM API(见上文)动态修改 HTML 和 CSS 来更新用户界面(user interface)。如果 JavaScript 在 HTML 和 CSS 就位之前加载运行,就会引发错误。
-每个浏览器标签页就是其自身用来运行代码的独立容器(这些容器用专业术语称为“运行环境”)。大多数情况下,每个标签页中的代码完全独立运行,而且一个标签页中的代码不能直接影响另一个标签页(或者另一个网站)中的代码。这是一个好的安全措施,如果不这样,黑客就可以从其他网站盗取信息,等等。
@@ -206,7 +206,7 @@注:以安全的方式在不同网站/标签页中传送代码和数据的方法是存在的,但这些技术较为高级,本课程不会涉及。
-当浏览器执行到一段 JavaScript 代码时,通常会按从上往下的顺序执行这段代码。这意味着你需要注意代码书写的顺序。比如,我们回到第一个例子中的 JavaScript 代码:
@@ -227,7 +227,7 @@注:这是一个很常见的错误,在引用对象之前必须确保该对象已经存在。
-作为程序员,你或许听说过这两个术语:解释(interpret)和 编译 (compile)。在解释型语言中,代码自上而下运行,且实时返回运行结果。代码在由浏览器执行前,不需要将其转化为其他形式。代码将直接以文本格式(text form)被接收和处理。
@@ -237,23 +237,23 @@你或许还听说过服务器端(server-side)和 客户端(client-side)代码这两个术语,尤其是在 web 开发时。客户端代码是在用户的电脑上运行的代码,在浏览一个网页时,它的客户端代码就会被下载,然后由浏览器来运行并展示。这就是客户端 JavaScript。
而服务器端代码在服务器上运行,接着运行结果才由浏览器下载并展示出来。流行的服务器端 web 语言包括:PHP、Python、Ruby、ASP.NET 以及...... JavaScript!JavaScript 也可用作服务器端语言,比如现在流行的 Node.js 环境,你可以在我们的 动态网页 - 服务器端编程 主题中找到更多关于服务器端 JavaScript 的知识。
-“动态”一词既适用于客户端 JavaScript,又适用于描述服务器端语言。是指通过按需生成新内容来更新 web 页面 / 应用,使得不同环境下显示不同内容。服务器端代码会在服务器上动态生成新内容,例如从数据库中提取信息。而客户端 JavaScript 则在用户端浏览器中动态生成新内容,比如说创建一个新的 HTML 表格,用从服务器请求到的数据填充,然后在网页中向用户展示这个表格。两种情况的意义略有不同,但又有所关联,且两者(服务器端和客户端)经常协同作战。
没有动态更新内容的网页叫做“静态”页面,所显示的内容不会改变。
-可以像添加 CSS 那样将 JavaScript 添加到 HTML 页面中。CSS 使用 {{htmlelement("link")}} 元素链接外部样式表,使用 {{htmlelement("style")}} 元素向 HTML 嵌入内部样式表,JavaScript 这里只需一个元素——{{htmlelement("script")}}。我们来看看它是怎么工作的。
-注: 你可以在 GitHub 上查看此版本 apply-internal.html (也可在线查看)。
-这很不错,但是能不能把 JavaScript 代码放置在一个外部文件中呢?现在我们来研究一下。
@@ -320,7 +320,7 @@注:你可以在 GitHub 上查看这个版本 apply-external.html 以及 script.js (也可在线查看).
-注意,有时候你会遇到在 HTML 中存在着一丝真实的 JavaScript 代码。它或许看上去像这样:
@@ -378,7 +378,7 @@注:请尝试修改 apply-javascript.html
以添加更多按钮。刷新后可发现按下任一按钮时都会创建一个段落。很高效吧。
要让脚本调用的时机符合预期,需要解决一系列的问题。这里看似简单,实际大有文章。最常见的问题就是:HTML 元素是按其在页面中出现的次序调用的,如果用 JavaScript 来管理页面上的元素(更精确的说法是使用 文档对象模型 DOM),若 JavaScript 加载于欲操作的 HTML 元素之前,则代码将出错。
@@ -404,7 +404,7 @@解决此问题的旧方法是:把脚本元素放在文档体的底端(</body>
标签之前,与之相邻),这样脚本就可以在 HTML 解析完毕后加载了。此方案(以及上述的 DOMContentLoaded
方案)的问题是:只有在所有 HTML DOM 加载完成后才开始脚本的加载/解析过程。对于有大量 JavaScript 代码的大型网站,可能会带来显著的性能损耗。这也是 async
属性诞生的初衷。
async
和 defer
async
和 defer
上述的脚本阻塞问题实际有两种解决方案 —— async
和 defer
。我们来依次讲解。
async
和 defer
defer
,将关联的脚本按所需顺序置于 HTML 中。
就像 HTML 和 CSS,JavaScript 代码中也可以添加注释,浏览器会忽略它们,注释只是为你的同事(还有你,如果半年后再看自己写的代码你会说,这是什么垃圾玩意。)提供关于代码如何工作的指引。注释非常有用,而且应该经常使用,尤其在大型应用中。注释分为两类:
@@ -474,7 +474,7 @@恭喜你,迈出了探索 JavaScript 世界的第一步。我们从理论开始,介绍为什么要使用 JavaScript,以及用它能做什么事情。过程中穿插了一些代码示例并讲解了 JavaScript 如何与网站中其他代码适配,等等。
@@ -482,7 +482,7 @@{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}
-继续修补代码,并进行更多练习。如果你没有问题要解决,可以在网上查一些测试,多上一些课程,或者问问你的朋友和家人(或当地的学校或教堂),他们是否希望你为他们做些什么。
-网络开发需要你学习一套复杂的技能——有时你肯定会陷入困境,需要帮助。正如我们之前所说,即使是专业开发人员在某些时刻也需要让他人来帮助解决问题。
获得帮助的方法有很多种,下面是一些非常有效的方法。
-需要学习的一项重要技能是高效网络搜索的技巧——你需要在你最喜欢的搜索引擎中使用哪些搜索词来找到你需要的文章?
@@ -279,7 +279,7 @@您现在所在的网站上有大量信息可供您使用,既有查找代码语法的参考资料,也有学习技巧的指南/教程。
@@ -287,7 +287,7 @@如果你不确定该读哪篇文章,那么尝试在 MDN 中搜索一些相关的关键字(如上所述),或者尝试一般的网络搜索。要在 MDN 上搜索,你可以使用网站内置的搜索功能,或者使用你最喜欢的搜索引擎,在搜索词前面加上“MDN”。例如,“mdn responsive web design“或者”mdn background-color“。
-我们在之前已经提到了 Stack Overflow,但在这里还有其他在线资源可以提供帮助。
@@ -301,13 +301,13 @@然而,在 Twitter 或 Facebook 等社交网站上寻找有用的群组也是有意义的。寻找讨论你感兴趣的网络开发主题的小组,并加入其中。在 twitter 上关注那些你知道有影响力、聪明或平易近人的人,他们似乎分享了很多有用的建议。
-最后,你应该尝试参加一些线下聚会,认识其他志同道合的人,尤其是那些对初学者友好的人。 meetup.com 是一个很好的地方,可以找到当地的身体聚会,你也可以尝试搜索你当地的媒体/网站上的内容。
你也可以尝试参加正式的网络会议。虽然这些费用可能很高,但你可以尝试在那里做志愿者,许多会议都提供优惠票,例如学生票或多样性票。
-默认情况下,许多 web 服务器会为那些未知内容类型的文件配置一个默认 MIME 类型text/plain
或者application/octet-stream
。当一种新的内容类型被创造或者被添加到 web 服务器上,web 管理者在添加它到 web 服务器配置中可能会失败。主要原因是用户使用 Gecko-based 的浏览器,而这种浏览器只相信由 web 服务器和 web 应用所发布的 MIME 类型
MIME 类型描述了邮件或者 web 服务器或者 web 应用中的媒体内容的类型,其目的是为了指导 web 浏览器对媒体内容的处理和表现。MIME 类型的示例如下:
@@ -24,13 +24,13 @@application/pdf
对于 PDF 文档完整的 MIME 类型列表可在 IANA | MIME Media Types 查看。
在HTTP specification 中定义了能够描述在 web 中使用的媒体类型的 MIME 超集。
-假如 web 服务器或者应用报告内容的 MIME 类型不正确,根据 HTTP 规范,或许发起人想要处理和显示内容通过他所规定的 MIME 类型,因此 web 浏览器无法采取任何措施。
@@ -46,17 +46,17 @@除了违返了 HTTP 规范,让浏览器去猜测正确的 MIME 类型是一个差劲的策略。原因如下
-假如浏览器忽略报告的 MIME 类型,web 管理员和用户不在对内容如何进行处理有发言权了。
例如,面对 web 开发员的网址可能希望发送某些实例 HTML 文档,同时通希望能够以 text/html
或者 text/plain
的 MIME 类型进行数据的处理和显示 或者 作为一个源代码。如果浏览器猜测它的正确 MIME 类型为 text/html
那么开发员不在有权利进行选择了。
一些内容类型,例如可执行程序,本质上是不安全的。原因是经过规范化的 MIME 类型都有经过严格规定浏览器如何对这类类型的文件进行操作。一个可执行程序不能够在用户的电脑浏览器上执行,但可以通过弹出会话询问是否下载这个文件
@@ -98,7 +98,7 @@作者列表页面,需要呈现数据库中所有作者的列表,有每位作者的名字,并连结到作者详细内容页面。出生与死亡日期应该在名字后面,并且在同一列。
-作者列表控制器函数,需要获取所有作者实例的列表,然后将这些实例传递给模板进行渲染。
@@ -26,7 +26,7 @@该方法使用模型的 find()
, sort()
和 exec()
函数,以返回所有Author
对象,并按family_name
的字母顺排列。传递给exec()
方法的回调被调用,并将传入任何错误(或null
)作为第一个参数,或者成功时,传入所有作者列表。如果出现错误,则调用带有错误值的下一个中间件函数,如果没有错误,则呈现 author_list(.pug)模板,传递页面标题title,
和作者列表(author_list
)。
打开 /views/author_list.pug ,用底下文字取代它的内容。
@@ -46,7 +46,7 @@如同我们其它的模板,上面视图也依照着同样的模式。
-运行本应用,并打开浏览器访问 http://localhost:3000/ 。然后选择所有作者 All authors 连结。如果每个东西都设定正确了,页面看起来应该像底下的截图。
diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/book_list_page/index.html b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/book_list_page/index.html index 33bc108e41b8a9..0c1a63c5b43826 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/book_list_page/index.html +++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/book_list_page/index.html @@ -5,7 +5,7 @@ ---接下做我们将实作书本列表页面。这个页面需要呈现数据库中所有书本的列表,包含每本书的作者、标题,标题将成为一个超连结,连到书本详细内容页面。
-书本列表控制器函数,需要获取数据库中所有Book
对象的列表,然后将这些对象传给模板进行呈现。
成功时,传递给查询的回调,将呈现 book_list(.pug) 模板,将标题title
和book_list
(包含作者的書本列表)作为变量传递。
创建 /views/book_list.pug 并复制底下的文字。
@@ -56,7 +56,7 @@在这里,我們感兴趣的是,每本书被定义为两行,第二行使用管道(上面高亮显示)。这种方法是必要的,因为如果作者姓名位于上一行,那么它将成为超链接的一部分。
-运行本应用 (参见 测试路由 有相关的命令) ,并打开你的浏览器,访问 http://localhost:3000/。然后选择 所有书本 连结。如果每样东西都设定正确了,你的网站看起来应该像底下的截图。
diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.html b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.html index 8a4377332d4a3e..dbdbaea1e3bc0e 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.html +++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.html @@ -5,7 +5,7 @@ ---接下来,我们将实作图书馆中所有书本实例 (BookInstance
) 的列表页面。这个页面需要包含与每个 BookInstance
(链接到其详细信息页面) 关联的书本 Book
标题,以及BookInstance
模型中的其他信息,包含每个副本的状态,印记和唯一 ID。唯一 ID 的文字,应该链接到 BookInstance
详细信息页面。
BookInstance
列表控制器函数,需要获取所有书本实例的列表,填充关联的书本信息,然后将列表传递给模板以进行呈现。
成功时,传递给查询的回调,会呈现 bookinstance_list (.pug) 模板,并将标题title
和书籍实例列表bookinstance_list
作为变量传递。
创建 /views/bookinstance_list.pug ,並複制貼上底下的文字。
@@ -55,7 +55,7 @@这个視图与其他視图非常相似。它扩展了布局,替换内容區块,显示从控制器传入的标题title
,并遍历bookinstance_list
中的所有书籍副本。对于每个副本,我们都会显示它的状态(用颜色编码),如果书本不可用,则显示其预期返回日期。這裡引入了一个新功能 — 我们可以在标签之后使用点符号表示法,來指定一個类別。因此,span.text-success
将被编译为 <span class="text-success">
(也可以用 Pug 编写为 span(class="text-success")
.
运行本应用,打开浏览器访问 http://localhost:3000/,然后选择 All book-instances 连结。假如每个东西都设定正确了,你的网站看起来应该像是底下的截图。
diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.html b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.html index 2a20efa61790b1..2e0b1f30b3f6a6 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.html +++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.html @@ -11,13 +11,13 @@注意: 我们可以直接在 Pug 模板中,使用 moment 格式化字符串,或者可以在许多其它地方格式化字符串。使用虚拟属性,可以使我们获得格式化的日期,這与我们当前获取 due_date
的方式完全相同。
在项目的根目录,输入下列命令
npm install moment
-注意: 格式化方法可以使用几乎任何模式显示日期。moment 文档中,可以找到表示不同日期组件的语法。
-打开 /views/bookinstance_list.pug ,然后用 due_back_formatted
取代 due_back
。
async.waterfall()
用于必须序列运行的操作,每个操作取决于前面操作的结果。我们在 Express 中使用的大多数方法,都是异步的 - 您指定要执行的操作,传递回调。该方法立即返回,并在请求的操作完成时,调用回调。按照 Express 中的惯例,回调函数将错误值作为第一个参数传递(或成功时为 null
),并将函数的结果(如果有的话)作为第二个参数传递。
一个更好的解决方案,是并行执行所有请求,然后在所有查询完成后执行单个回调。这是 Async 模块简化的流操作!
-方法async.parallel()
用于并行运行多个异步操作。
如果您将一组函数,作为第一个参数传递,则结果将是一个数组(数组顺序结果,将与声明函数的原始顺序匹配 - 而不是它们完成的顺序)。
-async.series()
方法用于按顺序运行多个异步操作,后续函数不依赖于先前函数的输出。它本质上是声明的,并且行为与async.parallel()
.相同。
方法async.waterfall()
用于在每个操作依赖于前一个操作的结果时,依次运行多个异步操作。
使用 NPM 包管理器安装 async 模块,以便我们可以在代码中使用它。您可以常规方式执行此操作,在 LocalLibrary 项目的根目录中,打开命令提示并输入以下命令:
diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/home_page/index.html b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/home_page/index.html index 6f582e5b65fcc6..0bed7b1e5c4109 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/home_page/index.html +++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/home_page/index.html @@ -7,7 +7,7 @@我们已经为主页创建了一个路由。为了完成页面,我们需要更新控制器函数,以从数据库中提取记录的“计数”,并创建一个可用于呈现页面的视图(模板)。
-在 前面的教程,我们创建 index 页面路由。此处要提醒的是,所有的路由函式,都定义在 /routes/catalog.js:
@@ -23,7 +23,7 @@我们扩展这个控制器函数,以从我们的模型获取信息,然后使用模板(视图)渲染它。
-索引控制器函数需要获取以下有关信息,即数据库中有多少Book
,BookInstance
,可用的BookInstance
,Author
和Genre
记录,将这些数据渲染到模板中,以创建 HTML 页面,然后将其返回到 HTTP 响应中。
注意: 上面的async.parallel()
裡的回调函数有点不寻常,因为不管是否出现错误,我们都会渲染页面(通常您可能使用单独的执行路径来处理错误的显示)。
打开 /views/index.pug ,并用底下文字取代它的内容。
@@ -116,7 +116,7 @@注意: 我们没有转义计数值 (i.e. 我们使用 !{}
语法) ,因为计数值已经被计算过了。如果信息是由终端用户提供的,那么我们就会转义該变量,以用于显示。
此处,我们应该已经创建了呈现 index 页面,所需要的每样东西。运行本地图书馆应用,并打开浏览器访问 http://localhost:3000/。如果每样东西都设定正确了,你的网站看起来应该像底下的截图。
diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/template_primer/index.html b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/template_primer/index.html index 6d2da265b0c500..69d411795cca23 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/template_primer/index.html +++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/template_primer/index.html @@ -15,7 +15,7 @@注意: 使用 Pug 的缺点,是它对缩进和空格敏感(如果在错误的位置添加额外的空格,可能会得到没什么帮助的错误代码)。但是,一旦您的模板到位,它们就很容易阅读和维护。
-在我们创建骨架网站时,LocalLibrary 配置为使用 Pug。您应该看到 Pug 模块作为依赖项,包含在网站的 package.json文件中,以及 app.js文件中的以下配置设置。设置告诉我们,使用 Pug 作为视图引擎,Express 应该在 /views子目录中搜索模板。
@@ -32,7 +32,7 @@下面的示例模板文件,展示了许多 Pug 最有用的功能。
@@ -117,7 +117,7 @@语法还支持注释(可以在输出中呈现 - 或者不是 - 可自行选择),支持 mixins 创建可重用的代码块,case 语句和许多其他功能。有关更多详细信息,请参阅Pug文档。
-在一个站点中,通常所有页面都有一个共同的结构,包括页首,页脚,导航等的标准 HTML 标记。比起强迫开发人员在每个页面中复制这个“样板”的做法,Pug 允许你声明一个基本模板,然后扩展它,只替换每个特定页面不同的地方。
diff --git a/files/zh-cn/learn/server-side/express_nodejs/forms/create_author_form/index.html b/files/zh-cn/learn/server-side/express_nodejs/forms/create_author_form/index.html index cc88d7721c6301..461bda9b896877 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/forms/create_author_form/index.html +++ b/files/zh-cn/learn/server-side/express_nodejs/forms/create_author_form/index.html @@ -5,7 +5,7 @@ ---Ed本章节演示,如何为创建作者对象Author
定义一个页面。
为了在种类表单使用 express 验证器,我们必须用 require 导入我们想用的函式。
@@ -14,7 +14,7 @@const { body,validationResult } = require('express-validator/check');
const { sanitizeBody } = require('express-validator/filter');
-找到导出的 author_create_get()
控制器方法,并替换为底下代码。这里单纯呈现 author_form.pug 视图,传送 title
变数。
找到导出的 author_create_post()
控制器方法,并替换为底下代码。
创建 /views/author_form.pug 并复制贴上以下文字。
@@ -137,7 +137,7 @@上面的模板少了一个输入字段 date_of_death
。依照跟生日表单同样的模式,创建此字段!
运行本应用,打开浏览器访问网址http://localhost:3000/,然后点击创建新作者 Create new author 连结。如果每个东西都设定正确了,你的网站看起应该像底下的截图。在你输入一个值之后,它应该会被储存,并且你将被带到作者详细信息页面。
diff --git a/files/zh-cn/learn/server-side/express_nodejs/forms/create_book_form/index.html b/files/zh-cn/learn/server-side/express_nodejs/forms/create_book_form/index.html index 8f9558739f22bf..5b2ff7c6cca24a 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/forms/create_book_form/index.html +++ b/files/zh-cn/learn/server-side/express_nodejs/forms/create_book_form/index.html @@ -5,14 +5,14 @@ ---Edit 此子文档显示如何定义页面/表单以创建Book
对象。这比相同的作者Author
或种类Genre
页面稍微复杂一点,因为我们需要在我们的书本表单中,获取并显示可用的作者和种类记录。
打开 /controllers/bookController.js,并在文件顶部添加以下行:
const { body,validationResult } = require('express-validator/check'); const { sanitizeBody } = require('express-validator/filter');-
找到导出的book_create_get()
控制器方法,并将其替换为以下代码。
这使用异步模块 async(在教程 5:显示数据库中的数据),来获取所有作者和种类对象。然后将它们作为名为authors
和genres
的变量(以及页面标题title
),传递给视图book_form.pug
。
找到导出的book_create_post()
控制器方法,并将其替换为以下代码。
创建 /views/book_form.pug,并复制下面的文本。
@@ -199,7 +199,7 @@运行应用程序,将浏览器打开到http://localhost:3000,然后选择 Create new book 链接。如果一切设置正确,您的网站应该类似于以下屏幕截图。提交有效的图书后,应将其保存,然后您将进入图书详细信息页面。
diff --git a/files/zh-cn/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.html b/files/zh-cn/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.html index 1d49bb9c7813dc..4a8055b36646f8 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.html +++ b/files/zh-cn/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.html @@ -5,14 +5,14 @@ ---Edi本章节演示如何定义一个页面/表单,以创建BookInstance
物件。这很像我们用来创建书本 Book
物件的表单。
打开 /controllers/bookinstanceController.js,并在档案最上方加入以下几行:
const { body,validationResult } = require('express-validator/check');
const { sanitizeBody } = require('express-validator/filter');
-在档案最上方,用 require 导入书本模型 (因为每个BookInstance
都有关连的 Book
)。
控制器取得所有书本的列表 (book_list
) 并将它传送到视图 bookinstance_form.pug
(里面附加上 title
)。
找到导出的 bookinstance_create_post()
控制器方法,并替换为底下代码。
此代码的结构和行为,与创建其他对象的结构和行为相同。首先,我们验证数据,并為数据做無害化處理。如果数据无效,我们会重新显示表單,以及用户最初输入的数据,還有错误消息列表。如果数据有效,我们保存新的BookInstance
记录,并将用户重定向到详细信息页面。
创建 /views/bookinstance_form.pug ,并复制贴上以下代码。
@@ -136,7 +136,7 @@注意: 以上的模板将状态值 (Maintenance, Available, 等等) 写死在代码里,而且不能 "记忆" 使用者的输入值。如果你愿意的话,考虑重新实作此列表,当表单被重新呈现时,从控制器传入选项数据,并设定选中的值。
-运行本应用,打开浏览器访问网址 http://localhost:3000/。然后点击创建新书本实例 Create new book instance (copy) 连结。如果每个东西都设定正确了,你的网站看起应该像底下的截图。在你提交一个有效的 BookInstance
之后,它应该会被储存,并且你将被带到详细信息页面。
本章节演示如何定义我们的页面,创建Genre
物件(这是一个很好的起点,因为类型只有一个字段,它的名称name
,没有依赖项)。像任何其他页面一样,我们需要设置路由,控制器和视图。
在我们的控制器中使用 express-validator 验证器,我們必須导入我们想要从 'express-validator/check' 和 'express-validator/filter' 模块中使用的函数。
@@ -14,7 +14,7 @@const { body,validationResult } = require('express-validator/check');
const { sanitizeBody } = require('express-validator/filter');
-找到导出的genre_create_get()
控制器方法,并将其替换为以下代码。这只是渲染genre_form.pug视图,传递一个 title 变量。
找到导出的genre_create_post()
控制器方法,并将其替换为以下代码。
在我们所有的 POST
控制器中,都使用了相同的模式:我们运行验证器,然后运行消毒器,然后检查错误,并使用错误信息重新呈现表单,或保存数据。
当我们创建一个新的种类Genre
时,在GET
和POST
控制器/路由中,都会呈现相同的视图(稍后在我们更新种类Genre
时也会使用它)。
注意: 这只是呈现错误的一种方法。您还可以从错误变量中,获取受影响字段的名称,并使用这些,来控制错误消息的呈现位置,以及是否应用自定义 CSS 等。
-运行应用程序,打开浏览器到http://localhost:3000/,然后选择 Create new genre 链接。如果一切设置正确,您的网站应该类似于以下屏幕截图。输入值后,应保存该值,您将进入种类详细信息页面。
diff --git a/files/zh-cn/learn/server-side/express_nodejs/forms/delete_author_form/index.html b/files/zh-cn/learn/server-side/express_nodejs/forms/delete_author_form/index.html index c82ca794211993..ba935f634d66ba 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/forms/delete_author_form/index.html +++ b/files/zh-cn/learn/server-side/express_nodejs/forms/delete_author_form/index.html @@ -7,7 +7,7 @@正如表单设计部分所讨论的那样,我们的策略是,只允许删除“未被其他对象引用”的对象(在这种情况下,这意味着如果作者Author
被一本书Book
引用,我们将不允许删除作者)。在实现方面,这意味着,表单需要在删除作者之前,先确认没有关联的书籍。如果存在关联的书籍,则应显示它们,并说明在删除Author
对象之前,必须删除它们。
打开/controllers/authorController.js。找到导出的author_delete_get()
控制器方法,并将其替换为以下代码。
找到导出的author_delete_post()
控制器方法,并将其替换为以下代码。
注意: 我们可以检查对findById()
的调用,是否返回任何结果,如果没有,则立即呈现所有作者的列表。为简洁起见,我们将代码保留在上面(如果找不到 id,它仍会返回作者列表,但这将在findByIdAndRemove()
之后发生)。
创建 /views/author_delete.pug 并复制贴上底下文字。
@@ -123,7 +123,7 @@POST
请求中,将作者 ID 发送到服务器,并且将删除该作者的记录。接下来,我们将向 Author 详细视图添加 Delete 控件(详细信息页面是删除记录的好地方)。
@@ -141,7 +141,7 @@运行应用程序,并将浏览器打开,到http://localhost:3000/。然后选择所有作者链接 All authors,然后选择一个特定作者。最后选择删除作者链接 Delete author。
diff --git a/files/zh-cn/learn/server-side/express_nodejs/forms/update_book_form/index.html b/files/zh-cn/learn/server-side/express_nodejs/forms/update_book_form/index.html index dea22b0e331900..7d24b4fb9f9469 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/forms/update_book_form/index.html +++ b/files/zh-cn/learn/server-side/express_nodejs/forms/update_book_form/index.html @@ -5,7 +5,7 @@ ---Edit本文最后一部分演示如何定义一个页面,以更新书本(Book
)对象。当更新一本书的时候,表单处理更像是创建一本书,除了你必须将表单填进 GET
路由,并附加上来自数据库的值。
打开 /controllers/bookController.js. 找到 exported book_update_get()
控制方法,并用底下的代码替换。
这个控制器从 URL 参数 (req.params.id
) 中,取得要更新的书本 Book
的 id。它使用 async.parallel()
方法,取得指定的书本 Book
纪录 (填入它的种类和作者字段) ,并列出所有作者 Author
和种类 Genre
对象。当所有操作都完成,它用勾选的方式,标记当前选择的种类,并呈现 book_form.pug 视图,传送变数 title
、book
、所有 authors
、所有 genres
。
找到 exported book_update_post()
控制器方法,并替换为底下的代码。
这很像是创建一本书的时候,所使用的 post 路由。首先,我们验证来自表单的书本数据,并进行无害化处理,并使用它创建一个新的书本 Book
对象 (将它的 _id
值,设置给将要更新的对象的 id)。当我们验证资料,然后重新呈现表单的时候,如果存在错误,再附加显示使用者输入的资料、错误信息、以及种类和作者列表。当我们调用Book.findByIdAndUpdate()
去更新 Book
,如果没有错误,就重新导向到它的细节页面。
打开 /views/book_form.pug ,并更新作者表单控制器的区段,以加入底下条件控制代码。
@@ -154,7 +154,7 @@注意: 此处代码的更动,是为了让书本表单 book_form,能被创建和更新书本的对象共同使用 (如果不这么做,当创建表单时,在 GET
路由会发生一个错误)。
打开 book_detail.pug 视图,并确认在页面下方,有删除和更新书本的连结,如下所示。
@@ -166,7 +166,7 @@你现在应该能够更新来自书本细节页面的书了。
-运行本应用,打开浏览器,访问网址 http://localhost:3000/,点击所有书本 All books 连结,然后点击一本书。最后点击更新书本 Update Book 连结。
diff --git a/files/zh-cn/mdn/contribute/howto/tag/index.html b/files/zh-cn/mdn/contribute/howto/tag/index.html index 388c71788aa5ba..b26d4c11f47e29 100644 --- a/files/zh-cn/mdn/contribute/howto/tag/index.html +++ b/files/zh-cn/mdn/contribute/howto/tag/index.html @@ -115,7 +115,7 @@一般而言,您的主题标识标签应该是一个接口的名称,和相关的页面(如Node,它的各种属性和方法有很多页),或一个整体的技术类型的名称。你可以对图形、WebGL 和 WebGL 设置页面标签,而不仅是一个关于{{HTMLElement("canvas")}} 与 HTML、元素,Canvas,和图形。
-这些标签只用于 Mozilla 特定内容:
diff --git a/files/zh-cn/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html b/files/zh-cn/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html index 05e840ec96b32a..c0b8389d757782 100644 --- a/files/zh-cn/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html +++ b/files/zh-cn/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html @@ -3,7 +3,7 @@ slug: Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching translation_of: Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching --- -Firefox 1.5 对整个 web 页面的一个浏览器会话进行了内存缓存,包括他们对 JavaScript 状态。在访问过的页面间后退和前进不需要页面加载同时保存 JavaScript 状态。这个特性,被称为 bfcache(“后退前进缓存”),使得页面导航(切换)非常快。这个状态缓存被保存直到用户关闭浏览器。
@@ -34,7 +34,7 @@两个新的浏览器事件使得用户可以做到这 2 个要求。
-如果你使用新的事件,你的页面在其他浏览器依然会正确显示 (我们已经测试了早期版本的 Firefox, Internet Explorer, Opera, 和 Safari),而且在 Firefox 1.5 加载时将会使用新的缓存功能。
@@ -56,7 +56,7 @@如果你拥有当用户导航离页面是执行的行为,但是你想利用这个新的缓存功能,因此不想使用 unload 处理程序,使用新的 pagehide
事件
这个事件和 load
事件一样的工作(效果), 除了它每次页面加载是都执行 that it fires every time the page is loaded (然而 load
事件在 Firefox 1.5 中当页面从缓存中加载时不执行). 页面第一次加载时, pageshow
事件在 load
事件执行后执行。 pageshow
事件使用一个命名为persisted
的 boolean 属性,在初始加载时默认设置为 false
。如果它不是初始加载,被设置为true
(换句话说,但页面被缓存时它被设置为 true).
如果你将 JavaScript 函数作为 pageshow 事件的一部分调用,你可以通过调用pageshow
事件作为load
事件的一部分确保在不同于 Firefox 1.5 的浏览器在页面加载时调用这些函数,如在本文后面所示的示例。
如果你想定义当用户导航离页面时的行为,但是你不想使用 unload
(这将导致页面不被缓存),你可以使用新的 pagehide
事件。像 pageshow
, pagehide
事件使用一个命名为persisted
的属性。这个属性在页面未被浏览器缓存时设置为 false
,如果页面被浏览器缓存则设置为 true
。如果这个属性被设置为 false
,如果有设置unload
处理程序的话,unload
事件在pagehide
事件执行后马上执行。
Firefox 1.5 extensions 需要允许缓存功能。如果你在开发一个兼容 1.5 及以前版本的 Firefox 扩展,确保它监听事件触发 load
可被缓存,监听的 pageshow
事件触发不应该被缓存。
true,会在
窗口上添加一个进入全屏模式的按钮。nsILocalFile
接口被合并到nsIFile
接口中。(bug 682360).text-decoration-line
属性仍然带有前缀,不过现在它把 'blink'
也看看成了它的合法属性值,虽然并不会真正的让内容产生闪烁效果 ({{bug("812995")}}).如果你是一个 Web 开发人员,并且希望了解 Firefox 3 中所有的新特性,这里是一个很好的起点。这篇文章提供了一个覆盖所有 Firefox 3 新特性的列表。虽然他并不是能够包括所有微小的改动,但他能够帮助你学习到最主要的更新。
-
此页设法提供在 Gecko 1.8 和 Gecko 1.9 之间的变动概要,这些变动可能会影响某些网站的行为或网页渲染。
-在 Gecko 1.8 中,不能在图片上设置 load 事件监听。在 Gecko 1.9 中,已在 {{ Bug(234455) }} 中修复。但是在某些网站中,由于捕获 load 事件的事件监听器不正确而导致问题。参见 {{ Bug(335251) }} 中的讨论。要修复这个问题,出错的页面不再需要设置事件监听器。
例如,如下:
window.addEventListener('load', yourFunction, true); @@ -15,12 +15,12 @@window.addEventListener('load', yourFunction, false);
事件捕获如何工作的解释,参见 DOM Level 2 事件捕获
-在进入主题之前,首先要提示一下:如果你的扩展所需要的唯一改变只是安装文件中的maxVersion
信息,并且你的扩展所在的主机是addons.mozilla.org,事实上你不需要上传你的新的版本的扩展!只需要在 AMO 中使用开发者控制面板调整maxVersion
。通过这种方式你可以避免你的扩展被再次审核。
第一步,当然,对于大多数的扩展也仅需要这一步——更新安装文件install.rdf
,声明扩展兼容 Firefox 3。
Install.js
script instead of an install manifest, you need to make the transition to an install manifest now. Firefox 3 no longer supports install.js
scripts in XPI files.Firefox 3 supports new properties in the install manifest to specify localized descriptions. The old methods still work however the new allow Firefox to pick up the localizations even when the add-on is disabled and pending install. See Localizing extension descriptions for more details.
-If you are hosting addons yourself and not on a secure add-on hosting provider like addons.mozilla.org then you must provide a secure method of updating your add-on. This will either involve hosting your updates on an SSL website, or using cryptographic keys to sign the update information. Read Securing Updates for more information.
-Several APIs have been changed in significant ways. The most significant of these, which will likely affect a large number of extensions, are:
-将外部文档的节点插入当前文档之前,你必须使用 document.importNode()
从外部文档导入源节点,或者使用 document.adoptNode()
导入源节点,
@@ -112,15 +112,15 @@
即使你不执行导入动作,就执行插入外部文档中的节点.Firefox 目前也不会报错 (如果严格按标准执行,很多已有的网站都无法正常运行). 我们鼓励开发者严格按标准修改自己已有的不符合上述标准的代码。
-If your extension accesses bookmark or history data in any way, it will need substantial work to be compatible with Firefox 3. The old APIs for accessing this information have been replaced by the new Places architecture. See the Places migration guide for details on updating your existing extension to use the Places API.
-The Download Manager API has changed slightly due to the transition from an RDF data store to using the Storage API. This should be a pretty easy transition to make. In addition, the API for monitoring download progress has changed to support multiple download manager listeners. See nsIDownloadManager
, nsIDownloadProgressListener
, and Monitoring downloads for more information.
If your extension accesses user login information using the Password Manager, it will need to be updated to use the new Login Manager API.
@@ -132,15 +132,15 @@You can also override the built-in password manager storage if you want to provide your own password storage implementation in your extensions. See Creating a Login Manager storage module for details.
-The XUL Popup system was heavily modified in Firefox 3. The Popup system includes main menus, context menus and popup panels. A guide to using Popups has been created, detailing how the system works. One thing to note is that popup.
has been deprecated in favor of new showPopup
popup.
and openPopup
popup.
.openPopupAtScreen
The nsIAutoCompleteController
interface's handleEnter()
method has been changed to accept an argument that indicates whether the text was selected from the autocomplete popup or by the user pressing enter after typing text.
DOMParser
is instantiated, it inherits the calling code's principal and the documentURI
and baseURI
of the window the constructor came from.DOMParser
using a contract, such as by calling createInstance()
, and you don't call the DOMParser
's init()
method, attempting to initiate a parsing operation will automatically create and initialize the DOMParser
with a null principal and null
pointers for documentURI
and baseURI
.The following interfaces were removed from Gecko 1.9, which drives Firefox 3. If your extension makes use of any of these, you'll need to update your code:
@@ -166,7 +166,7 @@nsICloseAllWindows
(see bug 386200)There has been a minor change to the chrome that may require changes in your code. A new vbox
has been added, called "browser-bottombox", which encloses the find bar and status bar at the bottom of the browser window. Although this doesn't affect the appearance of the display, it may affect your extension if it overlays chrome relative to these elements.
Add simple changes you had to make while updating your extension to work with Firefox 3 here.
diff --git a/files/zh-cn/web/accessibility/aria/attributes/aria-hidden/index.html b/files/zh-cn/web/accessibility/aria/attributes/aria-hidden/index.html index b7239c7de2e26f..46114d1715c851 100644 --- a/files/zh-cn/web/accessibility/aria/attributes/aria-hidden/index.html +++ b/files/zh-cn/web/accessibility/aria/attributes/aria-hidden/index.html @@ -83,9 +83,9 @@在以上三个场景中,元素已经被隐藏,从可访问树种移除了,无需再添加aria-hidden="true"
属性。
aria-label 属性可以用在任何典型的 HTML 元素中,并不需要配合特定的 ARIA role 才能使用。
-string
-"网络从根本上是为了为所有的人工作, 无论他们的硬件、软件、语言、文化、位置或身体或精神能力。当网络达到这一目标,它可以被不同的人的听觉范围,运动,和认知能力访问。" W3C - 可访问性
-{{Compat("api.Animation.finish")}}
-{{Compat("api.Animation.play")}}
-{{ ApiRef() }}
{{ non-standard_header() }}
-Returns the time, in milliseconds since the epoch, at which animations started now should be considered to have started. This value should be used instead of, for example, Date.now()
, because this value will be the same for all animations started in this window during this refresh interval, allowing them to remain in sync with one another.
This also allows JavaScript-based animations to remain synchronized with CSS transitions and SMIL animations triggered during the same refresh interval.
-time = window.mozAnimationStartTime;-
不属于任何规范。
{{Compat}}
-when
指定为负值时。This example demonstrates starting an oscillator node, scheduled to begin playing at once and to stop playing in one second. The stop time is determined by taking the audio context's current time from {{domxref("AudioContext.currentTime")}} and adding 1 second.
@@ -51,7 +51,7 @@这个 API 给 {{domxref("Window")}} 接口增加了新的 {{domxref("window.requestIdleCallback", "requestIdleCallback()")}} 和 {{domxref("window.cancelIdleCallback", "cancelIdleCallback()")}} 方法。
-在这个示例中,我们将了解我们怎么用{{domxref("window.requestIdleCallback", "requestIdleCallback()")}}来在浏览器空闲时运行高耗时、低优先级的任务。此外,这个示例会演示如何使用{{domxref("window.requestAnimationFrame", "requestAnimationFrame()")}}安排文档内容的更新。
diff --git a/files/zh-cn/web/api/baseaudiocontext/createanalyser/index.html b/files/zh-cn/web/api/baseaudiocontext/createanalyser/index.html index 447d134629fdf6..19a22beac79234 100644 --- a/files/zh-cn/web/api/baseaudiocontext/createanalyser/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createanalyser/index.html @@ -19,11 +19,11 @@var audioCtx = new AudioContext(); var analyser = audioCtx.createAnalyser();-
{{domxref("AnalyserNode")}}对象
-下面的例子展示了 AudioContext 创建分析器节点的基本用法,然后用 requestAnimationFrame() 来反复获取时域数据,并绘制出当前音频输入的“示波器风格”输出。更多完整例子请查看Voice-change-O-matic demo (中app.js 的 128–205 行代码)
diff --git a/files/zh-cn/web/api/baseaudiocontext/createbiquadfilter/index.html b/files/zh-cn/web/api/baseaudiocontext/createbiquadfilter/index.html index 44ba210688dd5e..6962304f6e70e5 100644 --- a/files/zh-cn/web/api/baseaudiocontext/createbiquadfilter/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createbiquadfilter/index.html @@ -22,11 +22,11 @@var audioCtx = new AudioContext(); var biquadFilter = audioCtx.createBiquadFilter();-
一个 {{domxref("BiquadFilterNode")}}.
-这个例子展示了一个利用 AudioContext 创建四项滤波器节点(Biquad filter node)的例子。想要查看完整工作的示例,请查看我们的 For voice-change-o-matic 样例(也可以查看 源码 ).
diff --git a/files/zh-cn/web/api/baseaudiocontext/createconvolver/index.html b/files/zh-cn/web/api/baseaudiocontext/createconvolver/index.html index 1e3dad4741238a..b9832e81ee9adf 100644 --- a/files/zh-cn/web/api/baseaudiocontext/createconvolver/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createconvolver/index.html @@ -15,11 +15,11 @@var audioCtx = new AudioContext(); var convolver = audioCtx.createConvolver();-
{{domxref("ConvolverNode")}}对象。
-下面的例子展示了一个 AudioContext 创建一个 混响器节点 的基本使用方法。基本前提是你创建一个包含声音样本的 AudioBuffer 用作混响环境 (称之为脉冲响应,) 和在混响器中应用。 下面的例子使用了一个简短的示例音乐厅人群效果,所以混响效果应用深度和回声。
diff --git a/files/zh-cn/web/api/baseaudiocontext/createoscillator/index.html b/files/zh-cn/web/api/baseaudiocontext/createoscillator/index.html index a6ab3ac2e48892..790f1de5067864 100644 --- a/files/zh-cn/web/api/baseaudiocontext/createoscillator/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createoscillator/index.html @@ -11,11 +11,11 @@var oscillatorNode = audioCtx.createOscillator();-
An {{domxref("OscillatorNode")}}.
-以下示例显示了用于创建振荡器节点的 AudioContext 的基本用法。有关应用示例/信息,请查看我们的Violent Theremin demo(有关相关代码,请参阅see app.js); 另请参阅我们的 OscillatorNode 页面以获取更多信息。
diff --git a/files/zh-cn/web/api/baseaudiocontext/createscriptprocessor/index.html b/files/zh-cn/web/api/baseaudiocontext/createscriptprocessor/index.html index 7e04b024199f94..677ca29744b5c5 100644 --- a/files/zh-cn/web/api/baseaudiocontext/createscriptprocessor/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createscriptprocessor/index.html @@ -15,7 +15,7 @@var audioCtx = new AudioContext(); myScriptProcessor = audioCtx.createScriptProcessor(-bufferSize
,numberOfInputChannels
,numberOfOutputChannels
);
bufferSize
注意: numberOfInputChannels和
numberOfOutputChannels的值不能同时为0,二者同时为0是无效的
A {{domxref("ScriptProcessorNode")}}.
diff --git a/files/zh-cn/web/api/baseaudiocontext/createwaveshaper/index.html b/files/zh-cn/web/api/baseaudiocontext/createwaveshaper/index.html index 553128d6198f91..56bda42c8ffd6b 100644 --- a/files/zh-cn/web/api/baseaudiocontext/createwaveshaper/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createwaveshaper/index.html @@ -13,11 +13,11 @@var audioCtx = new AudioContext(); var distortion = audioCtx.createWaveShaper();-
A {{domxref("WaveShaperNode")}}.
-The following example shows basic usage of an AudioContext to create a wave shaper node. For applied examples/information, check out our Voice-change-O-matic demo (see app.js for relevant code).
diff --git a/files/zh-cn/web/api/batterymanager/charging/index.html b/files/zh-cn/web/api/batterymanager/charging/index.html index 8bfc8c5ebfc1c5..5cfad7467255d6 100644 --- a/files/zh-cn/web/api/batterymanager/charging/index.html +++ b/files/zh-cn/web/api/batterymanager/charging/index.html @@ -15,7 +15,7 @@返回当前是否正在对 {{domxref("BatteryManager")}} 对象的设备充电,如果正在充电则返回 true
,否则返回 false
.
var aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // 一个包含 DOMString 的数组 var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // 得到 blob-
一个新的 {{domxref("Blob")}} 对象,它包含了原始 {{domxref("Blob")}} 对象的某一个段的数据。
-The BlobBuilder
interface provides an easy way to construct {{ domxref("Blob") }} objects. Just create a BlobBuilder
and append chunks of data to it by calling the append()
method. When you're done building your blob, call getBlob()
to retrieve a {{ domxref("Blob") }} containing the data you sent into the blob builder.
BlobBuilder
接口已经废弃,请使用新版草案中引入的 {{domxref('Blob') }}构造函数。在之前的例子里面,我们总是将一个图形画在另一个之上,对于其他更多的情况,仅仅这样是远远不够的。比如,对合成的图形来说,绘制顺序会有限制。不过,我们可以利用 globalCompositeOperation
属性来改变这种状况。此外,clip
属性允许我们隐藏不想看到的部分图形。
globalCompositeOperation
globalCompositeOperation
我们不仅可以在已有图形后面再画新图形,还可以用来遮盖指定区域,清除画布中的某些部分(清除区域不仅限于矩形,像{{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}方法做的那样)以及更多其他操作。
@@ -29,7 +29,7 @@globalCo
{{EmbedLiveSample("合成示例", 750, 6750, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}
-裁切路径
+裁切路径
裁切路径和普通的 canvas 图形差不多,不同的是它的作用是遮罩,用来隐藏不需要的部分。如右图所示。红边五角星就是裁切路径,所有在路径以外的部分都不会在 canvas 上绘制出来。
@@ -46,7 +46,7 @@ 裁切路径
默认情况下,canvas 有一个与它自身一样大的裁切路径(也就是没有裁切效果)。
-clip
的例子
+clip
的例子
这个例子,我会用一个圆形的裁切路径来限制随机星星的绘制区域。
diff --git a/files/zh-cn/web/api/canvas_api/tutorial/drawing_text/index.html b/files/zh-cn/web/api/canvas_api/tutorial/drawing_text/index.html
index 54601c49b63f39..240d302f9dce24 100644
--- a/files/zh-cn/web/api/canvas_api/tutorial/drawing_text/index.html
+++ b/files/zh-cn/web/api/canvas_api/tutorial/drawing_text/index.html
@@ -20,7 +20,7 @@ 绘制文本
- 在指定的 (x,y) 位置绘制文本边框,绘制的最大宽度是可选的。
文本用当前的填充方式被填充:
@@ -38,7 +38,7 @@{{EmbedLiveSample("A_fillText_example", 310, 110)}}
-文本用当前的边框样式被绘制:
@@ -96,7 +96,7 @@<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> diff --git a/files/zh-cn/web/api/canvas_api/tutorial/index.html b/files/zh-cn/web/api/canvas_api/tutorial/index.html index 3117ee690d307a..ae2699a76398d0 100644 --- a/files/zh-cn/web/api/canvas_api/tutorial/index.html +++ b/files/zh-cn/web/api/canvas_api/tutorial/index.html @@ -25,11 +25,11 @@--
<canvas>
最早由 Apple 引入 WebKit,用于 Mac OS X 的 Dashboard,随后被各个浏览器实现。如今,所有主流的浏览器都支持它。开始之前
+开始之前
使用
-<canvas>
元素不是非常难,但你需要一些基本的HTML和JavaScript知识。除一些过时的浏览器不支持<canvas>
元素外,所有的新版本主流浏览器都支持它。Canvas 的默认大小为 300 像素×150 像素(宽×高,像素的单位是 px)。但是,可以使用 HTML 的高度和宽度属性来自定义 Canvas 的尺寸。为了在 Canvas 上绘制图形,我们使用一个 JavaScript 上下文对象,它能动态创建图像( creates graphics on the fly)。本教程包含
+本教程包含
这个方法也会在文章用画布操作视频中展示。
-在这个例子里面,我们会使用getImageData()
去展示鼠标光标下的颜色。为此,我们要当前鼠标的位置,记为 layerX 和 layerY,然后我们去查询getImageData()
给我们提供的在那个位置的像数数组里面的像素数据。最后我们使用数组数据去设置背景颜色和<div>的文字去展示颜色值。
在这个例子里,我们遍历所有像素以改变他们的数值。然后我们将被修改的像素数组通过 putImageData() 放回到画布中去。invert 函数仅仅是去减掉颜色的最大色值 255.grayscale 函数仅仅是用红绿和蓝的平均值。你也可以用加权平均,例如 x = 0.299r + 0.587g + 0.114b 这个公式。更多资料请参考维基百科的Grayscale。
@@ -274,7 +274,7 @@因为反锯齿默认是启用的,我们可能想要关闭它以看到清楚的像素。你可以通过切换勾选框来看到 imageSmoothingEnabled 属性的效果(不同浏览器需要不同前缀)。
-<canvas id="canvas" width="300" height="227"></canvas> <canvas id="zoom" width="300" height="227"></canvas> diff --git a/files/zh-cn/web/api/canvas_api/tutorial/transformations/index.html b/files/zh-cn/web/api/canvas_api/tutorial/transformations/index.html index d592bec5907717..cb032f9df60532 100644 --- a/files/zh-cn/web/api/canvas_api/tutorial/transformations/index.html +++ b/files/zh-cn/web/api/canvas_api/tutorial/transformations/index.html @@ -14,7 +14,7 @@在本教程前面的部分中,我们已经了解了 Canvas 网格和坐标空间。到目前为止,我们只是根据我们的需要使用默认的网格,改变整个画布的大小。变形是一种更强大的方法,可以将原点移动到另一点、对网格进行旋转和缩放。
-状态的保存和恢复 Saving and restoring state
+状态的保存和恢复 Saving and restoring state
在了解变形之前,我先介绍两个在你开始绘制复杂图形时必不可少的方法。
@@ -35,7 +35,7 @@状态的
你可以调用任意多次
-save
方法。每一次调用restore
方法,上一个保存的状态就从栈中弹出,所有设定都恢复。+
save
和restore
的应用例子
save
和restore
的应用例子我们尝试用这个连续矩形的例子来描述 canvas 的状态栈是如何工作的。
@@ -75,7 +75,7 @@draw();
在做变形之前先保存状态是一个良好的习惯。大多数情况下,调用 restore 方法比手动恢复原先的状态要简单得多。又,如果你是在一个循环中做位移但没有保存和恢复 canvas 的状态,很可能到最后会发现怎么有些东西不见了,那是因为它很可能已经超出 canvas 范围以外了。
-translate
的例子translate
的例子这个例子显示了一些移动 canvas 原点的好处。如果不使用 translate
方法,那么所有矩形都将被绘制在相同的位置(0,0)。translate
方法同时让我们可以任意放置这些图案,而不需要在 fillRect()
方法中手工调整坐标值,既好理解也方便使用。
translate
{{EmbedLiveSample("A_translate_example", "160", "160", "https://mdn.mozillademos.org/files/9857/translate.png")}}
-旋转的中心点始终是 canvas 的原点,如果要改变它,我们需要用到 translate
方法。
rotate
的例子rotate
的例子rotate
的例子<
}
-接着是缩放。我们用它来增减图形在 canvas 中的像素数目,对形状,位图进行缩小或者放大。
@@ -178,7 +178,7 @@默认情况下,canvas 的 1 个单位为 1 个像素。举例说,如果我们设置缩放因子是 0.5,1 个单位就变成对应 0.5 个像素,这样绘制出来的形状就会是原先的一半。同理,设置为 2.0 时,1 个单位就对应变成了 2 像素,绘制的结果就是图形放大了 2 倍。
-scale
的例子scale
的例子这最后的例子里,我们用不同的缩放方式来画两个图形。
@@ -205,7 +205,7 @@scale
的例子最后一个方法允许对变形矩阵直接修改。
diff --git a/files/zh-cn/web/api/canvas_api/tutorial/using_images/index.html b/files/zh-cn/web/api/canvas_api/tutorial/using_images/index.html index 145da30acaf1df..a7a2d987ba539d 100644 --- a/files/zh-cn/web/api/canvas_api/tutorial/using_images/index.html +++ b/files/zh-cn/web/api/canvas_api/tutorial/using_images/index.html @@ -37,7 +37,7 @@有几种方式可以获取到我们需要在 canvas 上使用的图片。
-我们可以通过下列方法的一种来获得与 canvas 相同页面内的图片的引用:
@@ -47,17 +47,17 @@在 {{domxref("HTMLImageElement")}}上使用crossOrigin属性,你可以请求加载其它域名上的图片。如果图片的服务器允许跨域访问这个图片,那么你可以使用这个图片而不污染 canvas,否则,使用这个图片将会污染 canvas。
-和引用页面内的图片类似地,用 document.getElementsByTagName
或 document.getElementById
方法来获取其它 canvas 元素。但你引入的应该是已经准备好的 canvas。
一个常用的应用就是将第二个 canvas 作为另一个大的 canvas 的缩略图。
-或者我们可以用脚本创建一个新的 {{domxref("HTMLImageElement")}} 对象。要实现这个方法,我们可以使用很方便的Image()构造函数。
如果你只用到一张图片的话,这已经够了。但一旦需要不止一张图片,那就需要更加复杂的处理方法,但图片预加载策略超出本教程的范围。
-我们还可以通过 data:url 方式来引用图像。Data urls 允许用一串 Base64 编码的字符串的方式来定义一个图片。
@@ -87,7 +87,7 @@你还可以使用{{HTMLElement("video")}} 中的视频帧(即便视频是不可见的)。例如,如果你有一个 ID 为“myvideo”的{{HTMLElement("video")}} 元素,你可以这样做:
@@ -102,7 +102,7 @@它将为这个视频返回{{domxref("HTMLVideoElement")}}对象,正如我们前面提到的,它可以作为我们的 Canvas 图片源。
-一旦获得了源图对象,我们就可以使用 drawImage
方法将它渲染到 canvas 里。drawImage
方法有三种形态,下面是最基础的一种。
SVG 图像必须在 <svg> 根指定元素的宽度和高度。
-{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}
-drawImage
方法的又一变种是增加了两个用于控制图像在 canvas 中缩放的参数。
width
和 height,
这两个参数用来控制 当向 canvas 画入时应该缩放的大小{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}
-drawImage
方法的第三个也是最后一个变种有 8 个新参数,用于控制做切片显示的。
切片是个做图像合成的强大工具。假设有一张包含了所有元素的图像,那么你可以用这个方法来合成一个完整图像。例如,你想画一张图表,而手上有一个包含所有必需的文字的 PNG 文件,那么你可以很轻易的根据实际数据的需要来改变最终显示的图表。这方法的另一个好处就是你不需要单独装载每一个图像。
-{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}
-偏移(offset)
和颜色 (color
) 定义的断点到渐变中。如果偏移值不在 0 到 1 之间,将抛出INDEX_SIZE_ERR错误,如果颜色值不能被解析为有效的
CSS 颜色值 {{cssxref("<color>")}},将抛出SYNTAX_ERR
错误。arc
方法arc
方法这是一段绘制圆的简单的代码片段。
@@ -53,7 +53,7 @@修改下面的代码并在线查看 canvas 的变化:
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> @@ -94,7 +94,7 @@Playable code
{{ EmbedLiveSample('Playable_code', 700, 360) }}
-不同的形状演示
+不同的形状演示
在此例中,使用 arc() 尽可能地绘制不同的形状。
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/arcto/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/arcto/index.html index c37e103592b4fb..a1cdb39fa1f24f 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/arcto/index.html +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/arcto/index.html @@ -29,7 +29,7 @@Parameters
示例
-使用
+arcTo
方法使用
arcTo
方法这是一段绘制圆弧的简单的代码片段。基础点是蓝色的,两个控制点是红色的。
@@ -71,7 +71,7 @@JavaScript
{{ EmbedLiveSample('Using_the_arc_method', 315, 165) }}
-尝试
+arcTo
参数尝试
arcTo
参数修改下面的代码并在线查看 canvas 的变化:
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/canvas/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/canvas/index.html index 1c5d193f5b916f..6454d8b380bfff 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/canvas/index.html +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/canvas/index.html @@ -10,7 +10,7 @@-
CanvasRenderingContext2D
.canvas
属性是 Canvas API 的一部分,是对与给定上下文关联的{{domxref("HTMLCanvasElement")}}对象的只读引用。如果没有 {{HTMLElement("canvas")}} 元素与之对应,对象值为{{jsxref("null")}} 。语法
+语法
ctx.canvas;@@ -36,7 +36,7 @@浏览器兼容性
{{Compat("api.CanvasRenderingContext2D.canvas")}}
-参见
+参见
direction
属性direction
属性这是一段简单的代码片段,对文本设置不同的 direction 数值。
@@ -53,7 +53,7 @@<canvas id="canvas" width="550" height="500"></canvas>diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/ellipse/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/ellipse/index.html index e16f73e3924d7e..eb7440d050fbd5 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/ellipse/index.html +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/ellipse/index.html @@ -39,7 +39,7 @@
ellipse
方法ellipse
方法这是一段绘制椭圆的简单的代码片段。
@@ -64,7 +64,7 @@修改下面的代码并在线查看 canvas 的变化(如果椭圆没有绘制,请在兼容性列表中检查你的浏览器是否支持):
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/fillstyle/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/fillstyle/index.html index 9471b7d96634cf..3c0b0ac9e6d186 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/fillstyle/index.html +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/fillstyle/index.html @@ -32,7 +32,7 @@选项
示例
-使用
+fillStyle
属性设置不同的颜色使用
fillStyle
属性设置不同的颜色这是一段简单的代码片段,使用
@@ -53,7 +53,7 @@fillStyle
属性设置不同的颜色。JavaScript
修改下面的代码并在线查看 canvas 的变化:
-Playable code
+Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/filter/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/filter/index.html index 3007c59ce83225..3dacbf7c27aebb 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/filter/index.html +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/filter/index.html @@ -54,7 +54,7 @@Filter 函数
示例
-使用
+filter
属性使用
filter
属性这是一段使用
@@ -76,7 +76,7 @@filter
属性的简单的代码片段。JavaScript
修改下面的代码并在线查看 canvas 的变化 (确保你的浏览器提供这些特性,查看浏览器兼容性列表):
-Playable code
+Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/font/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/font/index.html index 8b1bf9c2f8ebc9..1ab8793b048f32 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/font/index.html +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/font/index.html @@ -25,7 +25,7 @@选项
示例
-使用自定义字体
+使用自定义字体
这个例子使用
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/globalalpha/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/globalalpha/index.html index 79c7f9c1a92979..d77f4930a3172c 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/globalalpha/index.html +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/globalalpha/index.html @@ -23,7 +23,7 @@font
属性设置了不同的字体大小和字体种类。选项
示例
-使用
+globalAlpha
属性使用
globalAlpha
属性这是一段使用
@@ -49,7 +49,7 @@globalAlpha
属性的简单代码片段,绘制了 2 个半透明的矩形。JavaScript
修改下面的代码并在线查看 canvas 的变化:
-Playable code
+Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> @@ -94,7 +94,7 @@Playable code
{{ EmbedLiveSample('Playable_code', 700, 380) }}
-+
globalAlpha
例子
globalAlpha
例子此例中,绘制了 4 个不同背景色的正方形。在他们上面,绘制半透明的圆形。将那个点绘制的所有图形的
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html index df1d62af41b562..b77d091cdbc13b 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html @@ -22,7 +22,7 @@globalAlpha
属性值都设置为 0.2。通过 for 循环绘制半径逐渐增大的圆形。 最终形成的结果是放射性渐变。通过不停地叠加圆形, 使得先前绘制的圆形的透明度越来越暗。通过增加循环数量绘制更多的圆形,图片中心的背景将会变成完全不透明。类型
示例
-使用
+globalCompositeOperation
属性使用
globalCompositeOperation
属性这是一段使用
@@ -48,7 +48,7 @@globalCompositeOperation
属性的简单的代码片段,绘制了 2 个矩形在重叠时相互排斥的情况。JavaScript
修改下面的代码并在线查看 canvas 的变化:
-Playable code
+Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html index 9e6b2ae4198fdf..d6b4479f82d66d 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html @@ -29,7 +29,7 @@选项
示例
-使用
+imageSmoothingEnabled
属性使用
imageSmoothingEnabled
属性本示例比较了三个图像。第一个图像以其自然大小绘制,第二个图像缩放为 3 倍并启用了图像平滑,而第三个图像缩放为 3 倍但禁用了图像平滑。
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/index.html index 11359083c69475..b22f9ec3115784 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/index.html +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/index.html @@ -81,7 +81,7 @@结果
{{EmbedLiveSample('Basic_example', 700, 330)}}
-绘制矩形
+绘制矩形
以下是 3 个绘制矩形位图的方法。
@@ -95,7 +95,7 @@绘制文本
+绘制文本
下面是绘制文本的方法。参见 {{domxref("TextMetrics")}} 对象获取文本属性。
@@ -108,7 +108,7 @@-
线型
+线型
下面的方法和属性控制如何绘制线。
@@ -129,7 +129,7 @@线
- 描述在哪里开始绘制线段。
-文本样式
+文本样式
下面的属性控制如何设计文本。
@@ -144,7 +144,7 @@填充和描边样式
+填充和描边样式
填充设计用于图形内部的颜色和样式,描边设计用于图形的边线。
@@ -155,7 +155,7 @@渐变和图案
+渐变和图案
-
- {{domxref("CanvasRenderingContext2D.createLinearGradient()")}}
@@ -166,7 +166,7 @@
阴影
+阴影
-
- {{domxref("CanvasRenderingContext2D.shadowBlur")}}
@@ -179,7 +179,7 @@阴
- 阴影垂直方向的偏移量。默认 0.
路径
+路径
下面的方法用来操作对象的路径。
@@ -206,7 +206,7 @@路
- 创建一个矩形路径,矩形的起点位置是 (x, y) ,尺寸为 width 和 height。
-绘制路径
+绘制路径
-
- {{domxref("CanvasRenderingContext2D.fill()")}}
@@ -225,7 +225,7 @@变换
+变换
在 CanvasRenderingContext2D 渲染背景中的对象会有一个当前的变换矩阵,一些方法可以对其进行控制。当创建当前的默认路径,绘制文本、图形和{{domxref("Path2D")}}对象的时候,会应用此变换矩阵。下面列出的方法保持历史和兼容性的原因,是为了{{domxref("SVGMatrix")}}对象现在能够应用于大部分 API ,将来会被替换。
@@ -246,7 +246,7 @@变
- 使用单位矩阵重新设置当前的变换。
合成
+合成
-
- {{domxref("CanvasRenderingContext2D.globalAlpha")}}
@@ -255,14 +255,14 @@合
- 通过
globalAlpha
应用,设置如何在已经存在的位图上绘制图形和图像。绘制图像
+绘制图像
-
- {{domxref("CanvasRenderingContext2D.drawImage()")}}
- 绘制指定的图片。该方法有多种格式,提供了很大的使用灵活性。
像素控制
+像素控制
参见 {{domxref("ImageData")}} 对象。
@@ -275,14 +275,14 @@-
图像平滑
+图像平滑
-
- {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}
- 图像平滑的方式;如果禁用,缩放时,图像不会被平滑处理。
canvas 状态
+canvas 状态
CanvasRenderingContext2D渲染环境包含了多种绘图的样式状态(属性有线的样式、填充样式、阴影样式、文本样式)。下面的方法会帮助你使用这些状态:
@@ -295,7 +295,7 @@-
点击区域
+点击区域
-
- {{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}
@@ -306,9 +306,9 @@不标准的 APIs
+不标准的 APIs
-临时的和 WebKit 内核
+临时的和 WebKit 内核
很多 APIs 不赞成使用并且将来会被删除。
@@ -343,7 +343,7 @@临
- 使用{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} 替代。
仅是临时的
+仅是临时的
-
- {{non-standard_inline}}
@@ -352,7 +352,7 @@CanvasRenderingContext2D.getContextAttributes()
仅是临时的
- 受
WebGLRenderingContext
方法的启发,如果 Canvas 上下文丢失了,会返回true
,否则返回false
。WebKit 特有的
+WebKit 特有的
- {{non-standard_inline}}
@@ -366,14 +366,14 @@CanvasRenderingContext2D.webkitBackingStorePixelRatio
WebKit 特有
+-
Gecko 特有的
+Gecko 特有的
-
- {{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}
- CSS 和 SVG 滤镜 作为 Canvas APIs。 可能在新版本的规范中会标准化。
有前缀的 APIs
+有前缀的 APIs
-
- {{non-standard_inline}}
@@ -400,7 +400,7 @@CanvasRenderingContext2D.mozCurrentTransform
有前缀的
- 这个方法在 Gecko 1.9 中引入,从 Gecko 7.0. 开始删除。
内部的 APIs (chrome-context 特有的)
+内部的 APIs (chrome-context 特有的)
- {{non-standard_inline}} {{domxref("CanvasRenderingContext2D.asyncDrawXULElement()")}}
@@ -411,22 +411,22 @@IE 浏览器
IE 浏览器
-
- {{non-standard_inline}}
CanvasRenderingContext2D.msFillRule
- 应用的填充规则 。必须是
evenodd
或者nonzero
(默认)。规范
+规范
{{Specifications}} -浏览器兼容性
+浏览器兼容性
{{Compat("api.CanvasRenderingContext2D")}}
-参见
+参见
- {{domxref("HTMLCanvasElement")}}
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/linecap/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/linecap/index.html index 64e6734dd9975a..5ca89837f7f222 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/linecap/index.html +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/linecap/index.html @@ -28,7 +28,7 @@选项
示例
-使用
+lineCap
属性使用
lineCap
属性这是一段简单的代码片段,使用
@@ -53,7 +53,7 @@lineCap
属性绘制以圆形结尾的线段。JavaScript
修改下面的代码并在线查看 canvas 的变化:
-Playable code
+Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> @@ -97,7 +97,7 @@Playable code
{{ EmbedLiveSample('Playable_code', 700, 360) }}
-+
lineCap
例子
lineCap
例子在这个例子中绘制了 3 条线段,每条线段都设置了不同的
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/linedashoffset/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/linedashoffset/index.html index 6a31a4b4b631f1..11cd2986afad8d 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/linedashoffset/index.html +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/linedashoffset/index.html @@ -93,7 +93,7 @@lineCap
属性值。通过 2 条导航线能够精确地看到 3 条已绘制线段之间的不同。每条线段的顶端和末端都能在导航线上准确的反映出来。Playable code
{{ EmbedLiveSample('Playable_code', 700, 380) }}
-“蚂蚁线”
+“蚂蚁线”
”蚂蚁线“效果是一种动画技巧,经常出现在计算机绘图程序的套索工具中。 它能帮助用户根据图片背景动态变化的边界来区分选择的边界。
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/linejoin/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/linejoin/index.html index 473369aa0ad94b..c090483e645e29 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/linejoin/index.html +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/linejoin/index.html @@ -32,7 +32,7 @@选项
示例
-使用
+lineJoin
属性使用
lineJoin
属性这是一段使用
@@ -58,7 +58,7 @@lineJoin
属性的简单的代码片段。JavaScript
修改下面的代码并在线查看 canvas 的变化:
-Playable code
+Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> @@ -103,7 +103,7 @@Playable code
{{ EmbedLiveSample('Playable_code', 700, 380) }}
-+
lineJoin
例子
lineJoin
例子下面的例子绘制了 3 条不同的路径,演示
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/measuretext/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/measuretext/index.html index 39f0b4fe1e4e7b..41cadbe980c1b9 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/measuretext/index.html +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/measuretext/index.html @@ -11,7 +11,7 @@lineJoin
属性 3 种不同的设置。-
CanvasRenderingContext2D
.measureText()
方法返回一个关于被测量文本{{domxref("TextMetrics")}} 对象包含的信息(例如它的宽度)。语法
+语法
ctx.measureText(text);@@ -50,7 +50,7 @@浏览器兼容性
{{Compat("api.CanvasRenderingContext2D.measureText")}}
-参见
+参见
- 接口定义, {{domxref("CanvasRenderingContext2D")}}.
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/miterlimit/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/miterlimit/index.html index af8dfb75216553..532a2178165ce7 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/miterlimit/index.html +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/miterlimit/index.html @@ -28,12 +28,12 @@简释
示例
-使用
+miterLimit
属性使用
miterLimit
属性查看 Canvas Tutorial 中的 Applying styles and color 章节,获取更多信息。
-Playable code
+Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/scale/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/scale/index.html index 1b1f4edeea9049..871d2a7802c53d 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/scale/index.html +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/scale/index.html @@ -25,7 +25,7 @@参数
示例
-使用
+scale
方法使用
scale
方法这是一段使用
@@ -61,7 +61,7 @@scale
方法的简单的代码片段。结果
{{ EmbedLiveSample('Scaling_a_shape', 700, 180) }}
-使用 scale 水平或竖直翻转
+使用 scale 水平或竖直翻转
你可以使用
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowblur/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowblur/index.html index 2d25910d7b666b..dbfcabe3289bd3 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowblur/index.html +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowblur/index.html @@ -19,7 +19,7 @@ctx.scale(-1, 1)
水平翻转上下文,使用ctx.scale(1, -1)
垂直翻转上下文。在这个例子中,"Hello world!" 被水平翻转。语法
示例
-使用
+shadowBlur
属性使用
shadowBlur
属性这是一段简单的代码片段,使用
@@ -43,7 +43,7 @@shadowblur 属性设置模糊阴影。
注意:只有设置 shadowColor 属性值为不透明,阴影才会被绘制。JavaScript
修改下面的代码并在线查看 canvas 的变化:
-Playable code
+Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowcolor/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowcolor/index.html index 3673443421fc5b..6bb1ab24f9a782 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowcolor/index.html +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowcolor/index.html @@ -19,7 +19,7 @@语法
示例
-使用
+shadowColor
属性使用
shadowColor
属性这是一段简单的代码片段,使用
@@ -44,7 +44,7 @@shadowColor
属性设置阴影的颜色。注意:shadowColor 属性设置成不透明的,并且 {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}、 {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}} 或者 {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}} 属性不为 0,阴影才会被绘制。JavaScript
修改下面的代码并在线查看 canvas 的变化:
-Playable code
+Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsetx/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsetx/index.html index 853f4a0d7ae8c9..1ac28ccb572fc3 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsetx/index.html +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsetx/index.html @@ -19,7 +19,7 @@Syntax
示例
-使用
+shadowOffsetX
属性使用
shadowOffsetX
属性这是一段简单的代码片段,使用
@@ -44,7 +44,7 @@shadowOffsetX
属性设置阴影的水平偏移量。注意:将 shadowColor 属性设置成不透明,阴影才会被绘制。JavaScript
修改下面的代码并在线查看 canvas 的变化:
-Playable code
+Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsety/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsety/index.html index 4d1e5b42064d8a..af5a0cd01efdca 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsety/index.html +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/shadowoffsety/index.html @@ -19,7 +19,7 @@语法
示例
-使用
+shadowOffsetY
属性使用
shadowOffsetY
属性这是一段简单的代码片段,使用
@@ -44,7 +44,7 @@shadowOffsetY
属性绘制阴影垂直偏移量。注意:将 shadowColor 属性设置成不透明,阴影才会被绘制。JavaScript
修改下面的代码并在线查看 canvas 的变化:
-Playable code
+Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.html index 3ebc5c0f809f71..9e10c9aca70670 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.html +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/strokestyle/index.html @@ -32,7 +32,7 @@选项
示例
-使用
+strokeStyle
属性设置不同的颜色使用
strokeStyle
属性设置不同的颜色这是一段简单的代码片段,使用
@@ -53,7 +53,7 @@strokeStyle
属性设置不同的颜色。JavaScript
修改下面的代码并在线查看 canvas 的变化:
-Playable code
+Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> @@ -93,7 +93,7 @@Playable code
{{ EmbedLiveSample('Playable_code', 700, 360) }}
-+
strokeStyle
例子
strokeStyle
例子这个例子使用
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/textalign/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/textalign/index.html index 6fa2356f65e20e..f005e561d74fd0 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/textalign/index.html +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/textalign/index.html @@ -41,7 +41,7 @@strokeStyle 属性改变图形轮廓线的颜色。
我们使用 {{domxref("CanvasRenderingContext2D.arc", "arc()")}} 绘制圆形来代替正方形。选项
示例
-使用
+textAlign
属性使用
textAlign
属性这是一段简单的代码片段,使用
@@ -63,7 +63,7 @@textAlign
属性设置文本的不同对齐方式。JavaScript
修改下面的代码并在线查看 canvas 的变化:
-Playable code
+Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/textbaseline/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/textbaseline/index.html index 30e2821ba041fb..3569c73efaf3c3 100644 --- a/files/zh-cn/web/api/canvasrenderingcontext2d/textbaseline/index.html +++ b/files/zh-cn/web/api/canvasrenderingcontext2d/textbaseline/index.html @@ -42,7 +42,7 @@选项
示例
-使用
+textBaseline
属性使用
textBaseline
属性这是一段简单的代码片段,使用
@@ -72,7 +72,7 @@textBaseline
属性设置不同的文本基线。JavaScript
--Playable code
+Playable code
<canvas id="canvas" width="550" height="500"></canvas>diff --git a/files/zh-cn/web/api/characterdata/index.html b/files/zh-cn/web/api/characterdata/index.html index 06feb4f7442ee5..5453ee1c79f4b4 100644 --- a/files/zh-cn/web/api/characterdata/index.html +++ b/files/zh-cn/web/api/characterdata/index.html @@ -22,7 +22,7 @@属性
- 返回其父节点所在的子节点列表(children list)中前一个元素节点 {{domxref("Element")}},或者
-null
。方法
+方法
从其父级 {{domxref("Node")}} 继承方法,并且实现了 {{domxref("ChildNode")}} 和{{domxref("NonDocumentTypeChildNode")}} 接口。
@@ -41,7 +41,7 @@方法
- 返回一个包含了从
-CharacterData.data
中的指定位置开始,指定长度的{{domxref("DOMString")}} 。
规范
+规范
{{Specifications}} diff --git a/files/zh-cn/web/api/clearinterval/index.html b/files/zh-cn/web/api/clearinterval/index.html index b99a5ad3cc3734..22cb718a7cfb48 100644 --- a/files/zh-cn/web/api/clearinterval/index.html +++ b/files/zh-cn/web/api/clearinterval/index.html @@ -34,7 +34,7 @@示例
-规范
+规范
{{Specifications}} diff --git a/files/zh-cn/web/api/cleartimeout/index.html b/files/zh-cn/web/api/cleartimeout/index.html index f7cb951225a6f3..be9f2cfa3c89a0 100644 --- a/files/zh-cn/web/api/cleartimeout/index.html +++ b/files/zh-cn/web/api/cleartimeout/index.html @@ -13,7 +13,7 @@-
WindowOrWorkerGlobalScope
内置的clearTimeout()
方法取消了先前通过调用{{domxref("setTimeout()")}}建立的定时器。语法
+语法
scope.clearTimeout(timeoutID)@@ -28,7 +28,7 @@Parameters
值得注意的是,{{domxref("setTimeout()")}} 和 {{domxref("setInterval()")}} 使用共享的 ID 池,意味着在技术上可以混用
-clearTimeout()
和 {{domxref("clearInterval()")}}。但是,为了清楚起见,你应该避免这样做。示例
+示例
在一个网页中运行如下脚本,并且点击一次页面。一秒钟后你会看见弹出一条信息。如果你在一秒内不停点击页面,弹出框将不再出现。
@@ -53,11 +53,11 @@示例
}; window.onclick = function() { alarm.setup() }; -注意
+注意
传入一个错误的 ID 给
-clearTimeout()
不会有任何影响;也不会抛出异常。规范
+规范
{{Specifications}} @@ -65,7 +65,7 @@浏览器兼容
{{Compat("api.clearTimeout")}} -更多
+更多
- {{domxref("WindowTimers.setTimeout()")}}
diff --git a/files/zh-cn/web/api/console/group/index.html b/files/zh-cn/web/api/console/group/index.html index 0f424c349c6660..88b6887867de7b 100644 --- a/files/zh-cn/web/api/console/group/index.html +++ b/files/zh-cn/web/api/console/group/index.html @@ -4,16 +4,16 @@ translation_of: Web/API/Console/group ---{{ ApiRef() }}
-概述
+概述
在 Web 控制台上创建一个新的分组。随后输出到控制台上的内容都会被添加一个缩进,表示该内容属于当前分组,直到调用{{ domxref("console.groupEnd()") }}之后,当前分组结束。
-语法
+语法
console.group();参数
无。
备注
在文档{{ domxref("console") }}中查看在控制台中使用分组,了解更多详细内容。
-规范
+规范
不属于任何公开的规范
浏览器兼容性
{{Compat("api.console.group")}} diff --git a/files/zh-cn/web/api/console/groupcollapsed/index.html b/files/zh-cn/web/api/console/groupcollapsed/index.html index d8867386ad7bbc..20c763b7c18895 100644 --- a/files/zh-cn/web/api/console/groupcollapsed/index.html +++ b/files/zh-cn/web/api/console/groupcollapsed/index.html @@ -4,16 +4,16 @@ translation_of: Web/API/Console/groupCollapsed ---{{ ApiRef() }}
-概述
+概述
在 Web 控制台上创建一个新的分组。随后输出到控制台上的内容都会被添加一个缩进,表示该内容属于当前分组,直到调用
-console.groupEnd()
之后,当前分组结束。和 {{ domxref("console.group()") }}方法的不同点是,新建的分组默认是折叠的。用户必须点击一个按钮才能将折叠的内容打开。语法
+语法
console.groupCollapsed();参数
无
备注
在文档{{ domxref("console") }}中查看在控制台中使用分组,了解更多详细内容。
-规范
+规范
不属于任何公开的规范
浏览器
{{Compat("api.console.groupCollapsed")}} diff --git a/files/zh-cn/web/api/console/index.html b/files/zh-cn/web/api/console/index.html index 458af336af9c4d..1593a4ad306f59 100644 --- a/files/zh-cn/web/api/console/index.html +++ b/files/zh-cn/web/api/console/index.html @@ -77,7 +77,7 @@方法
- 打印一个警告信息,可以使用 string substitution 和额外的参数。
-用法
+用法
输出文本到控制台
diff --git a/files/zh-cn/web/api/console/log/index.html b/files/zh-cn/web/api/console/log/index.html index 4b58a410cee516..32261690185c5f 100644 --- a/files/zh-cn/web/api/console/log/index.html +++ b/files/zh-cn/web/api/console/log/index.html @@ -5,11 +5,11 @@ ---{{ ApiRef() }}
-概述
+概述
向 Web 控制台输出一条消息。
-语法
+语法
console.log(obj1 [, obj2, ..., objN]); console.log(msg [, subst1, ..., substN]); @@ -34,7 +34,7 @@浏览器兼容性
{{Compat("api.console.log")}} -规范
+规范
不属于任何公开的规范
diff --git a/files/zh-cn/web/api/console/time/index.html b/files/zh-cn/web/api/console/time/index.html index ddf7633f1f8549..956b77d0fc1c91 100644 --- a/files/zh-cn/web/api/console/time/index.html +++ b/files/zh-cn/web/api/console/time/index.html @@ -11,7 +11,7 @@{{AvailableInWorkers}}
-语法
+语法
console.time(timerName);@@ -23,7 +23,7 @@参数
- 新计时器的名字。用来标记这个计时器,作为参数调用 {{ domxref("console.timeEnd()") }}可以停止计时并将经过的时间在终端中打印出来。
-规范
+规范
{{Specifications}} diff --git a/files/zh-cn/web/api/console/trace/index.html b/files/zh-cn/web/api/console/trace/index.html index 63a66b13b7df27..e1821987487bae 100644 --- a/files/zh-cn/web/api/console/trace/index.html +++ b/files/zh-cn/web/api/console/trace/index.html @@ -11,7 +11,7 @@在页面{{ domxref("console") }}文档中查看堆栈跟踪的详细介绍和示例。
-语法
+语法
console.trace( [...any, ...data ]);@@ -22,7 +22,7 @@参数
- Zero or more objects to be output to console along with the trace. These are assembled and formatted the same way they would be if passed to the {{domxref("console.log()")}} method.
-Example
+Example
function foo() { function bar() { @@ -40,7 +40,7 @@-Example
foo <anonymous>规范
+规范
{{Specifications}} diff --git a/files/zh-cn/web/api/crypto_property/index.html b/files/zh-cn/web/api/crypto_property/index.html index 2557b3a3b37e14..8e41cdf03855ff 100644 --- a/files/zh-cn/web/api/crypto_property/index.html +++ b/files/zh-cn/web/api/crypto_property/index.html @@ -13,7 +13,7 @@语法
var cryptoObj = window.crypto || window.msCrypto; // for IE 11-范例
+范例
使用 {{domxref("Window.crypto")}} 来访问getRandomValues() 方法。
diff --git a/files/zh-cn/web/api/css_object_model/determining_the_dimensions_of_elements/index.html b/files/zh-cn/web/api/css_object_model/determining_the_dimensions_of_elements/index.html index f83ad23706c869..93e0ed339c8a3a 100644 --- a/files/zh-cn/web/api/css_object_model/determining_the_dimensions_of_elements/index.html +++ b/files/zh-cn/web/api/css_object_model/determining_the_dimensions_of_elements/index.html @@ -11,28 +11,28 @@当想要确认元素的宽高时有几种属性可以选择,但是我们很难确认使用哪个属性才是最适合的。本文将帮助你做出正确的选择。
-元素占用了多少空间?
+元素占用了多少空间?
如果你需要知道元素总共占用了多少空间,包括可视内容、滚动条(如果有的话)、内边距和边框的宽度,你会使用
-offsetWidth
和 offsetHeight 属性, 大多数情况下,当元素没有什么形状上的变化时,他们与 getBoundingClientRect()的宽高一致。但是如果发生变化,offsetWidth 和 offsetHeight 将返回元素的布局宽高,而 getBoundingClientRect() 将返回实际渲染的宽高。例如:如果元素的宽 width:100px,变化 transform:scale(0.5),此时 getBoundingClientRect() 将返回宽 50,而 offsetWidth 将返回宽 100.显示内容尺寸是多少?
+显示内容尺寸是多少?
如果你需要知道展示区域内容占用了多少空间,包括内边距但是不包括边框、外边距或者滚动条,你会使用clientWidth和clientHeight属性:
-内容有多大?
+内容有多大?
如果你想要知道内容区域的实际大小,而不局限于可见区域的话,你会使用
scrollWidth
和scrollHeight属性。即使使用了滚动条仅有部分内容可见,这两个属性仍会返回元素的完整内容宽高例如,一个 300x300 像素 的滚动盒子里放置了一个 600x400 像素的元素,scrollWidth 将会返回 600,scrooHeight 返回 400.
-规范
+规范
http://www.w3.org/TR/cssom-view/
-参考文献
+参考文献
MSDN Measuring Element Dimension and Location
diff --git a/files/zh-cn/web/api/css_object_model/using_dynamic_styling_information/index.html b/files/zh-cn/web/api/css_object_model/using_dynamic_styling_information/index.html index 3573419fc44c36..08c703b2b86c9f 100644 --- a/files/zh-cn/web/api/css_object_model/using_dynamic_styling_information/index.html +++ b/files/zh-cn/web/api/css_object_model/using_dynamic_styling_information/index.html @@ -18,7 +18,7 @@要从
-document
中获取style
对象,可以使用 {{domxref("document.styleSheets")}} 属性,并使用索引来获取某个对象(例如,document.styleSheets[0]
是该文档中的第一个样式表)。通过 CSSOM 修改样式表
+通过 CSSOM 修改样式表
<html> <head> @@ -44,7 +44,7 @@通过 CSSOM
若要使用 CSS 语法修改文档的样式,可以插入样式规则,或者插入{{HTMLElement("style")}} 标签,并将其
-innerHTML
属性设置为期望的 CSS。修改元素样式
+修改元素样式
元素的 {{domxref("HTMLElement.style", "style")}} 属性(见下面的 DOM 样式对象部分)也可以用于获取和设置元素的样式。然而,该属性只能返回通过内敛方式设置的样式属性(例如
@@ -93,7 +93,7 @@<td style="background-color: lightblue">
返回 "background-color:lightblue
",或者直接针对哪个元素使用element.style.propertyName
, 即使样式表中还有该元素上的其他样式)。修改元素样
-
document.defaultView
对象的 {{domxref("window.getComputedStyle", "getComputedStyle()")}} 返回某个元素的所有经过计算的样式。查看Example 6: getComputedStyle 示例章节了解更多使用该方法的信息。.DOM 样式对象
+DOM 样式对象
@@ -128,7 +128,7 @@
style
对象表示了一个单独的样式声明。不像document.styleSheets
集合中每个单独的样式规则,样式规则是通过document
对象或者应用改样式的元素来访问的。它表示特定元素的内联样式。DOM 样式对象
style 的 media 和 type 给不给出都可以。
-使用
+setAttribute
方法使用
setAttribute
方法注意,你也可以通过获得元素的引用,然后使用它的
diff --git a/files/zh-cn/web/api/cssconditionrule/index.html b/files/zh-cn/web/api/cssconditionrule/index.html index 44759e01a55161..c69ca572de9706 100644 --- a/files/zh-cn/web/api/cssconditionrule/index.html +++ b/files/zh-cn/web/api/cssconditionrule/index.html @@ -35,7 +35,7 @@setAttribute
方法,指定 CSS 属性和值,来改变该元素的样式。Methods
The
-CSSConditionRule
derives from {{domxref("CSSRule")}}, {{domxref("CSSGroupingRule")}} and inherits all methods of these classes. It has no specific property of its own.Specifications
+Specifications
{{Specifications}} diff --git a/files/zh-cn/web/api/cssgroupingrule/index.html b/files/zh-cn/web/api/cssgroupingrule/index.html index 2996e0455c962c..238a23c6f093ae 100644 --- a/files/zh-cn/web/api/cssgroupingrule/index.html +++ b/files/zh-cn/web/api/cssgroupingrule/index.html @@ -19,7 +19,7 @@- {{domxref("CSSPageRule")}}
-语法
+语法
The syntax is described using the WebIDL format.
@@ -50,7 +50,7 @@所有 CSSGroupingRule 实
- Inserts a new style rule into the current style sheet.
-规范
+规范
{{Specifications}} diff --git a/files/zh-cn/web/api/cssrule/csstext/index.html b/files/zh-cn/web/api/cssrule/csstext/index.html index 6d17a87709a40c..b3f28c39a48889 100644 --- a/files/zh-cn/web/api/cssrule/csstext/index.html +++ b/files/zh-cn/web/api/cssrule/csstext/index.html @@ -13,12 +13,12 @@cssText 返回样式规则所包含的实际文本。想要能够动态的设置一个样式表规则,查看使用动态样式信息。
-语法
+语法
string = cssRule.cssText-例子
+例子
<style> body { background-color: darkblue; } @@ -30,7 +30,7 @@-例子
规范
+规范
- DOM Level 2 Style CSS - Interface CSSStyleRule (introduced in DOM Level 2)
diff --git a/files/zh-cn/web/api/cssrule/parentstylesheet/index.html b/files/zh-cn/web/api/cssrule/parentstylesheet/index.html index a630c0d29d06ab..b62b75239ee403 100644 --- a/files/zh-cn/web/api/cssrule/parentstylesheet/index.html +++ b/files/zh-cn/web/api/cssrule/parentstylesheet/index.html @@ -5,32 +5,32 @@ ---{{ APIRef("CSSOM") }}
-概述
+概述
parentStyleSheet 返回在当前规则中已定义的样式表对象。
-语法
+语法
stylesheet = cssRule.parentStyleSheet-参数
+参数
-
stylesheet
是一个样式表对象。例子
+例子
if ( bgRule.parentStyleSheet != mySheet ) { // alien style rule! }-备注
+备注
查看 Gecko DOM Reference:event#DOM_styleSheet_Object 有关样式表的对象接口的详细信息。
-规范
+规范
DOM Level 2 Style - cssRule
diff --git a/files/zh-cn/web/api/cssstylerule/selectortext/index.html b/files/zh-cn/web/api/cssstylerule/selectortext/index.html index 4f90e0e9d35f87..42f3974c1e6bfc 100644 --- a/files/zh-cn/web/api/cssstylerule/selectortext/index.html +++ b/files/zh-cn/web/api/cssstylerule/selectortext/index.html @@ -5,16 +5,16 @@ ---{{APIRef("CSSOM") }}-概述
+概述
-
CSSRule.selectorText
属性返回 CSS 规则的选择符文本,只读。动态设置 CSS 规则,请看 Using dynamic styling information.语法
+语法
string = cssRule.selectorText-例子
+例子
// for cssrule: body { background-color: darkblue; } var stylesheet = document.styleSheets[0]; @@ -22,11 +22,11 @@-例子
alert(stylesheet.cssRules[0].selectorText); // body说明
+说明
浏览器解析选择符的时候可能会剔除不必要的空白字符
-标准
+标准
- Document Object Model CSS - #CSS-CSSRuleCSS
diff --git a/files/zh-cn/web/api/cssstylerule/style/index.html b/files/zh-cn/web/api/cssstylerule/style/index.html index caddf7696d4a3d..879aed0ad4d342 100644 --- a/files/zh-cn/web/api/cssstylerule/style/index.html +++ b/files/zh-cn/web/api/cssstylerule/style/index.html @@ -5,16 +5,16 @@ ---{{ ApiRef() }}
-概述
+概述
返回 一个 {{ domxref("CSSStyleDeclaration") }}接口对象,它代表了{{ DOMXref("CSSRule") }}的 declaration block。
-语法
+语法
styleObj = cssRule.style-例子
+例子
function stilo() { alert(document.styleSheets[0].cssRules[0].style.cssText); @@ -22,7 +22,7 @@-例子
// 弹出 "background-color: gray;"备注
+备注
declaration block 是样式规则中花括号内的部分(选择器就在花括号的外部)
@@ -32,10 +32,10 @@相关链接
- DOM CSS Properties
-规范
+规范
-浏览器兼容性
+浏览器兼容性
{{Compat("api.CSSStyleRule.style")}}
diff --git a/files/zh-cn/web/api/cssstylesheet/deleterule/index.html b/files/zh-cn/web/api/cssstylesheet/deleterule/index.html index fc23639ad3d61f..018acf3f208357 100644 --- a/files/zh-cn/web/api/cssstylesheet/deleterule/index.html +++ b/files/zh-cn/web/api/cssstylesheet/deleterule/index.html @@ -5,22 +5,22 @@ ---{{ APIRef("CSSOM") }}
-概述
+概述
deleteRule方法用来从当前样式表对象中删除指定的样式规则。
-语法
+语法
stylesheet.deleteRule(index)-参数
+参数
-
index 是一个数字,用来指定样式规则的位置
.示例
+示例
myStyles.deleteRule(0);@@ -31,6 +31,6 @@相关链接
- insertRule
-规范
+规范
diff --git a/files/zh-cn/web/api/cssstylesheet/insertrule/index.html b/files/zh-cn/web/api/cssstylesheet/insertrule/index.html index ab80addd19a824..9e7f5e8b21c27c 100644 --- a/files/zh-cn/web/api/cssstylesheet/insertrule/index.html +++ b/files/zh-cn/web/api/cssstylesheet/insertrule/index.html @@ -17,11 +17,11 @@注意:尽管
insertRule()
是 {{domxref("CSSStyleSheet")}} 的一个方法,但它实际插入的地方是{{domxref("CSSStyleSheet", "", "", "1")}}.cssRules
的内部 {{domxref("CSSRuleList")}}。语法
+语法
stylesheet.insertRule(rule [, index])-参数
+参数
- @@ -53,7 +53,7 @@
rule
限制
- 如果
-rule
是 {{cssxref("@namespace")}} 并且规则列表中有另外的@import
和/或@namespace
规则,该方法中止并返回一个InvalidStateError
错误;示例
+示例
在样式表顶部插入新的规则
@@ -62,7 +62,7 @@在样式表顶部插入新的规
myStyle.insertRule("#blanc { color: white }", 0);-实现一个添加样式表规则的函数
+实现一个添加样式表规则的函数
/** * 在文档中添加一条样式表规则(这可能是动态改变 class 名的更好的实现方法, @@ -108,7 +108,7 @@-实现一个添加样式表规则的函数
} }兼容补丁
+兼容补丁
以下补丁将会在 IE 5-8 中纠正提供给
@@ -153,7 +153,7 @@insertRule()
的参数,使其标准化。to standardize them in Internet Explorer 5–8. 它通过一个函数对insertRule()
进行补充,使得在参数传递给原生的insertRule()
函数之前将其中的选择器从规则中分离出来。兼容补丁
})(CSSStyleSheet.prototype); -规范
+规范
{{Specifications}} diff --git a/files/zh-cn/web/api/customevent/index.html b/files/zh-cn/web/api/customevent/index.html index bdee897dec4bf5..57163e3be297bc 100644 --- a/files/zh-cn/web/api/customevent/index.html +++ b/files/zh-cn/web/api/customevent/index.html @@ -34,7 +34,7 @@方法
{{Page("/zh-CN/docs/Web/API/Event", "Methods")}}
-方法概述
+方法概述
@@ -44,7 +44,7 @@
-方法概述
属性
+属性
@@ -61,9 +61,9 @@
-属性
方法
+方法
-initCustomEvent()
+initCustomEvent()
初始化一个自定义事件的方式和初始化一个标准 DOM 事件的方式非常相似。
@@ -75,7 +75,7 @@initCustomEvent()
); -参数
+参数
-
- @@ -98,7 +98,7 @@
type
构造函数
) -参数
+参数
-
- @@ -107,7 +107,7 @@
type
参数
- 一个提供事件的配置信息对象。查看CustomEventInit了解更多详情。
CustomEventInit
+CustomEventInit
-
- @@ -118,7 +118,7 @@
bubbles
CustomEventInit
- 当事件初始化时传递的数据。
CustomEvent 用法示例
+CustomEvent 用法示例
// 添加一个适当的事件监听器 obj.addEventListener("cat", function(e) { process(e.detail) }) diff --git a/files/zh-cn/web/api/datatransfer/index.html b/files/zh-cn/web/api/datatransfer/index.html index eace72c23fdddc..92664f5db51f53 100644 --- a/files/zh-cn/web/api/datatransfer/index.html +++ b/files/zh-cn/web/api/datatransfer/index.html @@ -64,7 +64,7 @@不推荐的属性
- 提供拖动操作中的项目数。在 Firefox71 中删除。
方法
+方法
标准方法
@@ -117,7 +117,7 @@浏览器兼容性
{{Compat("api.DataTransfer")}}
-参见
+参见
- 拖与放
diff --git a/files/zh-cn/web/api/datatransfer/setdragimage/index.html b/files/zh-cn/web/api/datatransfer/setdragimage/index.html index ade8466e1b4de8..bac2536261ff20 100644 --- a/files/zh-cn/web/api/datatransfer/setdragimage/index.html +++ b/files/zh-cn/web/api/datatransfer/setdragimage/index.html @@ -15,7 +15,7 @@通常在 {{event("dragstart")}} 事件处理程序中调用此方法。
-语法
+语法
void dataTransfer.setDragImage(img, xOffset, yOffset);@@ -38,7 +38,7 @@参数
-返回值
+返回值
-
- void
@@ -112,7 +112,7 @@浏览器兼容性
{{Compat("api.DataTransfer.setDragImage")}} -参考链接
+参考链接
{{page("/en-US/docs/Web/API/DataTransfer", "See also")}}
diff --git a/files/zh-cn/web/api/datatransferitem/webkitgetasentry/index.html b/files/zh-cn/web/api/datatransferitem/webkitgetasentry/index.html index 94b41e8765c89e..88ba073e95a2cc 100644 --- a/files/zh-cn/web/api/datatransferitem/webkitgetasentry/index.html +++ b/files/zh-cn/web/api/datatransferitem/webkitgetasentry/index.html @@ -13,7 +13,7 @@DataTransferItem.webkitGetAsEntry(); -
参数
+参数
没有。
@@ -21,7 +21,7 @@返回值
-
FileSystemEntry
基于 A 的对象描述被删除的项目。这将是FileSystemFileEntry
或FileSystemDirectoryEntry
。示例
+示例
在此示例中,创建了一个放置区域,该放置区域
@@ -162,7 +162,7 @@drop
通过扫描已删除的文件和目录来响应事件,从而输出分层目录列表。Specifications
此 API 没有官方的 W3C 或 WHATWG 规范。
-浏览器兼容性
+浏览器兼容性
{{COMPAT("api.DataTransferItem.webkitGetAsEntry")}}
diff --git a/files/zh-cn/web/api/datatransferitemlist/length/index.html b/files/zh-cn/web/api/datatransferitemlist/length/index.html index 1a774c0e3d6da2..fb32b83ce6051b 100644 --- a/files/zh-cn/web/api/datatransferitemlist/length/index.html +++ b/files/zh-cn/web/api/datatransferitemlist/length/index.html @@ -5,16 +5,16 @@ ---{{domxref("DataTransferItemList")}} 接口的只读属性
-length
返回当前拖动项列表中项目的数量。语法
+语法
length = DataTransferItemList.length;-值
+值
列表中拖动项的数量,如果列表为空或禁用则为 0。如果列表的{{domxref("DataTransfer")}}对象未与拖动数据存储关联,则认为拖动列表被禁用。
-示例
+示例
这个例子演示了
diff --git a/files/zh-cn/web/api/devicemotionevent/accelerationincludinggravity/index.html b/files/zh-cn/web/api/devicemotionevent/accelerationincludinggravity/index.html index d97ef81ce54fab..93e4adeafc6738 100644 --- a/files/zh-cn/web/api/devicemotionevent/accelerationincludinggravity/index.html +++ b/files/zh-cn/web/api/devicemotionevent/accelerationincludinggravity/index.html @@ -15,12 +15,12 @@length
属性的用法。此值通常不如{{domxref("DeviceMotionEvent.acceleration")}}实用,但是在部分不能自动从加速度数据中移除重力加速度的设备(例如没有陀螺仪的设备),是唯一可用值。
-语法
+语法
var acceleration = instanceOfDeviceMotionEvent.accelerationIncludingGravity;-值
+值
diff --git a/files/zh-cn/web/api/devicemotioneventacceleration/index.html b/files/zh-cn/web/api/devicemotioneventacceleration/index.html index 414ffe7d695f2d..fcdd90679f3cda 100644 --- a/files/zh-cn/web/api/devicemotioneventacceleration/index.html +++ b/files/zh-cn/web/api/devicemotioneventacceleration/index.html @@ -28,6 +28,6 @@
accelerationIncludingGravity
是一个包括三轴(x、y、z)加速度信息的对象,每个轴都有自己的属性:属性
- 沿 Z 轴的加速度量(只读)
说明
+说明
{{Specifications}} diff --git a/files/zh-cn/web/api/deviceproximityevent/index.html b/files/zh-cn/web/api/deviceproximityevent/index.html index a6f37185aba777..6927952ee2be08 100644 --- a/files/zh-cn/web/api/deviceproximityevent/index.html +++ b/files/zh-cn/web/api/deviceproximityevent/index.html @@ -24,7 +24,7 @@示例
console.log("value: " + event.value, "max: " + event.max, "min: " + event.min
); }); -规范
+规范
diff --git a/files/zh-cn/web/api/document/adoptnode/index.html b/files/zh-cn/web/api/document/adoptnode/index.html index d7d42e68c538fb..0ca17209179f17 100644 --- a/files/zh-cn/web/api/document/adoptnode/index.html +++ b/files/zh-cn/web/api/document/adoptnode/index.html @@ -11,7 +11,7 @@
从 Gecko 1.9 (Firefox 3) 开始支持
-语法
+语法
node = document.adoptNode(externalNode);@@ -23,7 +23,7 @@语法
- 将要从外部文档导入的节点。
-例子
+例子
// 该函数用来从本文档的第一个 iframe 中获取第一个 element 元素, // 并插入到当前文档树中 @@ -66,7 +66,7 @@-例子
</body> </html>笔记
+笔记
有时候调用 adopNode 可能会失败因为节点资源来自不同的源,但是这不应该是浏览器的实现问题。
@@ -85,7 +85,7 @@笔记
即使你不执行导入动作,就执行插入外部文档中的节点.Firefox 目前也不会报错 (如果严格按标准执行,很多已有的网站都无法正常运行). 我们鼓励开发者严格按标准修改自己已有的不符合上述标准的代码。
-规范
+规范
- DOM Level 3 Core: Document.adoptNode
diff --git a/files/zh-cn/web/api/document/alinkcolor/index.html b/files/zh-cn/web/api/document/alinkcolor/index.html index fda77c0533e2ef..2f6b1227601974 100644 --- a/files/zh-cn/web/api/document/alinkcolor/index.html +++ b/files/zh-cn/web/api/document/alinkcolor/index.html @@ -16,13 +16,13 @@返回或设置文档体内的活动链接的颜色。mousedown 和 mouseup 事件之间的时间在一个链接是有效的。
-语法
+语法
color = document.alinkColor document.alinkColor = color color 可以是一个 “颜色名称”(例如,“blue”,“darkblue”,等)或者是一个 “十六进制的颜色值”(例如,#0000ff)-注意
+注意
这个属性在 Mozilla Firefox 浏览器的默认值是红色的(#ee0000 十六进制)。
diff --git a/files/zh-cn/web/api/document/anchors/index.html b/files/zh-cn/web/api/document/anchors/index.html index 4f53441d76eee5..a4e63defa42a9a 100644 --- a/files/zh-cn/web/api/document/anchors/index.html +++ b/files/zh-cn/web/api/document/anchors/index.html @@ -11,16 +11,16 @@-
概述
+概述
-
anchors
属性返回当前文档中的所有锚点元素。语法
+语法
nodeList = document.anchors-例子
+例子
if ( document.anchors.length >= 5 ) { dump("dump found too many anchors"); @@ -75,10 +75,10 @@例子
-备注
+备注
由于向后兼容的原因,该属性只返回那些拥有
-name 属性的 a 元素,而不是那些拥有
id
属性的a
元素。规范
+规范
diff --git a/files/zh-cn/web/api/document/applets/index.html b/files/zh-cn/web/api/document/applets/index.html index 91d718c6204eed..548772d44ef907 100644 --- a/files/zh-cn/web/api/document/applets/index.html +++ b/files/zh-cn/web/api/document/applets/index.html @@ -4,13 +4,13 @@ translation_of: Web/API/Document/applets ---{{ ApiRef() }}
-概述
+概述
-
applets
按顺序返回当前文档中所有的applet
对象。语法
+语法
nodeList = document.applets-例子
+例子
my_java_app = document.applets[1]; //获取当前页面的第二个 applet 对象。-规范
+规范
diff --git a/files/zh-cn/web/api/document/bgcolor/index.html b/files/zh-cn/web/api/document/bgcolor/index.html index 4e6283ff392843..c72eb27b8257c5 100644 --- a/files/zh-cn/web/api/document/bgcolor/index.html +++ b/files/zh-cn/web/api/document/bgcolor/index.html @@ -7,24 +7,24 @@-
bgColor
获取/设置当前文档的背景颜色语法
+语法
color = document.bgColor document.bgColor =color-参数
+参数
-
color
表示颜色的字符串如“red”,或者是十六进制的色值如“#ff0000”。示例
+示例
document.bgColor = "darkblue";-笔记
+笔记
这个属性在 Mozilla Firefox 中的默认值是白色“#ffffff”。
diff --git a/files/zh-cn/web/api/document/body/index.html b/files/zh-cn/web/api/document/body/index.html index ccc28a4aaced30..c97b1a98c67676 100644 --- a/files/zh-cn/web/api/document/body/index.html +++ b/files/zh-cn/web/api/document/body/index.html @@ -5,12 +5,12 @@ ---{{ApiRef}}-概述
+概述
返回当前文档中的
-<body>元素
或者<frameset>元素
.语法
+语法
var objRef = document.body; document.body = objRef;-示例
+示例
// 如果 HTML 结构为<body id="oldBodyElement"></body>,则: alert(document.body.id); // "oldBodyElement" @@ -20,10 +20,10 @@-示例
document.body = aNewBodyElement; alert(document.body.id); // "newBodyElement"介绍
+介绍
document.body
是包含当前页面内容的元素,对于拥有<body>元素的文档来说
,返回的是<body>元素
,对于一个拥有<frameset>元素的文档来说,返回的是最外层的
<frameset>元素
.-
该属性是可写的
,且为该属性赋的值必须是一个<body>元素。
规范
+规范
diff --git a/files/zh-cn/web/api/document/caretrangefrompoint/index.html b/files/zh-cn/web/api/document/caretrangefrompoint/index.html index dd72e43bcac485..430196e18db7b4 100644 --- a/files/zh-cn/web/api/document/caretrangefrompoint/index.html +++ b/files/zh-cn/web/api/document/caretrangefrompoint/index.html @@ -30,7 +30,7 @@参数
- 当前视图的纵向位置。
-示例
+示例
Basic demo: 点击文档,在点击的位置插入一行。
diff --git a/files/zh-cn/web/api/document/contenttype/index.html b/files/zh-cn/web/api/document/contenttype/index.html index 70c1882a43a5ab..8581d03a83e9ed 100644 --- a/files/zh-cn/web/api/document/contenttype/index.html +++ b/files/zh-cn/web/api/document/contenttype/index.html @@ -4,13 +4,13 @@ translation_of: Web/API/Document/contentType ---{{ ApiRef() }}
-概述
+概述
返回当前文档的 Content-Type(MIME) 类型。
-语法
+语法
contentType = document.contentType;-
该属性为只读。
备注
+备注
该属性的返回值是浏览器检测到的,不一定是直接读取 HTTP 响应头中的或者 HTML 中 meta 标签指定的值。
-规范
+规范
非标准属性,仅Gecko支持。
diff --git a/files/zh-cn/web/api/document/cookie/index.html b/files/zh-cn/web/api/document/cookie/index.html index 756a110856a3fc..a2c68147bc584e 100644 --- a/files/zh-cn/web/api/document/cookie/index.html +++ b/files/zh-cn/web/api/document/cookie/index.html @@ -12,7 +12,7 @@获取并设置与当前文档相关联的 cookie。可以把它当成一个
-getter and setter
。语法
+语法
读取所有可从此位置访问的 Cookie
@@ -47,7 +47,7 @@写一个新 cookie
备注: 在{{Gecko("6.0")}}前,被引号括起的路径的引号会被当做路径的一部分,而不是被当做定界符。现在已被修复。
-示例
+示例
示例 1: 简单用法
@@ -263,7 +263,7 @@示例用法:
alert(docCookies.getItem()); alert(docCookies.getItem("test1;=")); -安全
+安全
路径限制并不能阻止从其他路径访问 cookie. 使用简单的 DOM 即可轻易地绕过限制 (比如创建一个指向限制路径的,隐藏的iframe, 然后访问其
@@ -273,7 +273,7 @@contentDocument.cookie
属性). 保护 cookie 不被非法访问的唯一方法是将它放在另一个域名/子域名之下,利用同源策略保护其不被读取。安全
-
HttpOnly
属性可以阻止通过 javascript 访问 cookie,从而一定程度上遏制这类攻击。参见 Cookies and Security.备注
+备注
-
- 从 Firefox 2 起,有更好的客户端存储机制用以替代 cookie - WHATWG DOM Storage.
@@ -281,7 +281,7 @@备注
- 请注意,更多/更大的 cookies 意味着每个请求都要包含更繁重的数据传输。如果您只是需要存储些 "client-only" 的数据,那么郑重建议您使用 WHATWG DOM Storage.
规范
+规范
DOM Level 2: HTMLDocument.cookie
diff --git a/files/zh-cn/web/api/document/createcomment/index.html b/files/zh-cn/web/api/document/createcomment/index.html index 13621b20f9feec..efbfd5d3d305f2 100644 --- a/files/zh-cn/web/api/document/createcomment/index.html +++ b/files/zh-cn/web/api/document/createcomment/index.html @@ -4,17 +4,17 @@ translation_of: Web/API/Document/createComment ---{{ ApiRef() }}
-概述
+概述
-
createComment()
方法用来创建并返回一个注释节点。语法
+语法
var commentNode = document.createComment(data)-参数
+参数
-
commentNode
是一个注释节点。data
是一个字符串,包含了注释的内容。例子
+例子
var docu = new DOMParser().parseFromString('<xml></xml>', "application/xml") var comment = docu.createComment('这是注释内容'); @@ -24,9 +24,9 @@-例子
alert(new XMLSerializer().serializeToString(docu)); // 弹出 <xml><!--这是注释内容--></xml>备注
+备注
-
- 如果 data 字符串包含了 "--" ,则会抛出
NS_ERROR_DOM_INVALID_CHARACTER_ERR
异常,这种情况需要对"--" 字符串进行转义。规范
+规范
diff --git a/files/zh-cn/web/api/document/createdocumentfragment/index.html b/files/zh-cn/web/api/document/createdocumentfragment/index.html index f814ee5f13103e..30bb81919b367a 100644 --- a/files/zh-cn/web/api/document/createdocumentfragment/index.html +++ b/files/zh-cn/web/api/document/createdocumentfragment/index.html @@ -15,7 +15,7 @@创建一个新的空白的文档片段 (
-DocumentFragment
)。语法
+语法
let fragment = document.createDocumentFragment();@@ -28,7 +28,7 @@描述
因为文档片段存在于内存中,并不在 DOM 树中,所以将子元素插入到文档片段时不会引起页面回流(对元素位置和几何上的计算)。因此,使用文档片段通常会带来更好的性能。
-示例
+示例
此示例创建主流 Web 浏览器的列表。
@@ -64,7 +64,7 @@浏览器兼容
{{Compat("api.Document.createDocumentFragment")}}
-另见
+另见
- {{domxref("DOMImplementation.createDocument", "document.implementation.createDocument()")}}
diff --git a/files/zh-cn/web/api/document/createelementns/index.html b/files/zh-cn/web/api/document/createelementns/index.html index 1701e231fb9ffa..b132b4c2b0e5fb 100644 --- a/files/zh-cn/web/api/document/createelementns/index.html +++ b/files/zh-cn/web/api/document/createelementns/index.html @@ -14,7 +14,7 @@要创建一个元素而不指定命名空间 URI,请使用 createElement 方法。
-语法
+语法
let element = document.createElementNS(namespaceURI, qualifiedName[, options]); @@ -36,7 +36,7 @@返回值
新元素。
-有效的命名空间 URI
+有效的命名空间 URI
-
- HTML - 参阅
@@ -45,7 +45,7 @@http://www.w3.org/1999/xhtml
有效的命名空间 URI
- XUL - 参阅
http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul
示例
+示例
在XHTML命名空间中创建一个新的<div>元素并将其添加到 vbox 的结尾处。虽然这不是一个非常有用的XUL文档,它演示了在单个文档中使用来自两个不同命名空间的元素:
@@ -91,7 +91,7 @@浏览器兼容性
{{Compat("api.Document.createElementNS")}} -相关链接
+相关链接
- document.createElement
diff --git a/files/zh-cn/web/api/document/createevent/index.html b/files/zh-cn/web/api/document/createevent/index.html index 1b8a4737b6880d..80d6b0057dab27 100644 --- a/files/zh-cn/web/api/document/createevent/index.html +++ b/files/zh-cn/web/api/document/createevent/index.html @@ -13,7 +13,7 @@创建一个指定类型的事件。其返回的对象必须先初始化并可以被传递给 element.dispatchEvent。
-语法
+语法
var event = document.createEvent(type);@@ -23,7 +23,7 @@语法
- -
type
是一个字符串,表示要创建的事件类型。事件类型可能包括"UIEvents"
,"MouseEvents"
,"MutationEvents"
, 或者"HTMLEvents"
。请查看 Notes 章节获取详细信息 。示例
+示例
// 创建事件 var event = document.createEvent('Event'); @@ -40,13 +40,13 @@-示例
elem.dispatchEvent(event);参考
+参考
-注意
+注意
Event type 字符串只能传递事件模块中定义的值给 CreateEvent。其中一些事件模块是在 DOM 事件规范定义的,还有些事在其他规范定义的(如 SVG),还有一些是 Gecko-specific 事件。详情见下表。
@@ -177,7 +177,7 @@注意
有些事件可以使用两种事件类型参数,这是因为 DOM Level 3 Events 将事件类型参数更改为单数形式,但是仍然支持老的复数形式以向后兼容。
-规范
+规范
- DOM Level 2 Events: createEvent
diff --git a/files/zh-cn/web/api/document/createexpression/index.html b/files/zh-cn/web/api/document/createexpression/index.html index eb9c44e62c7965..02fd54f04b07b3 100644 --- a/files/zh-cn/web/api/document/createexpression/index.html +++ b/files/zh-cn/web/api/document/createexpression/index.html @@ -5,14 +5,14 @@ ---{{ ApiRef() }}
该方法将编译生成一个
-XPathExpression
,可以用来多次的执行。语法
+语法
xpathExpr = document.createExpression(xpathText, namespaceURLMapper);-参数
+参数
- String
xpathText
(将要编译的 Xpath 表达式)- Function
namespaceURLMapper
(将一个命名空间前缀映射到一个命名空间 URL 上 (如果不需要,可以为null
)){{ Fx_minversion_note("3") }}
-返回值
+返回值
diff --git a/files/zh-cn/web/api/document/createnodeiterator/index.html b/files/zh-cn/web/api/document/createnodeiterator/index.html index 11dfa5fbfd862e..e9f3c49c8d7ce8 100644 --- a/files/zh-cn/web/api/document/createnodeiterator/index.html +++ b/files/zh-cn/web/api/document/createnodeiterator/index.html @@ -11,7 +11,7 @@返回一个新的
-NodeIterator
对象。语法
+语法
const nodeIterator = document.createNodeIterator(root[, whatToShow[, filter]]);@@ -122,7 +122,7 @@示例
} -规范
+规范
{{Specifications}} diff --git a/files/zh-cn/web/api/document/creatensresolver/index.html b/files/zh-cn/web/api/document/creatensresolver/index.html index 66906535a83a74..d26a4d60e67203 100644 --- a/files/zh-cn/web/api/document/creatensresolver/index.html +++ b/files/zh-cn/web/api/document/creatensresolver/index.html @@ -7,7 +7,7 @@创建一个
-XPathNSResolver
which resolves namespaces with respect to the definitions in scope for 指定节点语法
+语法
nsResolver = document.createNSResolver(node);@@ -24,7 +24,7 @@返回值
- -
nsResolver
is an XPathNSResolver object.注意
+注意
Adapts any DOM node to resolve namespaces so that an XPath expression can be easily evaluated relative to the context of the node where it appeared within the document. This adapter works like the DOM Level 3 method
@@ -32,13 +32,13 @@lookupNamespaceURI
on nodes in resolving thenamespaceURI
from a given prefix using the current information available in the node's hierarchy at the timelookupNamespaceURI
is called. Also correctly resolves the implicitxml
prefix.注意
-
createNSResolver
was introduced in DOM Level 3.参见
+参见
-规范
+规范
DOM Level 3 XPath Specification: createNSResolver
diff --git a/files/zh-cn/web/api/document/createprocessinginstruction/index.html b/files/zh-cn/web/api/document/createprocessinginstruction/index.html index f3b695f182ed51..8f168d4ff24c85 100644 --- a/files/zh-cn/web/api/document/createprocessinginstruction/index.html +++ b/files/zh-cn/web/api/document/createprocessinginstruction/index.html @@ -7,12 +7,12 @@-
createProcessingInstruction()
创建一个新的处理指令节点,并返回。Syntax
+Syntax
Processing instruction node = document.createProcessingInstruction(target, data)-Parameters
+Parameters
-
- @@ -20,7 +20,7 @@
Processing Instruction node
是 {{ domxref("ProcessingInstruction") }} 节点。Parameters
data
是一个字符串,包含了将要添加到节点内的数据。异常
+异常
-
- @@ -29,7 +29,7 @@
NOT_SUPPORTED_ERR
异常
- Thrown if you try to add an invalid processing instruction target (it should be an XML name besides any case combination of the letters "xml") or if the closing processing instruction sequence ("?>") is added as part of the data, so unescaped user-provided data cannot be safely used without escaping or otherwise dealing with such situations.
实例
+实例
var docu = new DOMParser().parseFromString('<xml></xml>', "application/xml") @@ -41,6 +41,6 @@-实例
// 弹出框内容: <?xml-stylesheet href="mycss.css" type="text/css"?><xml/>规范
+规范
DOM 4: createProcessingInstruction
diff --git a/files/zh-cn/web/api/document/createrange/index.html b/files/zh-cn/web/api/document/createrange/index.html index a4e854d43b9007..43e4893bafbfac 100644 --- a/files/zh-cn/web/api/document/createrange/index.html +++ b/files/zh-cn/web/api/document/createrange/index.html @@ -10,14 +10,14 @@返回一个 {{domxref("Range")}} 对象。
-语法
+语法
range = document.createRange();-
range
是一个 {{domxref("Range")}} 对象。例子
+例子
var range = document.createRange(); @@ -25,11 +25,11 @@-例子
range.setEnd(endNode, endOffset);注意
+注意
一旦一个 Range 对象被建立,在使用他的大多数方法之前需要去设置他的临界点。
-Specification
+Specification
- DOM Level 2 Range: DocumentRange.createRange
diff --git a/files/zh-cn/web/api/document/createtreewalker/index.html b/files/zh-cn/web/api/document/createtreewalker/index.html index 7ffea3e21d6e9d..f8b025b8947ed3 100644 --- a/files/zh-cn/web/api/document/createtreewalker/index.html +++ b/files/zh-cn/web/api/document/createtreewalker/index.html @@ -12,7 +12,7 @@-
document.createTreeWalker()
方法,能创建并返回一个 {{domxref("TreeWalker")}} 对象。语法
+语法
treeWalker = document.createTreeWalker(root, whatToShow, filter, entityReferenceExpansion);@@ -109,7 +109,7 @@返回值
一个新的 {{domxref("TreeWalker")}} 对象。
-示例
+示例
以下示例遍历 body 下的所有节点,将节点集合缩小至元素,简单地传递每个可接受的节点(也可在
@@ -128,7 +128,7 @@acceptNode()
方法中缩小集合),然后利用创建的 TreeWalker 迭代器在节点上推进(现在是所有的元素)并把它们推入一个数组。示例
currentNode = treeWalker.nextNode(); } -规范
+规范
{{Specifications}} diff --git a/files/zh-cn/web/api/document/defaultview/index.html b/files/zh-cn/web/api/document/defaultview/index.html index a824f13cb84470..f607426f67a549 100644 --- a/files/zh-cn/web/api/document/defaultview/index.html +++ b/files/zh-cn/web/api/document/defaultview/index.html @@ -7,22 +7,22 @@ ---{{ ApiRef() }}-概述
+概述
在浏览器中,该属性返回当前
-document
对象所关联的window
对象,如果没有,会返回null
。语法
+语法
var win = document.defaultView;该属性只读。
-备注
+备注
根据 quirksmode,IE 9 以下版本不支持
-defaultView
。规范
+规范
- HTML5: defaultView
diff --git a/files/zh-cn/web/api/document/dir/index.html b/files/zh-cn/web/api/document/dir/index.html index 8cefb1dd45965f..ea92dff732d8b7 100644 --- a/files/zh-cn/web/api/document/dir/index.html +++ b/files/zh-cn/web/api/document/dir/index.html @@ -20,7 +20,7 @@语法
(译者注:第一次调用该属性时,可能返回空字符串"",译者环境:chrome,版本 53.0.2785.116 m)
-说明
+说明
{{Specifications}} diff --git a/files/zh-cn/web/api/document/doctype/index.html b/files/zh-cn/web/api/document/doctype/index.html index d805bfc8bc15e2..1452189b28b77c 100644 --- a/files/zh-cn/web/api/document/doctype/index.html +++ b/files/zh-cn/web/api/document/doctype/index.html @@ -7,7 +7,7 @@返回当前文档关联的文档类型定义 (DTD). 返回的对象实现了 DocumentType 接口。使用 {{domxref("DOMImplementation.createDocumentType()")}} 方法可以创建一个-DocumentType
类型的对象。语法
+语法
doctype = document.doctype;@@ -27,13 +27,13 @@示例
"doctypeObj.systemId: " + doctypeObj.systemId ); -附注
+附注
如果当前文档没有 DTD,则该属性返回
null
。DOM level 2 不支持编辑文档类型定义。
-规范
+规范
diff --git a/files/zh-cn/web/api/document/documenturi/index.html b/files/zh-cn/web/api/document/documenturi/index.html index 64e2ba1902358e..b3bfa62a07da90 100644 --- a/files/zh-cn/web/api/document/documenturi/index.html +++ b/files/zh-cn/web/api/document/documenturi/index.html @@ -17,16 +17,16 @@
--语法
+语法
-var string = document.documentURI;
备注
+备注
HTML 文档有一个 {{domxref("document.URL")}} 属性返回同样的值。但是不像
-URL
,documentURI
适用于所有类型的文档。规范
+规范
{{Specifications}} diff --git a/files/zh-cn/web/api/document/documenturiobject/index.html b/files/zh-cn/web/api/document/documenturiobject/index.html index 8e61cea5fd725b..641a011e985964 100644 --- a/files/zh-cn/web/api/document/documenturiobject/index.html +++ b/files/zh-cn/web/api/document/documenturiobject/index.html @@ -4,14 +4,14 @@ translation_of: Web/API/Document/documentURIObject ---{{ ApiRef() }}
-概述
+概述
该属性返回一个
nsIURI
对象,值为当前文档的 URI.该属性只能在拥有 UniversalXPConnect 特权的代码中运行,比如扩展中的代码。如果是 web 页面中的代码,则该属性默认不存在,必须开启 UniversalXPConnect 特权才可用。
使用特权代码必须小心,不要在一个 non-wrapped 的 content 对象上使用该属性 (比如一个
-XPCNativeWrapper
方法处理过的wrappedJSObject
). 查看 {{ Bug("324464") }} 了解详情语法
+语法
var uri = doc.documentURIObject;-例子
+例子
// 检测 Firefox 当前标签中的页面的 URI 协议是否为'http', // 下面的代码必须运行在 browser.xul 上下文上。 var uriObj = content.document.documentURIObject; @@ -21,5 +21,5 @@-例子
... }规范
+规范
不属于任何公开的规范。
diff --git a/files/zh-cn/web/api/document/dragstart_event/index.html b/files/zh-cn/web/api/document/dragstart_event/index.html index 8acd8967ef0b6b..7dbb7164105fbc 100644 --- a/files/zh-cn/web/api/document/dragstart_event/index.html +++ b/files/zh-cn/web/api/document/dragstart_event/index.html @@ -151,7 +151,7 @@属性
示例:dropzone
+示例:dropzone
HTML 内容
diff --git a/files/zh-cn/web/api/document/elementfrompoint/index.html b/files/zh-cn/web/api/document/elementfrompoint/index.html index 02b4f783313c97..c067855b1d207b 100644 --- a/files/zh-cn/web/api/document/elementfrompoint/index.html +++ b/files/zh-cn/web/api/document/elementfrompoint/index.html @@ -31,7 +31,7 @@Returns
在给定的坐标点处的顶端 {{domxref("Element")}}(译者注:如果元素层叠的话,返回最上层的元素)。
-Example
+Example
<!DOCTYPE html> <html lang="en"> diff --git a/files/zh-cn/web/api/document/embeds/index.html b/files/zh-cn/web/api/document/embeds/index.html index 7b082b611d88e1..9310a875e5e72b 100644 --- a/files/zh-cn/web/api/document/embeds/index.html +++ b/files/zh-cn/web/api/document/embeds/index.html @@ -16,7 +16,7 @@{{domxref("Document")}}接口的只读属性
-embeds
返回当前文档内的<embed>HTML {{htmlelement("object")}}元素列表语法
+语法
nodeList = document.embeds@@ -25,7 +25,7 @@值
一个 {{domxref("HTMLCollection")}}类型的值
-规范
+规范
{{Specifications}} diff --git a/files/zh-cn/web/api/document/evaluate/index.html b/files/zh-cn/web/api/document/evaluate/index.html index fd4b024964bff4..1ca3866c69427a 100644 --- a/files/zh-cn/web/api/document/evaluate/index.html +++ b/files/zh-cn/web/api/document/evaluate/index.html @@ -13,7 +13,7 @@根据传入的 XPath 表达式以及其他参数,返回一个 {{domxref("XPathResult")}} 对象。
-语法
+语法
var xpathResult = document.evaluate( xpathExpression, diff --git a/files/zh-cn/web/api/document/exitpointerlock/index.html b/files/zh-cn/web/api/document/exitpointerlock/index.html index fe93a131d7233e..d6adb26c520526 100644 --- a/files/zh-cn/web/api/document/exitpointerlock/index.html +++ b/files/zh-cn/web/api/document/exitpointerlock/index.html @@ -11,7 +11,7 @@追踪是否解锁成功,需要监听{{event("pointerlockchange")}} 和{{event("pointerlockerror")}} 事件。
-语法
+语法
document.exitPointerLock();@@ -20,7 +20,7 @@规范
{{Specifications}} -浏览器兼容性
+浏览器兼容性
{{Compat("api.Document.exitPointerLock")}} diff --git a/files/zh-cn/web/api/document/fgcolor/index.html b/files/zh-cn/web/api/document/fgcolor/index.html index 48ac2627a093ac..fc143fe501a7f5 100644 --- a/files/zh-cn/web/api/document/fgcolor/index.html +++ b/files/zh-cn/web/api/document/fgcolor/index.html @@ -5,29 +5,29 @@ ---{{ ApiRef() }}
-概述
+概述
{{ Deprecated_header() }}
-fgColor
属性用来获取或设置当前文档的前景色或者文本颜色。语法
+语法
var color = document.fgColor; document.fgColor = color;-参数
+参数
-
color
是一个颜色值,可以为一个颜色类型,比如"red",或者一个 16 进制 RGB 值,比如 "#ff0000
".例子
+例子
document.fgColor = "white"; document.bgColor = "darkblue";-备注
+备注
在 Mozilla Firefox 中,该属性的默认值是黑色.(
@@ -35,6 +35,6 @@black 或者#000000
).备注
另外一个类似的属性是
-document.body.text
, 该属性也在 HTML 4.01 中被废弃,推荐使用 CSS 属性。规范
+规范
{{Compat("api.Document.fgColor")}}
diff --git a/files/zh-cn/web/api/document/fonts/index.html b/files/zh-cn/web/api/document/fonts/index.html index 3b270f5998d26d..c68b6656b74ccc 100644 --- a/files/zh-cn/web/api/document/fonts/index.html +++ b/files/zh-cn/web/api/document/fonts/index.html @@ -5,7 +5,7 @@ ---{{domxref("Document")}}的
-fonts
属性接口返回文档的 {{domxref("FontFaceSet")}} 接口。语法
+语法
let fontFaceSet = document.fonts;@@ -13,7 +13,7 @@值
返回值是文档的 {{domxref("FontFaceSet")}} 接口。
-FontFaceSet
接口对 加载新字体、检查已加载字体的加载状态 来说非常有用。例子
+例子
在所有字体加载完成后进行操作
@@ -22,15 +22,15 @@在所有字体加载完成 }); -
说明
+说明
{{Specifications}} -浏览器兼容性
+浏览器兼容性
{{Compat("api.Document.fonts")}}
-参考资料
+参考资料
- {{domxref("FontFaceSet")}} interface
diff --git a/files/zh-cn/web/api/document/forms/index.html b/files/zh-cn/web/api/document/forms/index.html index 9005ad19f61020..44ffda3ca098c3 100644 --- a/files/zh-cn/web/api/document/forms/index.html +++ b/files/zh-cn/web/api/document/forms/index.html @@ -9,12 +9,12 @@-
forms
返回当前文档中的 {{HTMLElement("form")}}元素的一个集合 (一个 {{domxref("HTMLCollection")}})。语法
+语法
-let collection
= document.forms;例子:获取表单信息
+例子:获取表单信息
<html> @@ -48,11 +48,11 @@例子:获取表单内的元素
-规范
+规范
-相关链接
+相关链接
- DOM:form
diff --git a/files/zh-cn/web/api/document/fullscreen/index.html b/files/zh-cn/web/api/document/fullscreen/index.html index e48978c279f692..31b6214fecdd1e 100644 --- a/files/zh-cn/web/api/document/fullscreen/index.html +++ b/files/zh-cn/web/api/document/fullscreen/index.html @@ -18,16 +18,16 @@-
概述
+概述
返回一个布尔值,表明当前文档是否处于全屏模式。
-语法
+语法
var isFullScreen = document.mozFullScreen || document.webkitIsFullScreen;-例子
+例子
function isDocumentInFullScreenMode() { // 过去由 F11 触发的那种浏览器全屏模式和 HTML5 中内容的全屏模式是不一样的 @@ -40,6 +40,6 @@备注
查看使用全屏模式来了解更多相关内容。
-浏览器兼容性
+浏览器兼容性
{{Compat("api.Document.fullscreen")}} diff --git a/files/zh-cn/web/api/document/fullscreenelement/index.html b/files/zh-cn/web/api/document/fullscreenelement/index.html index 838bc9494ad4ee..95660d29c8519d 100644 --- a/files/zh-cn/web/api/document/fullscreenelement/index.html +++ b/files/zh-cn/web/api/document/fullscreenelement/index.html @@ -5,12 +5,12 @@ original_slug: Web/API/DocumentOrShadowRoot/fullscreenElement ---{{ ApiRef() }}
-概述
+概述
返回当前文档中正在以全屏模式显示的{{ domxref("Element") }}节点,如果没有使用全屏模式,则返回
-null
.语法
+语法
var element = document.mozFullScreenElement;-示例
+示例
function isVideoInFullsreen() { if (document.mozFullScreenElement && document.mozFullScreenElement.nodeName == 'VIDEO') { console.log('您的视频正在以全屏模式显示'); @@ -18,5 +18,5 @@示例
}辅助
查看使用"全屏模式"页面了解详情。
-浏览器兼容性
+浏览器兼容性
{{Compat("api.Document.fullscreenElement")}} diff --git a/files/zh-cn/web/api/document/fullscreenenabled/index.html b/files/zh-cn/web/api/document/fullscreenenabled/index.html index 3edff481ff8581..6141a3b1dafb3d 100644 --- a/files/zh-cn/web/api/document/fullscreenenabled/index.html +++ b/files/zh-cn/web/api/document/fullscreenenabled/index.html @@ -5,13 +5,13 @@ original_slug: Web/API/Document/mozFullScreenEnabled ---{{ ApiRef() }}
-概述
+概述
返回一个布尔值,表明浏览器是否支持全屏模式。全屏模式只在那些不包含窗口化的插件的页面中可用.对于一个{{ HTMLElement("iframe") }}元素中的页面,则它必需拥有{{ HTMLAttrXRef("mozallowfullscreen", "iframe") }}属性。
-语法
+语法
var isFullScreenAvailable = document.mozFullScreenEnabled;如果当前文档可以进入全屏模式,则
-isFullScreenAvailable
为true
例子
+例子
function requestFullScreen() { if (document.mozFullScreenEnabled) { videoElement.requestFullScreen(); @@ -22,5 +22,5 @@例子
备注
进入页面使用全屏模式查看详情和示例。
-浏览器兼容性
+浏览器兼容性
{{Compat("api.Document.fullscreenEnabled")}} diff --git a/files/zh-cn/web/api/document/getelementbyid/index.html b/files/zh-cn/web/api/document/getelementbyid/index.html index 5ab18853e95428..e7df3187592116 100644 --- a/files/zh-cn/web/api/document/getelementbyid/index.html +++ b/files/zh-cn/web/api/document/getelementbyid/index.html @@ -14,7 +14,7 @@如果需要查找到那些没有 ID 的元素,你可以考虑通过 CSS 选择器使用 {{domxref("Document.querySelector", "querySelector()")}}。
-语法
+语法
var element = document.getElementById(id);@@ -30,7 +30,7 @@返回值
返回一个匹配到 ID 的 DOM {{domxref("Element")}} 对象。若在当前 {{domxref("Document")}} 下没有找到,则返回 null。
-示例
+示例
HTML
@@ -100,15 +100,15 @@示例
非 HTML 文档(Non-HTML documents)。 DOM 的实现必须说明哪个属性是 ID 类型。只有 DTD 定义了'id'是 ID 属性时’id‘才会被认为是 ID 属性。在 XHTML, XUL或者其他文档中,'id'通常被定义为 ID 类型的属性。不知道哪个属性是 ID 类型的实现中,这会返回 null 结果。
-规范
+规范
{{Specifications}} -浏览器兼容性
+浏览器兼容性
{{Compat("api.Document.getElementById")}}
-相关链接
+相关链接
- document 包含其他用于在文档中查找元素的方法
diff --git a/files/zh-cn/web/api/document/getelementsbyclassname/index.html b/files/zh-cn/web/api/document/getelementsbyclassname/index.html index 14606e73328c97..e1a6a47d5d3292 100644 --- a/files/zh-cn/web/api/document/getelementsbyclassname/index.html +++ b/files/zh-cn/web/api/document/getelementsbyclassname/index.html @@ -11,7 +11,7 @@返回一个包含了所有指定类名的子元素的类数组对象。当在 document 对象上调用时,会搜索整个 DOM 文档,包含根节点。你也可以在任意元素上调用{{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} 方法,它将返回的是以当前元素为根节点,所有指定类名的子元素。
-语法
+语法
var elements = document.getElementsByClassName(names); // or: var elements = rootElement.getElementsByClassName(names);@@ -22,7 +22,7 @@语法
- getElementsByClassName 可以在任何元素上调用,不仅仅是 document。 调用这个方法的元素将作为本次查找的根元素。
-示例
+示例
获取所有 class 为 'test' 的元素:
@@ -105,7 +105,7 @@结果
{{EmbedLiveSample('多个_Class_示例')}}
-规范
+规范
diff --git a/files/zh-cn/web/api/document/getelementsbyname/index.html b/files/zh-cn/web/api/document/getelementsbyname/index.html index 709edbedf48fe1..3befaad7dd26b7 100644 --- a/files/zh-cn/web/api/document/getelementsbyname/index.html +++ b/files/zh-cn/web/api/document/getelementsbyname/index.html @@ -13,7 +13,7 @@
根据给定的{{domxref("element.name","name")}} 返回一个在 (X)HTML document 的节点列表集合。
-语法
+语法
elements = document.getElementsByName(name)@@ -23,7 +23,7 @@语法
- -
name
是元素的name
属性的值。例子
+例子
<!DOCTYPE html> <html lang="en"> @@ -43,7 +43,7 @@-例子
</html>注释
+注释
{{domxref("element.name","name")}} 属性只有在 (X)HTML 文档中可用。
@@ -65,7 +65,7 @@浏览器兼容性
{{Compat("api.Document.getElementsByName")}}
-参阅
+参阅
- {{domxref("document.getElementById()")}} 通过
diff --git a/files/zh-cn/web/api/document/getelementsbytagnamens/index.html b/files/zh-cn/web/api/document/getelementsbytagnamens/index.html index d96e1cc5a52895..72f67f0d5a86e9 100644 --- a/files/zh-cn/web/api/document/getelementsbytagnamens/index.html +++ b/files/zh-cn/web/api/document/getelementsbytagnamens/index.html @@ -13,7 +13,7 @@id
返回对元素的引用-
语法
+语法
elements = document.getElementsByTagNameNS(namespace, name)@@ -26,7 +26,7 @@语法
注意:在 W3C 文档中,-elements
是一个NodeList
,而该方法在 Gecko 内核的浏览器和 IE 中返回的是 HTML 集合HTMLCollection.
Opera 返回的也是一个NodeList
,但通过namedItem
方法 , 使得它类似于一个HTMLCollection
. 截止 2012 年 1 月,只有 WebKit 内核的浏览器返回的值是一个纯NodeList
. 详情请参考 bug 14869 .示例
+示例
在下面的示例中,
@@ -106,7 +106,7 @@getElementsByTagNameNS
方法从一个特定的父元素开始,并从该父元素的 DOM 中自上而下递归式搜索,查找所有与标签名参数匹配的子元素 。示例
</html> -针对其他不支持此方法的浏览器的解决方法
+针对其他不支持此方法的浏览器的解决方法
如果所使用的浏览器不支持此方法,可使用另一种方法(例如遍历所有子元素的 DOM,识别所有 @xmlns 实例等等)来查找所有具有本地名称和命名空间的标签,但此方法更快。 (为了兼容 Explorer,在下面的函数中,你可以调用一个 XPath 包,而不仅仅是 XPath (由于 Explorer 支持不同 API 的 XPath ), 例如 this wrapper class.)
@@ -128,6 +128,6 @@规范
+规范
DOM Level 2 Core: Document.getElementsByTagNameNS
diff --git a/files/zh-cn/web/api/document/getselection/index.html b/files/zh-cn/web/api/document/getselection/index.html index 10835858018e71..48ecd501affc50 100644 --- a/files/zh-cn/web/api/document/getselection/index.html +++ b/files/zh-cn/web/api/document/getselection/index.html @@ -20,7 +20,7 @@Returns
A {{DOMxRef("Selection")}} object.
-Example
+Example
function foo() { var selObj = document.getSelection(); @@ -29,7 +29,7 @@-Example
// do stuff with the range }Notes
+Notes
String representation of the Selection object
diff --git a/files/zh-cn/web/api/document/hasfocus/index.html b/files/zh-cn/web/api/document/hasfocus/index.html index 17a439ded998f8..bc0907651c0c93 100644 --- a/files/zh-cn/web/api/document/hasfocus/index.html +++ b/files/zh-cn/web/api/document/hasfocus/index.html @@ -11,13 +11,13 @@ ---{{ ApiRef }}
-概述
+概述
Document.hasFocus()
方法返回一个 {{jsxref("Boolean")}},表明当前文档或者当前文档内的节点是否获得了焦点。该方法可以用来判断当前文档中的活动元素是否获得了焦点。当查看一个文档时,当前文档中获得焦点的元素一定是当前文档的活动元素,但一个文档中的活动元素不一定获得了焦点.。例如, 一个在后台的窗口中的活动元素一定没有获得焦点。-语法
+语法
focused = document.hasFocus();@@ -26,7 +26,7 @@返回值
如果当前文档的活动元素获得了焦点,返回
-true
,否则返回 false。例子
+例子
<!DOCTYPE html> <html> diff --git a/files/zh-cn/web/api/document/head/index.html b/files/zh-cn/web/api/document/head/index.html index d837f696f5fe8f..60afaadc047043 100644 --- a/files/zh-cn/web/api/document/head/index.html +++ b/files/zh-cn/web/api/document/head/index.html @@ -4,12 +4,12 @@ translation_of: Web/API/Document/head ---{{APIRef}}
-概述
+概述
返回当前文档中的 {{ HTMLElement("head") }} 元素。如果有多个
-<head>
元素,则返回第一个。语法
+语法
var objRef = document.head;-示例
+示例
// HTML 部分源码为: <head id="my-document-head"> var aHead = document.head; @@ -17,13 +17,13 @@-示例
alert( document.head === document.querySelector("head") ); // true附注
+附注
document.head
是个只读属性,为该属性赋值只会静默失败,如果在严格模式中,则会抛出TypeError
异常。浏览器兼容性
{{Compat("api.Document.head")}} --规范
+规范
diff --git a/files/zh-cn/web/api/document/height/index.html b/files/zh-cn/web/api/document/height/index.html index 1b14428f34e124..f4c90d98d39f5a 100644 --- a/files/zh-cn/web/api/document/height/index.html +++ b/files/zh-cn/web/api/document/height/index.html @@ -13,7 +13,7 @@返回 {{domxref("document")}} 对象的高度。在大多数场景中, 它相当于当前文档的 {{HTMLElement("body")}} 元素。
-语法
+语法
pixels = document.heightdiff --git a/files/zh-cn/web/api/document/images/index.html b/files/zh-cn/web/api/document/images/index.html index a20696ecb77f72..978f4432205932 100644 --- a/files/zh-cn/web/api/document/images/index.html +++ b/files/zh-cn/web/api/document/images/index.html @@ -7,7 +7,7 @@{{domxref("Document")}} 接口的只读属性 images 返回当前文档中所有 image 元素的集合。
-语法
+语法
var imageCollection = document.images;@@ -23,7 +23,7 @@备注
firstImage = imageCollection[0]; -例子
+例子
该例是一次通过遍历图片列表找到名称为
@@ -34,7 +34,7 @@"banner.gif"
的图片。例子
} } -规范
+规范
{{Specifications}} diff --git a/files/zh-cn/web/api/document/importnode/index.html b/files/zh-cn/web/api/document/importnode/index.html index bb7cbff41c2434..14aae121dcaaf5 100644 --- a/files/zh-cn/web/api/document/importnode/index.html +++ b/files/zh-cn/web/api/document/importnode/index.html @@ -5,11 +5,11 @@ ---{{ ApiRef() }}
-概述
+概述
将外部文档的一个节点拷贝一份,然后可以把这个拷贝的节点插入到当前文档中。
-语法
+语法
var node = document.importNode(externalNode, deep);@@ -29,7 +29,7 @@语法
在没有实现 DOM4 的浏览器中,这个参数不可以省略。
例子
+例子
var iframe = document.getElementsByTagName("iframe")[0]; var oldNode = iframe.contentDocument.getElementById("myNode"); @@ -37,7 +37,7 @@-例子
document.getElementById("container").appendChild(newNode);备注
+备注
源节点不会从外部文档中删除,被导入的节点是源节点的一个拷贝。
@@ -55,7 +55,7 @@浏览器兼容性
{{Compat("api.Document.importNode")}}
-规范
+规范
- DOM Level 2 Core: Document.importNode
diff --git a/files/zh-cn/web/api/document/lastmodified/index.html b/files/zh-cn/web/api/document/lastmodified/index.html index df951d43da215b..046bc4f0034403 100644 --- a/files/zh-cn/web/api/document/lastmodified/index.html +++ b/files/zh-cn/web/api/document/lastmodified/index.html @@ -5,22 +5,22 @@ ---{{ ApiRef() }}
-概述
+概述
返回一个字符串,其中包含了当前文档的最后修改日期和时间。
-语法
+语法
var string = document.lastModified;-例子
+例子
dump(document.lastModified); // 返回: Tuesday, July 10, 2001 10:19:42-备注
+备注
需要注意的是,作为一个字符串,
diff --git a/files/zh-cn/web/api/document/linkcolor/index.html b/files/zh-cn/web/api/document/linkcolor/index.html index cbdcc728a9249d..edb687a76bd5cb 100644 --- a/files/zh-cn/web/api/document/linkcolor/index.html +++ b/files/zh-cn/web/api/document/linkcolor/index.html @@ -5,23 +5,23 @@ ---lastModified
不能很容易的被用于与该文档的修改日期做比较。{{ ApiRef() }}
-概述
+概述
{{ Deprecated_header() }}
-linkColor
用来获取和设置文档内链接元素 (<a>) 的颜色。语法
+语法
color = document.linkColor document.linkColor = color-参数
+参数
-
color
是一个代表颜色的字符串 (比如"red","blue"等),或者是一个 16 进制 rgb 颜色值 (比如"#ff0000
").备注
+备注
在 Mozilla Firefox 中,该属性的默认值是 blue(
@@ -31,12 +31,12 @@或者说是#0000ee
).备注
另一种方法是使用
-document.body.link
, 该属也在HTML 4.01中被废弃。例子
+例子
document.linkColor = "blue";-规范
+规范
diff --git a/files/zh-cn/web/api/document/location/index.html b/files/zh-cn/web/api/document/location/index.html index fd55df5978404c..13f924423ae1cf 100644 --- a/files/zh-cn/web/api/document/location/index.html +++ b/files/zh-cn/web/api/document/location/index.html @@ -13,13 +13,13 @@
If the current document is not in a browsing context, the returned value is
-null
.语法
+语法
locationObj = document.location document.location = 'http://www.mozilla.org' // Equivalent to document.location.href = 'http://www.mozilla.org'-示例
+示例
dump(document.location); // Prints a string like diff --git a/files/zh-cn/web/api/document/mozsyntheticdocument/index.html b/files/zh-cn/web/api/document/mozsyntheticdocument/index.html index f8074cd687d6ac..407d18a7715122 100644 --- a/files/zh-cn/web/api/document/mozsyntheticdocument/index.html +++ b/files/zh-cn/web/api/document/mozsyntheticdocument/index.html @@ -15,14 +15,14 @@-概述
注:应考虑兼容性和应用场景
-语法
+语法
var isSynthetic = document.mozSyntheticDocument;返回时,如果文档是合成的,则合成是真实的; 否则是假的。
-例子
+例子
如果您有一个您只想为合成文档显示的上下文菜单项(或相反,对于不合成的文档),这可能很有用。
@@ -33,6 +33,6 @@例子
}规范
+规范
不是任何规范的一部分。
diff --git a/files/zh-cn/web/api/document/open/index.html b/files/zh-cn/web/api/document/open/index.html index 5d9d1c70756882..3600404c7b18f2 100644 --- a/files/zh-cn/web/api/document/open/index.html +++ b/files/zh-cn/web/api/document/open/index.html @@ -18,7 +18,7 @@- 文档中的所有节点会被清除。
-语法
+语法
document.open();@@ -31,7 +31,7 @@返回值
一个
-Document
对象实例。示例
+示例
以下简单的代码,会打开一个文档,并将原有内容替换为一些不同的 HTML 片段,然后关闭文档。
@@ -41,7 +41,7 @@示例
document.write("<p>The number is 42</p>"); document.close(); -注意
+注意
当 document.write() 在页面加载后调用,会发生自动的
diff --git a/files/zh-cn/web/api/document/plugins/index.html b/files/zh-cn/web/api/document/plugins/index.html index 7c59e8936901d6..92c88e5065a1d8 100644 --- a/files/zh-cn/web/api/document/plugins/index.html +++ b/files/zh-cn/web/api/document/plugins/index.html @@ -11,7 +11,7 @@document.open()
调用。对于已安装的插件列表,请使用 NavigatorPlugins.plugins 插件。-语法
+语法
embedArrayObj = document.plugins@@ -20,7 +20,7 @@值
一个 {{domxref("HTMLCollection")}}, 如果文档中没有嵌入则为 null。
-规范
+规范
{{Specifications}} @@ -28,7 +28,7 @@浏览器兼容性
{{Compat("api.Document.plugins")}}
-另请参见
+另请参见
- MSDN documentation
diff --git a/files/zh-cn/web/api/document/pointerlockelement/index.html b/files/zh-cn/web/api/document/pointerlockelement/index.html index 96bd7df7569011..96c1aac2be2993 100644 --- a/files/zh-cn/web/api/document/pointerlockelement/index.html +++ b/files/zh-cn/web/api/document/pointerlockelement/index.html @@ -21,7 +21,7 @@规范
{{Specifications}} -浏览器兼容
+浏览器兼容
{{Compat("api.Document.pointerLockElement")}}