From c98a9b1cf02d9143cc6924f1991d600c0f807411 Mon Sep 17 00:00:00 2001 From: MDN Date: Wed, 30 Jun 2021 00:38:38 +0000 Subject: [CRON] sync translated content --- .../orphaned/web/api/childnode/before/index.html | 188 +++++++++++++++++++++ files/zh-cn/orphaned/web/api/childnode/index.html | 78 +++++++++ .../css/transform-function/translatex/index.html | 130 ++++++++++++++ 3 files changed, 396 insertions(+) create mode 100644 files/zh-cn/orphaned/web/api/childnode/before/index.html create mode 100644 files/zh-cn/orphaned/web/api/childnode/index.html create mode 100644 files/zh-cn/orphaned/web/css/transform-function/translatex/index.html (limited to 'files/zh-cn/orphaned/web') diff --git a/files/zh-cn/orphaned/web/api/childnode/before/index.html b/files/zh-cn/orphaned/web/api/childnode/before/index.html new file mode 100644 index 0000000000..add3dab015 --- /dev/null +++ b/files/zh-cn/orphaned/web/api/childnode/before/index.html @@ -0,0 +1,188 @@ +--- +title: ChildNode.before() +slug: orphaned/Web/API/ChildNode/before +tags: + - api、dom、节点、方法 +translation_of: Web/API/ChildNode/before +original_slug: Web/API/ChildNode/before +--- +
{{APIRef("DOM")}} {{SeeCompatTable}}
+ +

 ChildNode.before 方法可以在ChildNode这个节点的父节点中插入一些列的 {{domxref("Node")}} 或者 {{domxref("DOMString")}} 对象，位置就是在ChildNode节点的前面，{{domxref("DOMString")}} 对象其实和 {{domxref("Text")}}节点一样的方式来完成插入的。

+ +

语法

+ +
[Throws, Unscopable]
+void ChildNode.before((Node or DOMString)... nodes);
+
+ +

Parameters参数

+ +
+
nodes
+
一系列的 {{domxref("Node")}} 或者 {{domxref("DOMString")}} 
+
+ +

Exceptions

+ + + +

Examples事例

+ +

Inserting an element插入元素节点

+ +
var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+var span = document.createElement("span");
+
+child.before(span);
+
+console.log(parent.outerHTML);
+// "<div><span></span><p></p></div>"
+
+ +

Inserting text插入文本节点

+ +
var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+
+child.before("Text");
+
+console.log(parent.outerHTML);
+// "<div>Text<p></p></div>"
+ +

Inserting an element and text同时插入文本和元素

+ +
var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+var span = document.createElement("span");
+
+child.before(span, "Text");
+
+console.log(parent.outerHTML);
+// "<div><span></span>Text<p></p></div>"
+ +

ChildNode.before() is unscopable不可使用区域

+ +

The before() 不能配合with声明使用，See {{jsxref("Symbol.unscopables")}} for more information.

+ +
with(node) {
+  before("foo");
+}
+// ReferenceError: before is not defined
+ +

Polyfill

+ +

兼容ie9或者更高版本的方法，You can polyfill the before() method in Internet Explorer 9 and higher with the following code:

+ +
// from: https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/before()/before().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('before')) {
+      return;
+    }
+    Object.defineProperty(item, 'before', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function before() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.parentNode.insertBefore(docFrag, this);
+      }
+    });
+  });
+})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);
+ +

Specification

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-childnode-before', 'ChildNode.before()')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(54.0)}}{{CompatGeckoDesktop(49)}}{{CompatUnknown}}{{CompatOpera(39)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(54.0)}}{{CompatGeckoMobile(49)}}{{CompatUnknown}}{{CompatOpera(39)}}{{CompatUnknown}}{{CompatChrome(54.0)}}
+
+ +

See also

+ + diff --git a/files/zh-cn/orphaned/web/api/childnode/index.html b/files/zh-cn/orphaned/web/api/childnode/index.html new file mode 100644 index 0000000000..f223684bb2 --- /dev/null +++ b/files/zh-cn/orphaned/web/api/childnode/index.html @@ -0,0 +1,78 @@ +--- +title: ChildNode +slug: orphaned/Web/API/ChildNode +tags: + - API + - ChildNode + - DOM + - Node + - 接口 +translation_of: Web/API/ChildNode +original_slug: Web/API/ChildNode +--- +

{{APIRef("DOM")}}

+ +

ChildNode 混合了所有(拥有父对象) {{domxref("Node")}} 对象包含的公共方法和属性。其由 {{domxref("Element")}}、{{domxref("DocumentType")}} 和 {{domxref("CharacterData")}} 对象实现。

+ +

属性

+ +

没有继承任何属性，也没有任何专有属性。

+ +

方法

+ +

没有继承的方法。

+ +
+
{{domxref("ChildNode.remove()")}} {{experimental_inline}}
+
将 ChildNode 从其父节点的子节点列表中移除。
+
{{domxref("ChildNode.before()")}} {{experimental_inline}}
+
在其父节点的子节点列表中插入一些 {{domxref("Node")}} 或 {{domxref("DOMString")}} 对象。插入位置为 ChildNode 之前。{{domxref("DOMString")}} 对象会被以 {{domxref("Text")}} 的形式插入。
+
{{domxref("ChildNode.after()")}} {{experimental_inline}}
+
在其父节点的子节点列表中插入一些{{domxref("Node")}} 或 {{domxref("DOMString")}} 对象。插入位置为 ChildNode 之后。{{domxref("DOMString")}} 对象会被以 {{domxref("Text")}} 的形式插入。
+
{{domxref("ChildNode.replaceWith()")}} {{experimental_inline}}
+
使用一组 {{domxref("Node")}} 或 {{domxref("DOMString")}} 对象替换 ChildNode。{{domxref("DOMString")}} 对象会以 {{domxref("Text")}} 的形式插入。
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
规范状态说明
{{SpecName('DOM WHATWG', '#interface-childnode', 'ChildNode')}}{{Spec2('DOM WHATWG')}}Splitted the ElementTraversal interface in {{domxref("ParentNode")}} and ChildNode. The previousElementSibling and nextElementSibling are now defined on the latter. The {{domxref("CharacterData")}} and {{domxref("DocumentType")}} implemented the new interfaces. 新增 remove(), before(), after() and replace() 这四个方法。
{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}{{Spec2('Element Traversal')}}Added the initial definition of its properties to the ElementTraversal pure interface and use it on {{domxref("Element")}}.
+ +

Polyfill

+ +

GitHub 上的外部资源：childNode.js

+ +

浏览器兼容性

+ + + +

{{Compat("api.ChildNode")}}

+ +

参见

+ + diff --git a/files/zh-cn/orphaned/web/css/transform-function/translatex/index.html b/files/zh-cn/orphaned/web/css/transform-function/translatex/index.html new file mode 100644 index 0000000000..6dfb96744e --- /dev/null +++ b/files/zh-cn/orphaned/web/css/transform-function/translatex/index.html @@ -0,0 +1,130 @@ +--- +title: translateX() +slug: orphaned/Web/CSS/transform-function/translateX +tags: + - CSS函数 + - CSS变形属性 + - 参考 +translation_of: Web/CSS/transform-function/translateX +original_slug: Web/CSS/transform-function/translateX +--- +
{{CSSRef}}
+ +

translateX()函数表示在二维平面上水平方向移动元素。 其结果的数据类型是{{cssxref("<transform-function>")}}。

+ +

+ +
+

注意： translateX(tx)等同于 translate(tx, 0) 或者 translate3d(tx, 0, 0)。

+
+ +

语法

+ +
translateX(t)
+
+ +

参数

+ +
+
t
+
     代表了向量平移的横坐标长度{{cssxref("<length>")}}。
+
+ + + + + + + + + + + + + + + + + + + + + +
ℝ2空间中的笛卡尔坐标在ℝℙ2上的投影坐标在ℝ3上的笛卡尔坐标在ℝℙ3上的投影坐标
+

在ℝ2 空间中的平移并非线性变化，因此不能表示为笛卡尔坐标矩阵。

+ 		+

1 0 t

+ +

0 1 0

+ +

0 0 1

+ 		+

1 0 t

+ +

0 1 0

+ +

0 0 1

+ 		+

1 0 0 t

+ +

0 1 0 0

+ +

0 0 1 0

+ +

0 0 0 1

+
[1 0 0 1 t 0]
+ +

示例

+ +

HTML

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+<div>Static</div>
+ +

CSS

+ +
div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: translateX(10px); /* 等同于 translate(10px) */
+  background-color: pink;
+}
+ +

结果

+ +

{{EmbedLiveSample("Examples", 250, 250)}}

+ +

标准化说明

+ + + + + + + + + + + + + + + + +
标准状态备注
{{SpecName("CSS3 Transforms", "#funcdef-transform-translatex", "translateX()")}}{{Spec2("CSS3 Transforms")}}原始定义
+ +

浏览器兼容性

+ +

请前往数据类型{{cssxref("transform-function")}}的页面以查看兼容性信息。

+ +

参阅

+ + -- cgit v1.2.3-54-g00ecf