From 97065b2e68dd8768dc1ea092c893c57ebe205026 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Thu, 25 Feb 2021 08:31:36 -0500
Subject: use class="hidden" not style="display:none"

---
 .../web/api/canvasrenderingcontext2d/addhitregion/index.html      | 2 +-
 files/zh-cn/web/api/canvasrenderingcontext2d/arc/index.html       | 4 ++--
 files/zh-cn/web/api/canvasrenderingcontext2d/arcto/index.html     | 2 +-
 files/zh-cn/web/api/canvasrenderingcontext2d/beginpath/index.html | 2 +-
 .../web/api/canvasrenderingcontext2d/beziercurveto/index.html     | 2 +-
 files/zh-cn/web/api/canvasrenderingcontext2d/clip/index.html      | 2 +-
 files/zh-cn/web/api/canvasrenderingcontext2d/closepath/index.html | 2 +-
 .../api/canvasrenderingcontext2d/createlineargradient/index.html  | 2 +-
 .../api/canvasrenderingcontext2d/createradialgradient/index.html  | 2 +-
 .../web/api/canvasrenderingcontext2d/drawfocusifneeded/index.html | 2 +-
 files/zh-cn/web/api/canvasrenderingcontext2d/drawimage/index.html | 5 +----
 files/zh-cn/web/api/canvasrenderingcontext2d/ellipse/index.html   | 2 +-
 files/zh-cn/web/api/canvasrenderingcontext2d/fill/index.html      | 2 +-
 files/zh-cn/web/api/canvasrenderingcontext2d/fillrect/index.html  | 2 +-
 files/zh-cn/web/api/canvasrenderingcontext2d/filltext/index.html  | 2 +-
 .../zh-cn/web/api/canvasrenderingcontext2d/getlinedash/index.html | 2 +-
 .../web/api/canvasrenderingcontext2d/ispointinpath/index.html     | 2 +-
 .../web/api/canvasrenderingcontext2d/ispointinstroke/index.html   | 2 +-
 .../web/api/canvasrenderingcontext2d/linedashoffset/index.html    | 2 +-
 files/zh-cn/web/api/canvasrenderingcontext2d/lineto/index.html    | 2 +-
 files/zh-cn/web/api/canvasrenderingcontext2d/moveto/index.html    | 2 +-
 .../web/api/canvasrenderingcontext2d/putimagedata/index.html      | 2 +-
 .../web/api/canvasrenderingcontext2d/quadraticcurveto/index.html  | 2 +-
 files/zh-cn/web/api/canvasrenderingcontext2d/rect/index.html      | 2 +-
 .../web/api/canvasrenderingcontext2d/resettransform/index.html    | 2 +-
 files/zh-cn/web/api/canvasrenderingcontext2d/restore/index.html   | 2 +-
 files/zh-cn/web/api/canvasrenderingcontext2d/rotate/index.html    | 2 +-
 files/zh-cn/web/api/canvasrenderingcontext2d/save/index.html      | 2 +-
 files/zh-cn/web/api/canvasrenderingcontext2d/scale/index.html     | 8 ++++----
 .../api/canvasrenderingcontext2d/scrollpathintoview/index.html    | 2 +-
 .../zh-cn/web/api/canvasrenderingcontext2d/setlinedash/index.html | 2 +-
 .../web/api/canvasrenderingcontext2d/settransform/index.html      | 2 +-
 files/zh-cn/web/api/canvasrenderingcontext2d/stroke/index.html    | 2 +-
 .../zh-cn/web/api/canvasrenderingcontext2d/stroketext/index.html  | 2 +-
 files/zh-cn/web/api/canvasrenderingcontext2d/transform/index.html | 2 +-
 files/zh-cn/web/api/canvasrenderingcontext2d/translate/index.html | 2 +-
 36 files changed, 40 insertions(+), 43 deletions(-)

(limited to 'files/zh-cn/web/api/canvasrenderingcontext2d')

diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/addhitregion/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/addhitregion/index.html
index 1b1d7fc589..aa6c90b2ed 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/addhitregion/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/addhitregion/index.html
@@ -77,7 +77,7 @@ ctx.stroke();
 
 <p>修改下面的代码并在线查看canvas的变化（如果你没有看到全部的效果，请查看浏览器兼容性列表。如果你当前的浏览器支持点击区域，你需要激活偏好设置） 。</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/arc/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/arc/index.html
index 05b8ea3b62..5201304b84 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/arc/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/arc/index.html
@@ -52,7 +52,7 @@ ctx.stroke();
 
 <p>修改下面的代码并在线查看 canvas 的变化：</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code" name="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
@@ -98,7 +98,7 @@ window.addEventListener("load", drawCanvas);
 
 <p>在此例中，使用 arc() 尽可能地绘制不同的形状。</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="HTML_2">HTML</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="150" height="200"&gt;&lt;/canvas&gt;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/arcto/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/arcto/index.html
index 8c8e2dc5ff..0754d05560 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/arcto/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/arcto/index.html
@@ -75,7 +75,7 @@ ctx.stroke();
 
 <p>修改下面的代码并在线查看 canvas 的变化：</p>
 
-<div style="display: none;">
+<div class="hidden">
 <pre class="brush: html">&lt;canvas id="canvas" class="playable-canvas" height="200" width="400"&gt;&lt;/canvas&gt;
 &lt;div class="playable-buttons"&gt;
   &lt;input id="edit" type="button" value="Edit" /&gt;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/beginpath/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/beginpath/index.html
index 427a3a062d..31b8890dd2 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/beginpath/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/beginpath/index.html
@@ -45,7 +45,7 @@ ctx.stroke();
 
 <p>修改下面的代码并在线查看 canvas 的变化：</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/beziercurveto/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/beziercurveto/index.html
index 5a66c1f6e8..bbcf56f458 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/beziercurveto/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/beziercurveto/index.html
@@ -74,7 +74,7 @@ ctx.fillRect(150, 70, 10, 10);</pre>
 
 <p>修改下面的代码并在线查看 canvas 的变化：</p>
 
-<div style="display: none;">
+<div class="hidden">
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
 &lt;div class="playable-buttons"&gt;
   &lt;input id="edit" type="button" value="Edit" /&gt;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/clip/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/clip/index.html
index fd68c7e3b6..03fbe7848a 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/clip/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/clip/index.html
@@ -56,7 +56,7 @@ ctx.fillRect(0, 0, 100,100);
 
 <p>修改下面的代码并在线查看 canvas 的变化：</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/closepath/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/closepath/index.html
index 8446adbac8..cc8d70d2cf 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/closepath/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/closepath/index.html
@@ -38,7 +38,7 @@ ctx.stroke();
 
 <p>修改下面的代码并在线查看 canvas 的变化：</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/createlineargradient/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/createlineargradient/index.html
index d7e9536d37..4df64d94c4 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/createlineargradient/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/createlineargradient/index.html
@@ -70,7 +70,7 @@ ctx.fillRect(20, 20, 200, 100);</pre>
 
 <h4 id="结果">结果</h4>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html notranslate">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/createradialgradient/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/createradialgradient/index.html
index df820f2cbb..b2121ce17c 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/createradialgradient/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/createradialgradient/index.html
@@ -61,7 +61,7 @@ ctx.fillRect(0,0,200,200);
 
 <p>修改下面的代码并在线查看 canvas的变化：</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html notranslate">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.html
index 1dc87fb0b2..ec92b0754d 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/drawfocusifneeded/index.html
@@ -50,7 +50,7 @@ ctx.drawFocusIfNeeded(button);
 
 <p>修改下面的代码并在线查看 canvas的变化：</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html notranslate">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/drawimage/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/drawimage/index.html
index b0d477e9e8..dc126e4ad4 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/drawimage/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/drawimage/index.html
@@ -66,7 +66,6 @@ void <var><em>ctx</em>.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth,
 <h4 id="HTML">HTML</h4>
 
 <pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-&lt;div style="display:none;"&gt;
   &lt;img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg"
        width="300" height="227"&gt;
 &lt;/div&gt;
@@ -87,7 +86,6 @@ ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
 <h3 id="HTML_2">HTML</h3>
 
 <pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-&lt;div style="display:none;"&gt;
   &lt;img id="source"
        src="https://mdn.mozillademos.org/files/5397/rhino.jpg"
        width="300" height="227"&gt;
@@ -109,11 +107,10 @@ image.addEventListener('load', e =&gt; {
 
 <h4 id="结果">结果</h4>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div style="display:none;"&gt;
   &lt;img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227"&gt;
 &lt;/div&gt;
 &lt;div class="playable-buttons"&gt;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/ellipse/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/ellipse/index.html
index d46c4acb87..d39d8dcc7b 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/ellipse/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/ellipse/index.html
@@ -63,7 +63,7 @@ ctx.stroke();</code></pre>
 
 <p>修改下面的代码并在线查看 canvas 的变化（如果椭圆没有绘制，请在兼容性列表中检查你的浏览器是否支持）：</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code" name="Playable_code">Playable code</h6>
 
 <pre class="brush: html notranslate">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/fill/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/fill/index.html
index a7dadcff17..a117a7eabd 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/fill/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/fill/index.html
@@ -50,7 +50,7 @@ ctx.fill();
 
 <p>修改下面的代码并在线查看 canvas 变化：</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/fillrect/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/fillrect/index.html
index ddd97227f0..81cff04162 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/fillrect/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/fillrect/index.html
@@ -51,7 +51,7 @@ ctx.fillRect(20, 10, 150, 100);</pre>
 
 <h4 id="结果">结果</h4>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html notranslate">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/filltext/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/filltext/index.html
index 6cbff0639b..bfb0e5f33b 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/filltext/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/filltext/index.html
@@ -52,7 +52,7 @@ ctx.fillText("Hello world", 50, 100);
 
 <p>修改下面的代码并在线查看 canvas 的变化：</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html notranslate">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/getlinedash/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/getlinedash/index.html
index f96faf7401..5286c3e2d5 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/getlinedash/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/getlinedash/index.html
@@ -46,7 +46,7 @@ ctx.stroke();
 
 <p>修改下面的代码并在线查看 canvas 的变化：</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/ispointinpath/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/ispointinpath/index.html
index bd95a9038a..aa8ad34a6e 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/ispointinpath/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/ispointinpath/index.html
@@ -65,7 +65,7 @@ console.log(ctx.isPointInPath(10, 10)); // true
 
 <p>修改下面的代码， 在线查看 canvas的变化并在你的 <a href="/en-US/docs/Tools/Browser_Console">控制台</a> 中观察日志信息：</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/ispointinstroke/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/ispointinstroke/index.html
index 8732970d18..b0c116ee37 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/ispointinstroke/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/ispointinstroke/index.html
@@ -58,7 +58,7 @@ console.log(ctx.isPointInStroke(10, 10)); // true
 
 <p>修改线面的代码，在线查看 canvas 的变化，并在你的<a href="/en-US/docs/Tools/Browser_Console">控制台</a>查看日至信息：</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/linedashoffset/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/linedashoffset/index.html
index 44b8c1ad65..aa8f1c33ec 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/linedashoffset/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/linedashoffset/index.html
@@ -47,7 +47,7 @@ ctx.stroke();
 
 <p>修改下面的代码并在线查看 canvas 变化：</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/lineto/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/lineto/index.html
index f171b170fd..5365698d00 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/lineto/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/lineto/index.html
@@ -45,7 +45,7 @@ ctx.stroke();
 
 <p>修改下面的代码并在线查看 canvas 的变化：</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/moveto/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/moveto/index.html
index eb99c51967..772c0ae0c5 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/moveto/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/moveto/index.html
@@ -45,7 +45,7 @@ ctx.stroke();
 
 <p>修改下面的代码并在线查看 canvas 的变化：</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/putimagedata/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/putimagedata/index.html
index 2719f7901c..3bdb9fab21 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/putimagedata/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/putimagedata/index.html
@@ -92,7 +92,7 @@ putImageData(ctx, imagedata, 150, 0, 50, 50, 25, 25);
 
 <p>修改下面的代码并在线查看 canvas 的变化：</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html
index d1794c5043..4082363eb5 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html
@@ -142,7 +142,7 @@ ctx.stroke();
 </pre>
 </div>
 
-<div style="display: none;">
+<div class="hidden">
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
 &lt;div class="playable-buttons"&gt;
   &lt;input id="edit" type="button" value="Edit" /&gt;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/rect/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/rect/index.html
index 4053d0f387..f34e1b54ad 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/rect/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/rect/index.html
@@ -46,7 +46,7 @@ ctx.fill();
 
 <p>修改下面的代码并在线查看 canvas 的变化：</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/resettransform/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/resettransform/index.html
index 47a91eacbf..5c9cd7bd24 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/resettransform/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/resettransform/index.html
@@ -37,7 +37,7 @@ ctx.resetTransform();
 
 <p>修改下面的代码并在线查看 canvas 的变化：</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/restore/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/restore/index.html
index c35d6ce849..f807b5b521 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/restore/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/restore/index.html
@@ -40,7 +40,7 @@ ctx.fillRect(150, 75, 100, 100);
 
 <p>修改下面的代码并在线查看 canvas 的变化：</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/rotate/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/rotate/index.html
index f6ae42b495..5d92a9a718 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/rotate/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/rotate/index.html
@@ -54,7 +54,7 @@ ctx.setTransform(1, 0, 0, 1, 0, 0);
 
 <p>修改下面的代码并在线查看 canvas 的变化：</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/save/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/save/index.html
index 167c40fd19..3560f8a771 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/save/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/save/index.html
@@ -49,7 +49,7 @@ ctx.fillRect(150, 75, 100, 100);
 
 <p>修改下面的代码并在线查看 canvas 的变化：</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/scale/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/scale/index.html
index db95fca214..a67cfa6985 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/scale/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/scale/index.html
@@ -117,17 +117,17 @@ ctx.setTransform(1, 0, 0, 1, 0, 0);
 </ul>
 
 <p>
- <audio style="display: none;"></audio>
+ <audio class="hidden"></audio>
 </p>
 
 <p>
- <audio style="display: none;"></audio>
+ <audio class="hidden"></audio>
 </p>
 
 <p>
- <audio style="display: none;"></audio>
+ <audio class="hidden"></audio>
 </p>
 
 <p>
- <audio style="display: none;"></audio>
+ <audio class="hidden"></audio>
 </p>
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/scrollpathintoview/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/scrollpathintoview/index.html
index 222fb61aa0..b2edfdbe08 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/scrollpathintoview/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/scrollpathintoview/index.html
@@ -43,7 +43,7 @@ ctx.scrollPathIntoView();
 
 <p>修改下面的代码并在线查看 canvas 的变化：</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/setlinedash/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/setlinedash/index.html
index 710d8f9e53..16a66f36e2 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/setlinedash/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/setlinedash/index.html
@@ -68,7 +68,7 @@ ctx.stroke();
 
 <h4 id="结果">结果</h4>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/settransform/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/settransform/index.html
index 23302386e7..0d47fe8d4c 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/settransform/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/settransform/index.html
@@ -57,7 +57,7 @@ ctx.fillRect(0,0,100,100);
 
 <p>修改下面的代码并在线查看 canvas 的变化：</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html notranslate">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/stroke/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/stroke/index.html
index 0eaef6e3af..e7dca45c16 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/stroke/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/stroke/index.html
@@ -41,7 +41,7 @@ ctx.stroke();
 
 <p>修改下面的代码并在线查看 canvas 的变化：</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/stroketext/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/stroketext/index.html
index 404998a247..8161bda3f2 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/stroketext/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/stroketext/index.html
@@ -52,7 +52,7 @@ ctx.strokeText("Hello world", 50, 100);
 
 <p>修改下面的代码并在线查看 canvas 的变化：</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/transform/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/transform/index.html
index f56c5a48ff..ac274f9891 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/transform/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/transform/index.html
@@ -55,7 +55,7 @@ ctx.fillRect(0,0,100,100);
 
 <p>修改下面的代码并在线查看 canvas 的变化：</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
diff --git a/files/zh-cn/web/api/canvasrenderingcontext2d/translate/index.html b/files/zh-cn/web/api/canvasrenderingcontext2d/translate/index.html
index f4dd697342..a466b1d181 100644
--- a/files/zh-cn/web/api/canvasrenderingcontext2d/translate/index.html
+++ b/files/zh-cn/web/api/canvasrenderingcontext2d/translate/index.html
@@ -50,7 +50,7 @@ ctx.setTransform(1, 0, 0, 1, 0, 0);
 
 <p>修改下面的代码并在线查看 canvas 的变化：</p>
 
-<div style="display: none;">
+<div class="hidden">
 <h6 id="Playable_code">Playable code</h6>
 
 <pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-- 
cgit v1.2.3-54-g00ecf