files/zh-cn/web/api/css/escape/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

---
title: CSS.escape()
slug: Web/API/CSS/escape
tags:
  - CSS
  - escape()
  - 参考
  - 方法
translation_of: Web/API/CSS/escape
---
<p>{{APIRef("CSSOM")}}{{SeeCompatTable}}</p>

<p> <code><strong>CSS.escape()</strong></code> 静态方法返回 {{domxref("DOMString")}} 包含作为参数传递的转义字符串，主要用作CSS选择器的一部分。</p>

<h2 id="语法">语法</h2>

<pre class="syntaxbox"><em>escapedStr</em> = CSS.escape(str);
</pre>

<h3 id="参数">参数</h3>

<dl>
 <dt><em>str</em></dt>
 <dd>The {{domxref("DOMString")}} to be escaped.</dd>
</dl>

<h2 id="实例">实例</h2>

<h3 id="基本结果">基本结果</h3>

<pre class="brush: js">CSS.escape(".foo#bar")        // "\.foo\#bar"
CSS.escape("()[]{}")          // "\(\)\[\]\\{\\}"
CSS.escape('--a')             // "--a"
CSS.escape(0)                 // "\30 ",  Unicode代码点“0”是30
CSS.escape('\0')              // "\ufffd",  Unicode替换字符 </pre>

<h3 id="在上下文使用">在上下文使用</h3>

<p>要转义一个字符串作为选择器使用， <code>escape()</code>方法可以用于:</p>

<pre class="brush: js">var element = document.querySelector('#' + CSS.escape(id) + ' &gt; img');</pre>

<p><code>escape()</code>方法也可以用于转义字符串，它也转义了不严格需要转义的字符：</p>

<pre class="brush: js">var element = document.querySelector('a[href="#' + CSS.escape(fragment) + '"]');</pre>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">格式</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
  <tr>
   <td>{{SpecName('CSSOM', '#the-css.escape()-method', 'CSS.escape()')}}</td>
   <td>{{Spec2('CSSOM')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

{{Compat("api.CSS.escape")}}

<h2 id="参见">参见</h2>

<ul>
 <li>The {{domxref("CSS")}} interface where this static method resides.</li>
 <li><a href="https://github.com/mathiasbynens/CSS.escape/blob/master/css.escape.js">A polyfill for the CSS.escape</a></li>
</ul>