final move to png
This commit is contained in:
Ilya Kantor
parent
0ed8583dc2
commit
90855e8899
43 changed files with 101 additions and 101 deletions
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
На рисунке ниже схематически отображена структура, которая получается если посмотреть на совокупность браузерных объектов с "высоты птичьего полёта".
|
||||
|
||||
<img src="windowObjects.svg">
|
||||
<img src="windowObjects.png">
|
||||
|
||||
Как видно из рисунка, на вершине стоит `window`.
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'p
|
|||
Код выше стабильно работать не будет, потому что `IMG` идет без ширины/высоты:
|
||||
|
||||
```html
|
||||
<img src="ball.svg" id="ball">
|
||||
<img src="ball.png" id="ball">
|
||||
```
|
||||
|
||||
**Высота и ширина изображения неизвестны браузеру до тех пор, пока оно не загрузится, если размер не указан явно.**
|
||||
|
|
@ -43,7 +43,7 @@ ball.style.top = Math.round(field.clientHeight / 2 - ball.offsetHeight / 2) + 'p
|
|||
Чтобы это исправить, добавим `width/height` к картинке:
|
||||
|
||||
```html
|
||||
<img src="ball.svg" *!*width="40" height="40"*/!* id="ball">
|
||||
<img src="ball.png" *!*width="40" height="40"*/!* id="ball">
|
||||
```
|
||||
|
||||
Теперь браузер всегда знает ширину и высоту, так что все работает. Тот же эффект дало бы указание размеров в CSS.
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
|
||||
Результат выглядит так:
|
||||
|
||||
<img src="metric-css.svg">
|
||||
<img src="metric-css.png">
|
||||
|
||||
Вы можете открыть [edit src="metric"]этот документ в песочнице[/edit].
|
||||
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
Вот общая картина:
|
||||
|
||||
|
||||
<img src="metric-all.svg">
|
||||
<img src="metric-all.png">
|
||||
|
||||
На картинке все они с трудом помещаются, но, как мы увидим далее, их значения просты и понятны.
|
||||
|
||||
|
|
@ -100,7 +100,7 @@
|
|||
</main>
|
||||
```
|
||||
|
||||
<img src="metric-offset-parent.svg">
|
||||
<img src="metric-offset-parent.png">
|
||||
|
||||
## offsetWidth/Height
|
||||
|
||||
|
|
@ -108,7 +108,7 @@
|
|||
|
||||
Эти два свойства -- самые простые. Они содержат "внешнюю" ширину/высоту элемента, то есть его полный размер, включая рамки `border`.
|
||||
|
||||
<img src="metric-offset-width-height.svg">
|
||||
<img src="metric-offset-width-height.png">
|
||||
|
||||
Для нашего элемента:
|
||||
<ul>
|
||||
|
|
@ -153,7 +153,7 @@ function isHidden(elem) {
|
|||
<li>`clientTop = 25` -- ширина верхней рамки</li>
|
||||
</ul>
|
||||
|
||||
<img src="metric-client-left-top.svg">
|
||||
<img src="metric-client-left-top.png">
|
||||
|
||||
...Но на самом деле они -- вовсе не рамки, а отступ внутренней части элемента от внешней.
|
||||
|
||||
|
|
@ -163,7 +163,7 @@ function isHidden(elem) {
|
|||
|
||||
Получится так:
|
||||
|
||||
<img src="metric-client-left-top-rtl.svg">
|
||||
<img src="metric-client-left-top-rtl.png">
|
||||
|
||||
|
||||
## clientWidth/Height
|
||||
|
|
@ -172,7 +172,7 @@ function isHidden(elem) {
|
|||
|
||||
Они включают в себя ширину содержимого `width` вместе с полями `padding`, но без прокрутки.
|
||||
|
||||
<img src="metric-client-width-height.svg">
|
||||
<img src="metric-client-width-height.png">
|
||||
|
||||
На рисунке выше посмотрим вначале на `clientHeight`, её посчитать проще всего. Прокрутки нет, так что это в точности то, что внутри рамок: CSS-ширина `200px` плюс верхнее и нижнее поля `padding` (по `20px`), итого `240px`.
|
||||
|
||||
|
|
@ -184,7 +184,7 @@ function isHidden(elem) {
|
|||
|
||||
**Если `padding` нет, то `clientWidth/Height` в точности равны размеру области содержимого, внутри рамок и полосы прокрутки.**
|
||||
|
||||
<img src="metric-client-width-nopadding.svg">
|
||||
<img src="metric-client-width-nopadding.png">
|
||||
|
||||
Поэтому в тех случаях, когда мы точно знаем, что `padding` нет, их используют для определения внутренних размеров элемента.
|
||||
|
||||
|
|
@ -194,7 +194,7 @@ function isHidden(elem) {
|
|||
|
||||
Свойства `clientWidth/clientHeight` относятся только к видимой области элемента, а `scrollWidth/scrollHeight` добавляют к ней прокрученную (которую не видно) по горизонтали/вертикали.
|
||||
|
||||
<img src="metric-scroll-width-height.svg">
|
||||
<img src="metric-scroll-width-height.png">
|
||||
|
||||
На рисунке выше:
|
||||
<ul>
|
||||
|
|
@ -224,7 +224,7 @@ element.style.height = element.scrollHeight + 'px';
|
|||
|
||||
Следующее иллюстрация показывает значения `scrollHeight` и `scrollTop` для блока с вертикальной прокруткой.
|
||||
|
||||
<img src="metric-scroll-top.svg">
|
||||
<img src="metric-scroll-top.png">
|
||||
|
||||
[smart header="`scrollLeft/scrollTop` можно изменять"]
|
||||
В отличие от большинства свойств, которые доступны только для чтения, значения `scrollLeft/scrollTop` можно изменить, и браузер выполнит прокрутку элемента.
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
Свойства `clientWidth/Height` для элемента `document.documentElement` -- это как раз ширина/высота видимой области окна.
|
||||
|
||||
<img src="document-client-width-height.svg">
|
||||
<img src="document-client-width-height.png">
|
||||
|
||||
[online]
|
||||
Например, кнопка ниже выведет размер такой области для этой страницы:
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
|
||||
Например:
|
||||
|
||||
<img src="coords.svg">
|
||||
<img src="coords.png">
|
||||
|
||||
**Координаты относительно окна не учитывают прокрутку, они высчитываются от границ текущей видимой области.**
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ DOM позволяет делать что угодно с HTML-элементо
|
|||
|
||||
Так выглядят основные ссылки, по которым можно переходить между узлами DOM:
|
||||
|
||||
<img src="dom-links.svg">
|
||||
<img src="dom-links.png">
|
||||
|
||||
Посмотрим на них повнимательнее.
|
||||
|
||||
|
|
@ -219,7 +219,7 @@ for (var key in elems) {
|
|||
|
||||
Поэтому посмотрим на дополнительный набор ссылок, которые их не учитывают:
|
||||
|
||||
<img src="dom-links-elements.svg">
|
||||
<img src="dom-links-elements.png">
|
||||
|
||||
Эти ссылки похожи на те, что раньше, только в ряде мест стоит слово `Element`:
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
Нужно расположить его внутри `<div>` фиксированного размера, так чтобы в один момент была видна только нужная часть списка:
|
||||
|
||||
<img src="carousel1.svg">
|
||||
<img src="carousel1.png">
|
||||
|
||||
Чтобы список был длинный и элементы не переходили вниз, ему ставится `width: 9999px`, а элементам `<li>`, соответственно, `float:left`, либо для элементов используется `display: inline-block`, как в этом решении.
|
||||
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
Для "прокрутки" будем сдвигать `<ul>`. Это можно делать по-разному, например, назначением CSS-свойства `transform: translateX()` или `margin-left`:
|
||||
|
||||
<img src="carousel2.svg">
|
||||
<img src="carousel2.png">
|
||||
|
||||
У внешнего `<div>` фиксированная ширина, поэтому "лишние" изображения обрезаются.
|
||||
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
|
||||
Всплытие гарантирует, что клик по внутреннему `<p>` вызовет обработчик `onclick` (если есть) сначала на самом `<p>`, затем на элементе `<div>` далее на элементе `<form>`, и так далее вверх по цепочке родителей до самого `document`.
|
||||
|
||||
<img src="event-order-bubbling.svg" alt="Порядок всплытия событий">
|
||||
<img src="event-order-bubbling.png" alt="Порядок всплытия событий">
|
||||
|
||||
Поэтому если в примере выше кликнуть на `P`, то последовательно выведутся `alert`: `p` -> `div` -> `form`.
|
||||
|
||||
|
|
@ -132,7 +132,7 @@
|
|||
|
||||
В [стандарте DOM Events 3](http://www.w3.org/TR/DOM-Level-3-Events/) это продемонстрировано так:
|
||||
|
||||
<img src="eventflow.svg">
|
||||
<img src="eventflow.png">
|
||||
|
||||
То есть, при клике на `TD` событие путешествует по цепочке родителей сначала вниз к элементу ("погружается"), а потом наверх ("всплывает"), по пути задействуя обработчики.
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
|
|
@ -79,7 +79,7 @@ function highlight(node) {
|
|||
|
||||
Естественно, клик может произойти внутри `<td>`, на элементе `<strong>`. Такой клик будет пойман единым обработчиком, но `target` у него будет не `<td>`, а `<strong>`:
|
||||
|
||||
<img src="bagua-bubble.svg">
|
||||
<img src="bagua-bubble.png">
|
||||
|
||||
Внутри обработчика `table.onclick` мы должны по `event.target` разобраться, в каком именно `<td>` был клик.
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
Событие `mouseover` происходит, когда мышь появляется над элементом, а `mouseout` -- когда уходит из него.
|
||||
|
||||
<img src="mouseover-mouseout.svg">
|
||||
<img src="mouseover-mouseout.png">
|
||||
|
||||
При этом мы можем узнать, с какого элемента пришла (или на какой ушла) мышь, используя дополнительное свойство объекта события `relatedTarget`.
|
||||
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
|
||||
Это означает, что если посетитель двигает мышью быстро, то DOM-элементы, через которые мышь проходит на большой скорости, могут быть пропущены.
|
||||
|
||||
<img src="mouseover-mouseout-over-elems.svg">
|
||||
<img src="mouseover-mouseout-over-elems.png">
|
||||
|
||||
При быстром движении с элемента `#FROM` до элемента `#TO`, как изображено на картинке выше -- промежуточные `<DIV>` будут пропущены. Сработает только событие `mouseout` на `#FROM` и `mouseover` на `#TO`.
|
||||
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
|
||||
В частности, возможна ситуация, когда курсор прыгает в середину страницы, и при этом `relatedTarget=null`, то есть он пришёл "ниоткуда" (на самом деле извне окна):
|
||||
|
||||
<img src="mouseover-mouseout-from-outside.svg">
|
||||
<img src="mouseover-mouseout-from-outside.png">
|
||||
|
||||
Обратим внимание ещё на такую деталь. При быстром движении курсор окажется над `#TO` сразу, даже если этот элемент глубоко в DOM. Его родители при движении сквозь них события не поймают.
|
||||
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
|
||||
**При переходе на потомка срабатывает `mouseout` на родителе.**
|
||||
|
||||
<img src="mouseover-to-child.svg">
|
||||
<img src="mouseover-to-child.png">
|
||||
|
||||
Это кажется странным, но легко объяснимо.
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue