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

images to svg

Browse source
This commit is contained in:
Ilya Kantor 2019-07-28 15:42:37 +03:00
parent a31e881856
commit 3ba28aa104
734 changed files with 11682 additions and 245 deletions
Download patch file Download diff file Expand all files Collapse all files

20
2-ui/1-document/09-size-and-scroll/article.md
View file

@ -28,7 +28,7 @@ It has the border, padding and scrolling. The full set of features. There are no
The element looks like this:
![](metric-css.png)
![](metric-css.svg)
You can [open the document in the sandbox](sandbox:metric).
@ -48,7 +48,7 @@ That's a note to avoid confusion, as `padding-bottom` is set in further examples
Here's the overall picture:
![](metric-all.png)
![](metric-all.svg)
Values of these properties are technically numbers, but these numbers are "of pixels", so these are pixel measurements.
@ -85,7 +85,7 @@ In the example below the inner `<div>` has `<main>` as `offsetParent` and `offse
</script>
```
![](metric-offset-parent.png)
![](metric-offset-parent.svg)
There are several occasions when `offsetParent` is `null`:
@ -100,7 +100,7 @@ Now let's move on to the element itself.
These two properties are the simplest ones. They provide the "outer" width/height of the element. Or, in other words, its full size including borders.
![](metric-offset-width-height.png)
![](metric-offset-width-height.svg)
For our sample element:
@ -136,7 +136,7 @@ In our example:
- `clientLeft = 25` -- left border width
- `clientTop = 25` -- top border width
![](metric-client-left-top.png)
![](metric-client-left-top.svg)
...But to be precise -- these properties are not border width/height, but rather relative coordinates of the inner side from the outer side.
@ -146,7 +146,7 @@ It becomes visible when the document is right-to-left (the operating system is i
In that case, `clientLeft` would be not `25`, but with the scrollbar width `25 + 16 = 41`:
![](metric-client-left-top-rtl.png)
![](metric-client-left-top-rtl.svg)
## clientWidth/Height
@ -154,7 +154,7 @@ These properties provide the size of the area inside the element borders.
They include the content width together with paddings, but without the scrollbar:
![](metric-client-width-height.png)
![](metric-client-width-height.svg)
On the picture above let's first consider `clientHeight`: it's easier to evaluate. There's no horizontal scrollbar, so it's exactly the sum of what's inside the borders: CSS-height `200px` plus top and bottom paddings (`2 * 20px`) total `240px`.
@ -162,7 +162,7 @@ Now `clientWidth` -- here the content width is not `300px`, but `284px`, because
**If there are no paddings, then `clientWidth/Height` is exactly the content area, inside the borders and the scrollbar (if any).**
![](metric-client-width-nopadding.png)
![](metric-client-width-nopadding.svg)
So when there's no padding we can use `clientWidth/clientHeight` to get the content area size.
@ -171,7 +171,7 @@ So when there's no padding we can use `clientWidth/clientHeight` to get the cont
- Properties `clientWidth/clientHeight` only account for the visible part of the element.
- Properties `scrollWidth/scrollHeight` also include the scrolled out (hidden) parts:
![](metric-scroll-width-height.png)
![](metric-scroll-width-height.svg)
On the picture above:
@ -201,7 +201,7 @@ Properties `scrollLeft/scrollTop` are the width/height of the hidden, scrolled o
On the picture below we can see `scrollHeight` and `scrollTop` for a block with a vertical scroll.
![](metric-scroll-top.png)
![](metric-scroll-top.svg)
In other words, `scrollTop` is "how much is scrolled up".