jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

minor

Browse source
This commit is contained in:
Ilya Kantor 2019-08-05 14:38:22 +03:00
parent d1d8c968e7
commit 80dd2cba73
4 changed files with 220 additions and 224 deletions
Download patch file Download diff file Expand all files Collapse all files

282
2-ui/1-document/07-modifying-document/article.md
View file

@ -4,11 +4,9 @@ DOM modifications is the key to create "live" pages.
Here we'll see how to create new elements "on the fly" and modify the existing page content. Here we'll see how to create new elements "on the fly" and modify the existing page content.
First we'll see a simple example and then explain the methods.
## Example: show a message ## Example: show a message
For a start, let's see how to add a message on the page that looks nicer than `alert`. Let's see the methods on example. We'll add a message on the page that looks nicer than `alert`.
Here's how it will look: Here's how it will look:
@ -30,11 +28,10 @@ Here's how it will look:
*/!* */!*
``` ```
That was an HTML example. Now let's create the same `div` with JavaScript (assuming that the styles are still in the HTML or an external CSS file). That was an HTML example. Now let's create the same `div` with JavaScript (assuming that the styles are in the HTML or an external CSS file).
## Creating an element ## Creating an element
To create DOM nodes, there are two methods: To create DOM nodes, there are two methods:
`document.createElement(tag)` `document.createElement(tag)`
@ -53,21 +50,21 @@ To create DOM nodes, there are two methods:
### Creating the message ### Creating the message
In our case we want to make a `div` with given classes and the message in it: In our case the message is a `div` with `alert` class and the HTML in it:
```js ```js
let div = document.createElement('div'); let div = document.createElement('div');
div.className = "alert alert-success"; div.className = "alert";
div.innerHTML = "<strong>Hi there!</strong> You've read an important message."; div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";
``` ```
After that, we have our DOM element ready. Right now it is just in a variable and we cannot see it. That is because it's not yet inserted into the page. We created the element, but as of now it's only in a variable. We can't see the element on the page, as it's not yet a part of the document.
## Insertion methods ## Insertion methods
To make the `div` show up, we need to insert it somewhere into `document`. For instance, in `document.body`. To make the `div` show up, we need to insert it somewhere into `document`. For instance, in `document.body`.
There's a special method `appendChild` for that: `document.body.appendChild(div)`. There's a special method `append` for that: `document.body.append(div)`.
Here's the full code: Here's the full code:
@ -84,77 +81,16 @@ Here's the full code:
<script> <script>
let div = document.createElement('div'); let div = document.createElement('div');
div.className = "alert alert-success"; div.className = "alert";
div.innerHTML = "<strong>Hi there!</strong> You've read an important message."; div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";
*!* *!*
document.body.appendChild(div); document.body.append(div);
*/!* */!*
</script> </script>
``` ```
Here's a brief list of methods to insert a node into a parent element (`parentElem` for short): This set of methods provides more ways to insert:
`parentElem.appendChild(node)`
: Appends `node` as the last child of `parentElem`.
The following example adds a new `<li>` to the end of `<ol>`:
```html run height=100
<ol id="list">
<li>0</li>
<li>1</li>
<li>2</li>
</ol>
<script>
let newLi = document.createElement('li');
newLi.innerHTML = 'Hello, world!';
list.appendChild(newLi);
</script>
```
`parentElem.insertBefore(node, nextSibling)`
: Inserts `node` before `nextSibling` into `parentElem`.
The following code inserts a new list item before the second `<li>`:
```html run height=100
<ol id="list">
<li>0</li>
<li>1</li>
<li>2</li>
</ol>
<script>
let newLi = document.createElement('li');
newLi.innerHTML = 'Hello, world!';
*!*
list.insertBefore(newLi, list.children[1]);
*/!*
</script>
```
To insert `newLi` as the first element, we can do it like this:
```js
list.insertBefore(newLi, list.firstChild);
```
`parentElem.replaceChild(node, oldChild)`
: Replaces `oldChild` with `node` among children of `parentElem`.
All these methods return the inserted node. In other words, `parentElem.appendChild(node)` returns `node`. But usually the returned value is not used, we just run the method.
These methods are "old school": they exist from the ancient times and we can meet them in many old scripts. Unfortunately, they are not flexible enough.
For instance, how to insert *html* if we have it as a string? Or, given a node, without reference to its parent, how to remove it? Of course, that's doable, but not in an elegant way.
So there exist two other sets of insertion methods to handle all cases easily.
### prepend/append/before/after
This set of methods provides more flexible insertions:
- `node.append(...nodes or strings)` -- append nodes or strings at the end of `node`, - `node.append(...nodes or strings)` -- append nodes or strings at the end of `node`,
- `node.prepend(...nodes or strings)` -- insert nodes or strings into the beginning of `node`, - `node.prepend(...nodes or strings)` -- insert nodes or strings into the beginning of `node`,
@ -162,9 +98,7 @@ This set of methods provides more flexible insertions:
- `node.after(...nodes or strings)` –- insert nodes or strings after the `node`, - `node.after(...nodes or strings)` –- insert nodes or strings after the `node`,
- `node.replaceWith(...nodes or strings)` –- replaces `node` with the given nodes or strings. - `node.replaceWith(...nodes or strings)` –- replaces `node` with the given nodes or strings.
All of them accept a list of DOM nodes and/or text strings. If a string is given it's inserted as a text node. Here's an example of using these methods to add items to a list and the text before/after it:
Here's an example of using these methods to add more items to a list and the text before/after it:
```html autorun ```html autorun
<ol id="ol"> <ol id="ol">
@ -174,20 +108,20 @@ Here's an example of using these methods to add more items to a list and the tex
</ol> </ol>
<script> <script>
ol.before('before'); ol.before('before'); // insert string "before" before <ol>
ol.after('after'); ol.after('after'); // insert string "after" after <ol>
let prepend = document.createElement('li'); let liFirst = document.createElement('li');
prepend.innerHTML = 'prepend'; liFirst.innerHTML = 'prepend';
ol.prepend(prepend); ol.prepend(liFirst); // insert liFirst at the beginning of <ol>
let append = document.createElement('li'); let liLast = document.createElement('li');
append.innerHTML = 'append'; liLast.innerHTML = 'append';
ol.append(append); ol.append(liLast); // insert liLast at the end of <ol>
</script> </script>
``` ```
Here's a small picture what methods do: Here's a visual picture what methods do:
![](before-prepend-append-after.svg) ![](before-prepend-append-after.svg)
@ -234,9 +168,9 @@ So, these methods can only be used to insert DOM nodes or text pieces.
But what if we want to insert HTML "as html", with all tags and stuff working, like `elem.innerHTML`? But what if we want to insert HTML "as html", with all tags and stuff working, like `elem.innerHTML`?
### insertAdjacentHTML/Text/Element ## insertAdjacentHTML/Text/Element
There's another, pretty versatile method: `elem.insertAdjacentHTML(where, html)`. For that we can use another, pretty versatile method: `elem.insertAdjacentHTML(where, html)`.
The first parameter is a code word, specifying where to insert relative to `elem`. Must be one of the following: The first parameter is a code word, specifying where to insert relative to `elem`. Must be one of the following:
@ -265,7 +199,7 @@ For instance:
<p>Bye</p> <p>Bye</p>
``` ```
That's how we can append an arbitrary HTML to our page. That's how we can append an arbitrary HTML to the page.
Here's the picture of insertion variants: Here's the picture of insertion variants:
@ -294,12 +228,56 @@ So here's an alternative variant of showing a message:
</style> </style>
<script> <script>
document.body.insertAdjacentHTML("afterbegin", `<div class="alert alert-success"> document.body.insertAdjacentHTML("afterbegin", `<div class="alert">
<strong>Hi there!</strong> You've read an important message. <strong>Hi there!</strong> You've read an important message.
</div>`); </div>`);
</script> </script>
``` ```
## Node removal
To remove a node, there's a method `node.remove()`.
Let's make our message disappear after a second:
```html run untrusted
<style>
.alert {
padding: 15px;
border: 1px solid #d6e9c6;
border-radius: 4px;
color: #3c763d;
background-color: #dff0d8;
}
</style>
<script>
let div = document.createElement('div');
div.className = "alert";
div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";
document.body.append(div);
*!*
setTimeout(() => div.remove(), 1000);
*/!*
</script>
```
Please note: if we want to *move* an element to another place -- there's no need to remove it from the old one.
**All insertion methods automatically remove the node from the old place.**
For instance, let's swap elements:
```html run height=50
<div id="first">First</div>
<div id="second">Second</div>
<script>
// no need to call remove
second.after(first); // take #second and after it insert #first
</script>
```
## Cloning nodes: cloneNode ## Cloning nodes: cloneNode
How to insert one more similar message? How to insert one more similar message?
@ -337,7 +315,6 @@ An example of copying the message:
</script> </script>
``` ```
## DocumentFragment [#document-fragment] ## DocumentFragment [#document-fragment]
`DocumentFragment` is a special DOM node that serves as a wrapper to pass around lists of nodes. `DocumentFragment` is a special DOM node that serves as a wrapper to pass around lists of nodes.
@ -404,62 +381,84 @@ ul.append(...getListContent()); // append + "..." operator = friends!
We mention `DocumentFragment` mainly because there are some concepts on top of it, like [template](info:template-element) element, that we'll cover much later. We mention `DocumentFragment` mainly because there are some concepts on top of it, like [template](info:template-element) element, that we'll cover much later.
## Old-school insert/remove methods
## Removal methods [old]
To remove nodes, there are the following methods: There are also "old school" DOM manipulation methods, existing for historical reasons.
These methods come from really ancient times. Nowadays, there's no reason to use them, as modern methods, such as `append`, `prepend`, `before`, `after`, `remove`, `replaceWith`, are more flexible.
`parentElem.removeChild(node)` The only reason we list these methods here is that you can find them in many old scripts:
: Removes `node` from `parentElem` (assuming it's a child).
`node.remove()` `parentElem.appendChild(node)`
: Removes the `node` from its place. : Appends `node` as the last child of `parentElem`.
We can easily see that the second method is much shorter. The first one exists for historical reasons. The following example adds a new `<li>` to the end of `<ol>`:
````smart ```html run height=100
If we want to *move* an element to another place -- there's no need to remove it from the old one. <ol id="list">
<li>0</li>
<li>1</li>
<li>2</li>
</ol>
**All insertion methods automatically remove the node from the old place.**
For instance, let's swap elements:
```html run height=50
<div id="first">First</div>
<div id="second">Second</div>
<script> <script>
// no need to call remove let newLi = document.createElement('li');
second.after(first); // take #second and after it - insert #first newLi.innerHTML = 'Hello, world!';
list.appendChild(newLi);
</script> </script>
``` ```
````
Let's make our message disappear after a second: `parentElem.insertBefore(node, nextSibling)`
: Inserts `node` before `nextSibling` into `parentElem`.
```html run untrusted The following code inserts a new list item before the second `<li>`:
<style>
.alert {
padding: 15px;
border: 1px solid #d6e9c6;
border-radius: 4px;
color: #3c763d;
background-color: #dff0d8;
}
</style>
```html run height=100
<ol id="list">
<li>0</li>
<li>1</li>
<li>2</li>
</ol>
<script> <script>
let div = document.createElement('div'); let newLi = document.createElement('li');
div.className = "alert alert-success"; newLi.innerHTML = 'Hello, world!';
div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";
document.body.append(div);
*!* *!*
setTimeout(() => div.remove(), 1000); list.insertBefore(newLi, list.children[1]);
// or setTimeout(() => document.body.removeChild(div), 1000);
*/!* */!*
</script> </script>
``` ```
To insert `newLi` as the first element, we can do it like this:
```js
list.insertBefore(newLi, list.firstChild);
```
`parentElem.replaceChild(node, oldChild)`
: Replaces `oldChild` with `node` among children of `parentElem`.
`parentElem.removeChild(node)`
: Removes `node` from `parentElem` (assuming `node` is its child).
The following example removes first `<li>` from `<ol>`:
```html run height=100
<ol id="list">
<li>0</li>
<li>1</li>
<li>2</li>
</ol>
<script>
let li = list.firstElementChild;
list.removeChild(li);
</script>
```
All these methods return the inserted/removed node. In other words, `parentElem.appendChild(node)` returns `node`. But usually the returned value is not used, we just run the method.
## A word about "document.write" ## A word about "document.write"
@ -502,33 +501,22 @@ For instance:
So it's kind of unusable at "after loaded" stage, unlike other DOM methods we covered above. So it's kind of unusable at "after loaded" stage, unlike other DOM methods we covered above.
That was the downside. That's the downside.
Technically, when `document.write` is called while the browser is reading ("parsing") incoming HTML, and it writes something, the browser consumes it just as if it were initially there, in the HTML text. There's an upside also. Technically, when `document.write` is called while the browser is reading ("parsing") incoming HTML, and it writes something, the browser consumes it just as if it were initially there, in the HTML text.
That gives us the upside -- it works blazingly fast, because there's *no DOM modification*. It writes directly into the page text, while the DOM is not yet built, and the browser puts it into DOM at generation-time. So it works blazingly fast, because there's *no DOM modification* involved. It writes directly into the page text, while the DOM is not yet built.
So if we need to add a lot of text into HTML dynamically, and we're at page loading phase, and the speed matters, it may help. But in practice these requirements rarely come together. And usually we can see this method in scripts just because they are old. So if we need to add a lot of text into HTML dynamically, and we're at page loading phase, and the speed matters, it may help. But in practice these requirements rarely come together. And usually we can see this method in scripts just because they are old.
## Summary ## Summary
Methods to create new nodes: - Methods to create new nodes:
- `document.createElement(tag)` -- creates an element with the given tag, - `document.createElement(tag)` -- creates an element with the given tag,
- `document.createTextNode(value)` -- creates a text node (rarely used), - `document.createTextNode(value)` -- creates a text node (rarely used),
- `elem.cloneNode(deep)` -- clones the element, if `deep==true` then with all descendants. - `elem.cloneNode(deep)` -- clones the element, if `deep==true` then with all descendants.
Insertion and removal of nodes: - Insertion and removal:
- From the parent:
- `parent.appendChild(node)`
- `parent.insertBefore(node, nextSibling)`
- `parent.removeChild(node)`
- `parent.replaceChild(newElem, node)`
All these methods return `node`.
- Given a list of nodes and strings:
- `node.append(...nodes or strings)` -- insert into `node`, at the end, - `node.append(...nodes or strings)` -- insert into `node`, at the end,
- `node.prepend(...nodes or strings)` -- insert into `node`, at the beginning, - `node.prepend(...nodes or strings)` -- insert into `node`, at the beginning,
- `node.before(...nodes or strings)` –- insert right before `node`, - `node.before(...nodes or strings)` –- insert right before `node`,
@ -538,7 +526,15 @@ Insertion and removal of nodes:
Text strings are inserted "as text". Text strings are inserted "as text".
- Given a piece of HTML: `elem.insertAdjacentHTML(where, html)`, inserts depending on where: - There are also "old school" methods:
- `parent.appendChild(node)`
- `parent.insertBefore(node, nextSibling)`
- `parent.removeChild(node)`
- `parent.replaceChild(newElem, node)`
All these methods return `node`.
- Given a piece of HTML: `elem.insertAdjacentHTML(where, html)`, inserts depending on `where`:
- `"beforebegin"` -- insert `html` right before `elem`, - `"beforebegin"` -- insert `html` right before `elem`,
- `"afterbegin"` -- insert `html` into `elem`, at the beginning, - `"afterbegin"` -- insert `html` into `elem`, at the beginning,
- `"beforeend"` -- insert `html` into `elem`, at the end, - `"beforeend"` -- insert `html` into `elem`, at the end,

4
2-ui/1-document/07-modifying-document/before-prepend-append-after.svg
View file

@ -62,8 +62,8 @@
<text id="ol.before" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47"> <text id="ol.before" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="111" y="26">ol.before</tspan> <tspan x="111" y="26">ol.before</tspan>
</text> </text>
<text id="ol.*(…nodes-or-strin" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8B572A"> <text id="(…nodes-or-strings)" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8B572A">
<tspan x="198" y="112">ol.*(…nodes or strings)</tspan> <tspan x="198" y="112">(…nodes or strings)</tspan>
</text> </text>
</g> </g>
</g> </g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 23 KiB

Before After
Before After

106
2-ui/1-document/09-size-and-scroll/metric-offset-width-height.svg
View file

@ -15,9 +15,9 @@
</defs> </defs>
<g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="dom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="metric-offset-width-height.svg"> <g id="metric-offset-width-height.svg">
<path d="M394,155 L54,155 L54,395 L394,395 L394,155 Z M29,130 L419,130 L419,420 L29,420 L29,130 Z" id="Rectangle-2" fill-opacity="0.88" fill="#E8C48F"></path> <path d="M395,155 L55,155 L55,395 L395,395 L395,155 Z M30,130 L420,130 L420,420 L30,420 L30,130 Z" id="Rectangle-2" fill-opacity="0.88" fill="#E8C48F"></path>
<path d="M75,177 L75,376 L358,376 L358,177 L75,177 Z" id="Rectangle-1" stroke="#EE6B47" stroke-width="2"></path> <path d="M76,177 L76,376 L359,376 L359,177 L76,177 Z" id="Rectangle-1" stroke="#EE6B47" stroke-width="2"></path>
<g id="Scrollbar" transform="translate(378.000000, 155.000000)"> <g id="Scrollbar" transform="translate(379.000000, 155.000000)">
<rect id="Rectangle-19" stroke="#E9E9E9" fill="#F3F2F2" x="0.5" y="0.5" width="15" height="239" rx="3"></rect> <rect id="Rectangle-19" stroke="#E9E9E9" fill="#F3F2F2" x="0.5" y="0.5" width="15" height="239" rx="3"></rect>
<g id="Rectangle-18-+-Triangle-1"> <g id="Rectangle-18-+-Triangle-1">
<rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-1)" x="0.5" y="0.5" width="15" height="19" rx="3"></rect> <rect id="Rectangle-18" stroke="#CFCFCF" fill="url(#linearGradient-1)" x="0.5" y="0.5" width="15" height="19" rx="3"></rect>
@ -40,72 +40,72 @@
</g> </g>
</g> </g>
<text id="border" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"> <text id="border" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="20.9" y="75" fill="#EE6B47">border</tspan> <tspan x="21.9" y="75" fill="#EE6B47">border</tspan>
<tspan x="28.1" y="89" fill="#3B86C4">25px</tspan> <tspan x="29.1" y="89" fill="#3B86C4">25px</tspan>
</text> </text>
<text id="padding" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"> <text id="padding" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="40.3" y="45" fill="#EE6B47">padding</tspan> <tspan x="41.3" y="45" fill="#EE6B47">padding</tspan>
<tspan x="51.1" y="59" fill="#3B86C4">20px</tspan> <tspan x="52.1" y="59" fill="#3B86C4">20px</tspan>
</text> </text>
<text id="content-width:284px" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"> <text id="content-width:284px" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="147.1" y="109" fill="#EE6B47">content width:</tspan> <tspan x="148.1" y="109" fill="#EE6B47">content width:</tspan>
<tspan x="247.9" y="109" fill="#3B86C4">284px</tspan> <tspan x="248.9" y="109" fill="#3B86C4">284px</tspan>
</text> </text>
<text id="height:200px" transform="translate(428.500000, 274.000000) rotate(-90.000000) translate(-428.500000, -274.000000) " font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"> <text id="height:200px" transform="translate(429.500000, 274.000000) rotate(-90.000000) translate(-429.500000, -274.000000) " font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="385.3" y="278" fill="#EE6B47">height:</tspan> <tspan x="386.3" y="278" fill="#EE6B47">height:</tspan>
<tspan x="435.7" y="278" fill="#3B86C4">200px</tspan> <tspan x="436.7" y="278" fill="#3B86C4">200px</tspan>
</text> </text>
<path d="M359.5,175 L447.64193,175" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path> <path d="M360.5,175 L448.64193,175" id="Line" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path d="M359.5,377 L447.64193,377" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path> <path d="M360.5,377 L448.64193,377" id="Line-2" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path id="Line" d="M442,191.5 L442,360 L448,360 L441,374 L434,360 L440,360 L440,191.5 L434,191.5 L441,177.5 L448,191.5 L442,191.5 Z" fill="#EE6B47" fill-rule="nonzero"></path> <path id="Line" d="M443,191.5 L443,360 L449,360 L442,374 L435,360 L441,360 L441,191.5 L435,191.5 L442,177.5 L449,191.5 L443,191.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-15" d="M90.6799927,116 L344.5,116 L344.5,110 L358.5,117 L344.5,124 L344.5,118 L90.6799927,118 L90.6799927,124 L76.6799927,117 L90.6799927,110 L90.6799927,116 Z" fill="#EE6B47" fill-rule="nonzero"></path> <path id="Line-15" d="M91.6799927,116 L345.5,116 L345.5,110 L359.5,117 L345.5,124 L345.5,118 L91.6799927,118 L91.6799927,124 L77.6799927,117 L91.6799927,110 L91.6799927,116 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path d="M7.53515625,114.945312 L50.5351562,114.945312" id="Line-14" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(29.480469, 114.945312) rotate(-270.000000) translate(-29.480469, -114.945312) "></path> <path d="M8.53515625,114.945312 L51.5351562,114.945312" id="Line-14" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(30.480469, 114.945312) rotate(-270.000000) translate(-30.480469, -114.945312) "></path>
<path d="M34.5351562,113.945312 L75.5351562,113.945312" id="Line-13" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(55.480469, 113.945312) rotate(-270.000000) translate(-55.480469, -113.945312) "></path> <path d="M35.5351562,113.945312 L76.5351562,113.945312" id="Line-13" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(56.480469, 113.945312) rotate(-270.000000) translate(-56.480469, -113.945312) "></path>
<text id="border-2" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"> <text id="border-2" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="384.9" y="76" fill="#EE6B47">border</tspan> <tspan x="385.9" y="76" fill="#EE6B47">border</tspan>
<tspan x="392.1" y="90" fill="#3B86C4">25px</tspan> <tspan x="393.1" y="90" fill="#3B86C4">25px</tspan>
</text> </text>
<text id="padding-2" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"> <text id="padding-2" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="347.3" y="16" fill="#EE6B47">padding</tspan> <tspan x="348.3" y="16" fill="#EE6B47">padding</tspan>
<tspan x="358.1" y="30" fill="#3B86C4">20px</tspan> <tspan x="359.1" y="30" fill="#3B86C4">20px</tspan>
</text> </text>
<text id="scrollbar" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"> <text id="scrollbar" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal">
<tspan x="357.1" y="48" fill="#EE6B47">scrollbar</tspan> <tspan x="358.1" y="48" fill="#EE6B47">scrollbar</tspan>
<tspan x="375.1" y="62" fill="#3B86C4">16px</tspan> <tspan x="376.1" y="62" fill="#3B86C4">16px</tspan>
</text> </text>
<path d="M357.535156,114.945312 L400.535156,114.945312" id="Line-17" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(379.480469, 114.945312) rotate(-270.000000) translate(-379.480469, -114.945312) "></path> <path d="M358.535156,114.945312 L401.535156,114.945312" id="Line-17" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(380.480469, 114.945312) rotate(-270.000000) translate(-380.480469, -114.945312) "></path>
<path d="M371.535156,114.945312 L414.535156,114.945312" id="Line-20" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(393.480469, 114.945312) rotate(-270.000000) translate(-393.480469, -114.945312) "></path> <path d="M372.535156,114.945312 L415.535156,114.945312" id="Line-20" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(394.480469, 114.945312) rotate(-270.000000) translate(-394.480469, -114.945312) "></path>
<path d="M397.535156,113.945312 L438.535156,113.945312" id="Line-18" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(418.480469, 113.945312) rotate(-270.000000) translate(-418.480469, -113.945312) "></path> <path d="M398.535156,113.945312 L439.535156,113.945312" id="Line-18" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(419.480469, 113.945312) rotate(-270.000000) translate(-419.480469, -113.945312) "></path>
<path d="M53.5351562,113.945312 L94.5351562,113.945312" id="Line-16" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(74.480469, 113.945312) rotate(-270.000000) translate(-74.480469, -113.945312) "></path> <path d="M54.5351562,113.945312 L95.5351562,113.945312" id="Line-16" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(75.480469, 113.945312) rotate(-270.000000) translate(-75.480469, -113.945312) "></path>
<path d="M340.535156,113.945312 L381.535156,113.945312" id="Line-19" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(361.480469, 113.945312) rotate(-270.000000) translate(-361.480469, -113.945312) "></path> <path d="M341.535156,113.945312 L382.535156,113.945312" id="Line-19" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6" transform="translate(362.480469, 113.945312) rotate(-270.000000) translate(-362.480469, -113.945312) "></path>
<text id="offsetWidth-=-25+20+" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"> <text id="offsetWidth-=-25+20+" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal">
<tspan x="55.5" y="484" fill="#EE6B47">offsetWidth = </tspan> <tspan x="56.5" y="484" fill="#EE6B47">offsetWidth = </tspan>
<tspan x="173.1" y="484" fill="#3B86C4">25+20+284+20+16+25 </tspan> <tspan x="174.1" y="484" fill="#3B86C4">25+20+284+20+16+25 </tspan>
<tspan x="332.7" y="484" fill="#F38158">=</tspan> <tspan x="333.7" y="484" fill="#F38158">=</tspan>
<tspan x="341.1" y="484" fill="#3B86C4"> 390px</tspan> <tspan x="342.1" y="484" fill="#3B86C4"> 390px</tspan>
</text> </text>
<path d="M29.5,419 L29.5,497" id="Line-24" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path> <path d="M30.5,419 L30.5,497" id="Line-24" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path d="M418.5,419 L418.5,499" id="Line-25" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path> <path d="M419.5,419 L419.5,499" id="Line-25" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path id="Line-22" d="M46.0899963,462.070965 L402,462.070965 L402,456.070965 L416,463.070965 L402,470.070965 L402,464.070965 L46.0899963,464.070965 L46.0899963,470.070965 L32.0899963,463.070965 L46.0899963,456.070965 L46.0899963,462.070965 Z" fill="#EE6B47" fill-rule="nonzero"></path> <path id="Line-22" d="M47.0899963,462.070965 L403,462.070965 L403,456.070965 L417,463.070965 L403,470.070965 L403,464.070965 L47.0899963,464.070965 L47.0899963,470.070965 L33.0899963,463.070965 L47.0899963,456.070965 L47.0899963,462.070965 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="offsetHeight:290px" transform="translate(482.500000, 280.500000) rotate(-90.000000) translate(-482.500000, -280.500000) " font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"> <text id="offsetHeight:290px" transform="translate(483.500000, 280.500000) rotate(-90.000000) translate(-483.500000, -280.500000) " font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal">
<tspan x="406.9" y="285" fill="#EE6B47">offsetHeight:</tspan> <tspan x="407.9" y="285" fill="#EE6B47">offsetHeight:</tspan>
<tspan x="516.1" y="285" fill="#3B86C4">290px</tspan> <tspan x="517.1" y="285" fill="#3B86C4">290px</tspan>
</text> </text>
<path d="M416.5,131 L504.64193,131" id="Line-27" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path> <path d="M417.5,131 L505.64193,131" id="Line-27" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path d="M416.5,420 L504.64193,420" id="Line-28" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path> <path d="M417.5,420 L505.64193,420" id="Line-28" stroke="#EE6B47" stroke-width="2" stroke-linecap="square" stroke-dasharray="3,6"></path>
<path id="Line-26" d="M469,146.589996 L469,405.410004 L475,405.410004 L468,419.410004 L461,405.410004 L467,405.410004 L467,146.589996 L461,146.589996 L468,132.589996 L475,146.589996 L469,146.589996 Z" fill="#EE6B47" fill-rule="nonzero"></path> <path id="Line-26" d="M470,146.589996 L470,405.410004 L476,405.410004 L469,419.410004 L462,405.410004 L468,405.410004 L468,146.589996 L462,146.589996 L469,132.589996 L476,146.589996 L470,146.589996 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="Introduction" font-family="OpenSans-Bold, Open Sans" font-size="16" font-weight="bold" fill="#5A4739"> <text id="Introduction" font-family="OpenSans-Bold, Open Sans" font-size="16" font-weight="bold" fill="#5A4739">
<tspan x="78" y="193">Introduction</tspan> <tspan x="79" y="193">Introduction</tspan>
<tspan x="178.726562" y="193" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"></tspan> <tspan x="179.726562" y="193" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"></tspan>
<tspan x="78" y="221" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">This Ecma Standard is based on several </tspan> <tspan x="79" y="221" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">This Ecma Standard is based on several </tspan>
<tspan x="78" y="240" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">originating technologies, the most well </tspan> <tspan x="79" y="240" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">originating technologies, the most well </tspan>
<tspan x="78" y="259" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">known being JavaScript (Netscape) and </tspan> <tspan x="79" y="259" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">known being JavaScript (Netscape) and </tspan>
<tspan x="78" y="278" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">JScript (Microsoft). The language was </tspan> <tspan x="79" y="278" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">JScript (Microsoft). The language was </tspan>
<tspan x="78" y="297" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">invented by Brendan Eich at Netscape and </tspan> <tspan x="79" y="297" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">invented by Brendan Eich at Netscape and </tspan>
<tspan x="78" y="316" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">first appeared in that company’s Navigator </tspan> <tspan x="79" y="316" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">first appeared in that company’s Navigator </tspan>
<tspan x="78" y="335" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">2.0 browser. It has appeared in all </tspan> <tspan x="79" y="335" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">2.0 browser. It has appeared in all </tspan>
<tspan x="78" y="354" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">subsequent browsers from Netscape and </tspan> <tspan x="79" y="354" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">subsequent browsers from Netscape and </tspan>
<tspan x="78" y="373" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">in all browsers from Microsoft starting with </tspan> <tspan x="79" y="373" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">in all browsers from Microsoft starting with </tspan>
</text> </text>
</g> </g>
</g> </g>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Before After
Before After

BIN
figures.sketch
View file

Binary file not shown.