Skip to content

Commit 4d8ecb9

Browse files
annevkannevk
committed
add ClientRect.width, ClientRect.height; add several simple examples
1 parent c9d76c4 commit 4d8ecb9

2 files changed

Lines changed: 98 additions & 0 deletions

File tree

‎cssom-view/Overview.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
pre.idl :link, pre.idl :visited { color:inherit; background:transparent }
1010
dfn { font-weight:bold; font-style:normal }
1111
div.example { margin-left:1em; padding-left:1em; border-left:double; color:#222; background:#fcfcfc }
12+
div.example code { color:inherit }
1213
p.note { margin-left:2em; color:green; font-style:italic; font-weight:bold }
1314
p.note::before { content:"Note: " }
1415
.issue { padding:.5em; border:solid red }
@@ -286,6 +287,13 @@ <h3 id=the-media-interface><span class=secno>3.1 </span>The <code
286287
title="">screen</code>, <code>print</code>, et cetera). [<cite><a
287288
href="#ref-css21">CSS21</a></cite>]
288289

290+
<div class=example>
291+
<p>The following snippet determines whether the page is rendered using the
292+
projection media type:</p>
293+
294+
<pre><code>var isProjection = media.type == "projection"</code></pre>
295+
</div>
296+
289297
<p>The <dfn id=media-matchmedium
290298
title=media-matchmedium><code>matchMedium(<var>mediaquery</var>)</code></dfn>
291299
method, when invoked, <em class=ct>must</em> return the result of the
@@ -302,6 +310,12 @@ <h3 id=the-media-interface><span class=secno>3.1 </span>The <code
302310
<p>Otherwise, return <code>false</code>.
303311
</ol>
304312

313+
<div class=example>
314+
<p>The following snippet determines whether the device is a color device:</p>
315+
316+
<pre><code>var isColorDevice = media.matchMedium("(color)")</code></pre>
317+
</div>
318+
305319
<h2 id=the-screenview-interface><span class=secno>4. </span>The <code
306320
title="">ScreenView</code> Interface</h2>
307321

@@ -342,6 +356,13 @@ <h2 id=the-screenview-interface><span class=secno>4. </span>The <code
342356
attribute, on getting, <em class=ct>must</em> return the <a
343357
href="#viewport">viewport</a> width.
344358

359+
<div class=example>
360+
<p>The following snippet shows how to obtain the width of the viewport,
361+
including the rendered scrollbar:</p>
362+
363+
<pre><code>var viewportWidth = innerWidth</code></pre>
364+
</div>
365+
345366
<p>The <dfn id=screenview-innerheight><code>innerHeight</code></dfn>
346367
attribute, on getting, <em class=ct>must</em> return the <a
347368
href="#viewport">viewport</a> height.
@@ -642,6 +663,15 @@ <h3 id=the-getclientrects><span class=secno>6.1 </span>The <code
642663
which the height or width is not zero.
643664
</ol>
644665

666+
<div class=example>
667+
<p>The following snippet gets the dimensions of the first <code>div</code>
668+
element in a document:</p>
669+
670+
<pre><code>var example = document.getElementsByTagName("div")[0].getBoundingClientRect();
671+
var exampleWidth = example.width;
672+
var exampleHeight = example.height;</code></pre>
673+
</div>
674+
645675
<h3 id=scroll-attributes><span class=secno>6.2 </span>The <code
646676
title="">scrollTop</code>, <code title="">scrollLeft</code>, <code
647677
title="">scrollWidth</code>, and <code title="">scrollHeight</code>
@@ -1199,6 +1229,8 @@ <h3 id=the-clientrect-interface><span class=secno>10.2 </span>The <code
11991229
readonly attribute float <a href="#clientrect-right" title=clientrect-right>right</a>;
12001230
readonly attribute float <a href="#clientrect-bottom" title=clientrect-bottom>bottom</a>;
12011231
readonly attribute float <a href="#clientrect-left" title=clientrect-left>left</a>;
1232+
readonly attribute float <a href="#clientrect-width" title=clientrect-width>width</a>;
1233+
readonly attribute float <a href="#clientrect-height" title=clientrect-height>height</a>;
12021234
};</pre>
12031235

12041236
<p>All coordinates and dimensions on the <code><a
@@ -1225,6 +1257,22 @@ <h3 id=the-clientrect-interface><span class=secno>10.2 </span>The <code
12251257
class=ct>must</em> return the x-coordinate, relative to the <a
12261258
href="#viewport">viewport</a> origin, of the left of the rectangle box.
12271259

1260+
<p>The <dfn id=clientrect-width
1261+
title=clientrect-width><code>width</code></dfn> attribute, on getting, <em
1262+
class=ct>must</em> return the width of the rectangle box.
1263+
1264+
<p class=note>This is identical to <code title=clientrect-right><a
1265+
href="#clientrect-right">right</a></code> minus <code
1266+
title=clientrect-left><a href="#clientrect-left">left</a></code>.
1267+
1268+
<p>The <dfn id=clientrect-height
1269+
title=clientrect-height><code>height</code></dfn> attribute, on getting,
1270+
<em class=ct>must</em> return the height of the rectangle box.
1271+
1272+
<p class=note>This is identical to <code title=clientrect-bottom><a
1273+
href="#clientrect-bottom">bottom</a></code> minus <code
1274+
title=clientrect-top><a href="#clientrect-top">top</a></code>.
1275+
12281276
<h2 class=no-num id=references>References</h2>
12291277

12301278
<p>All references are normative<!--, unless stated otherwise-->.

‎cssom-view/Overview.src.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
pre.idl :link, pre.idl :visited { color:inherit; background:transparent }
99
dfn { font-weight:bold; font-style:normal }
1010
div.example { margin-left:1em; padding-left:1em; border-left:double; color:#222; background:#fcfcfc }
11+
div.example code { color:inherit }
1112
p.note { margin-left:2em; color:green; font-style:italic; font-weight:bold }
1213
p.note::before { content:"Note: " }
1314
.issue { padding:.5em; border:solid red }
@@ -190,6 +191,13 @@ <h3 id="the-media-interface">The <code title="">Media</code> Interface</h3>
190191
(<code title="">screen</code>, <code>print</code>, et cetera).
191192
[<cite><span>CSS21</span></cite>]</p>
192193

194+
<div class="example">
195+
<p>The following snippet determines whether the page is rendered using
196+
the projection media type:</p>
197+
198+
<pre><code>var isProjection = media.type == "projection"</code></pre>
199+
</div>
200+
193201
<p>The
194202
<dfn id="media-matchmedium" title="media-matchmedium"><code>matchMedium(<var>mediaquery</var>)</code></dfn>
195203
method, when invoked, <em class="ct">must</em> return the result of the
@@ -204,6 +212,13 @@ <h3 id="the-media-interface">The <code title="">Media</code> Interface</h3>
204212
<li><p>Otherwise, return <code>false</code>.</p></li>
205213
</ol>
206214

215+
<div class="example">
216+
<p>The following snippet determines whether the device is a color
217+
device:</p>
218+
219+
<pre><code>var isColorDevice = media.matchMedium("(color)")</code></pre>
220+
</div>
221+
207222

208223
<h2 id="the-screenview-interface">The <code title="">ScreenView</code> Interface</h2>
209224

@@ -239,6 +254,13 @@ <h2 id="the-screenview-interface">The <code title="">ScreenView</code> Interface
239254
<p>The <dfn id="screenview-innerwidth"><code>innerWidth</code></dfn>
240255
attribute, on getting, <em class="ct">must</em> return the
241256
<span>viewport</span> width.</p>
257+
258+
<div class="example">
259+
<p>The following snippet shows how to obtain the width of the viewport,
260+
including the rendered scrollbar:</p>
261+
262+
<pre><code>var viewportWidth = innerWidth</code></pre>
263+
</div>
242264

243265
<p>The <dfn id="screenview-innerheight"><code>innerHeight</code></dfn>
244266
attribute, on getting, <em class="ct">must</em> return the
@@ -515,6 +537,15 @@ <h3>The <code title="">getClientRects()</code> and
515537
and all of the remaining rectangles of which the height or width is not
516538
zero.</p></li>
517539
</ol>
540+
541+
<div class="example">
542+
<p>The following snippet gets the dimensions of the first
543+
<code>div</code> element in a document:</p>
544+
545+
<pre><code>var example = document.getElementsByTagName("div")[0].getBoundingClientRect();
546+
var exampleWidth = example.width;
547+
var exampleHeight = example.height;</code></pre>
548+
</div>
518549

519550

520551
<h3 id="scroll-attributes">The <code title="">scrollTop</code>,
@@ -1033,6 +1064,8 @@ <h3 id="the-clientrect-interface">The <code title="">ClientRect</code> Interface
10331064
readonly attribute float <span title="clientrect-right">right</span>;
10341065
readonly attribute float <span title="clientrect-bottom">bottom</span>;
10351066
readonly attribute float <span title="clientrect-left">left</span>;
1067+
readonly attribute float <span title="clientrect-width">width</span>;
1068+
readonly attribute float <span title="clientrect-height">height</span>;
10361069
};</pre>
10371070

10381071
<p>All coordinates and dimensions on the <code>ClientRect</code> interface
@@ -1062,6 +1095,23 @@ <h3 id="the-clientrect-interface">The <code title="">ClientRect</code> Interface
10621095
relative to the <span>viewport</span> origin, of the left of the rectangle
10631096
box.</p>
10641097

1098+
<p>The
1099+
<dfn id="clientrect-width" title="clientrect-width"><code>width</code></dfn>
1100+
attribute, on getting, <em class="ct">must</em> return the width of the
1101+
rectangle box.</p>
1102+
1103+
<p class="note">This is identical to
1104+
<code title="clientrect-right">right</code> minus
1105+
<code title="clientrect-left">left</code>.</p>
1106+
1107+
<p>The
1108+
<dfn id="clientrect-height" title="clientrect-height"><code>height</code></dfn>
1109+
attribute, on getting, <em class="ct">must</em> return the height of the
1110+
rectangle box.</p>
1111+
1112+
<p class="note">This is identical to
1113+
<code title="clientrect-bottom">bottom</code> minus
1114+
<code title="clientrect-top">top</code>.</p>
10651115

10661116

10671117
<h2 class="no-num">References</h2>

0 commit comments

Comments
 (0)