renovations
This commit is contained in:
Ilya Kantor
parent
dce565963b
commit
5c58f1a62f
1 changed files with 21 additions and 17 deletions
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
Объект `element.style` дает доступ к стилю элемента на чтение и запись.
|
||||
|
||||
С его помощью можно изменять большинство CSS-свойств, например `element.style.width='100px'` работает так, как будто у элемента в атрибуте прописано `style="width:100px"`.
|
||||
С его помощью можно изменять большинство CSS-свойств, например `element.style.width="100px"` работает так, как будто у элемента в атрибуте прописано `style="width:100px"`.
|
||||
|
||||
[warn header="Единицы измерения обязательны в `style`"]
|
||||
Об этом иногда забывают, но в `style` так же, как и в CSS, нужно указывать единицы измерения, например `px`.
|
||||
|
|
@ -34,7 +34,7 @@ document.body.style.backgroundColor = prompt('background color?', 'green');
|
|||
```
|
||||
|
||||
[warn header="`style.cssFloat` вместо `style.float`"]
|
||||
Исключением является свойство `float`. В старом стандарте JavaScript слово `"float"` было зарезервировано и недоступно для использования в качестве свойства объекта. Поэтому используется `element.style.cssFloat`.
|
||||
Исключением является свойство `float`. В старом стандарте JavaScript слово `"float"` было зарезервировано и недоступно для использования в качестве свойства объекта. Поэтому используется не `elem.style.float`, а `elem.style.cssFloat`.
|
||||
[/warn]
|
||||
|
||||
[smart header="Свойства с префиксами"]
|
||||
|
|
@ -45,7 +45,7 @@ button.style.MozBorderRadius = '5px';
|
|||
button.style.WebkitBorderRadius = '5px';
|
||||
```
|
||||
|
||||
То есть, каждый дефис дает большую букву. В этом смысле преобразование -- такое же, как для обычных свойств.
|
||||
То есть, каждый дефис даёт большую букву.
|
||||
[/smart]
|
||||
|
||||
**Чтобы сбросить поставленный стиль, присваивают в `style` пустую строку: `elem.style.width=""`.**
|
||||
|
|
@ -54,7 +54,7 @@ button.style.WebkitBorderRadius = '5px';
|
|||
|
||||
Например, для того, чтобы спрятать элемент, можно присвоить: `elem.style.display = "none"`.
|
||||
|
||||
А вот чтобы показать его обратно -- не обязательно явно указывать другой `elem.style.display = "block"`! Можно просто снять поставленный стиль: `elem.style.display = ""`.
|
||||
А вот чтобы показать его обратно -- не обязательно явно указывать другой `display`, наподобие `elem.style.display = "block"`. Можно просто снять поставленный стиль: `elem.style.display = ""`.
|
||||
|
||||
```js
|
||||
//+ run
|
||||
|
|
@ -93,7 +93,7 @@ setTimeout(function() {
|
|||
[warn header="Свойство `style` мы используем лишь там, где не работают классы"]
|
||||
В большинстве случаев внешний вид элементов задаётся классами. А JavaScript добавляет или удаляет их. Такой код красив и гибок, дизайн можно легко изменять.
|
||||
|
||||
Свойство `style` нужно использовать лишь там, где классы не подходят, например если точное значение цвета/отступа/высоты... Вычисляется в JavaScript.
|
||||
Свойство `style` нужно использовать лишь там, где классы не подходят, например если точное значение цвета/отступа/высоты вычисляется в JavaScript.
|
||||
[/warn]
|
||||
|
||||
|
||||
|
|
@ -127,11 +127,13 @@ setTimeout(function() {
|
|||
</script>
|
||||
```
|
||||
|
||||
Браузер разбирает строку `style.cssText` и применяет известные ему свойства. Нет никаких ограничений на запись несуществующих свойств, но если указать свойство `blabla` -- большинство браузеров его просто проигнорируют.
|
||||
Браузер разбирает строку `style.cssText` и применяет известные ему свойства. Неизвестные, наподобие `blabla`, большинство браузеров его просто проигнорируют.
|
||||
|
||||
**При установке `style.cssText` все существующие свойства `style` перезаписываются.**
|
||||
**При установке `style.cssText` все предыдущие свойства `style` удаляются.**
|
||||
|
||||
Поэтому, по возможности, во избежание конфликта, присваивают более конкретные подсвойства `style`: `style.color`, `style.width` и т.п, а `style.cssText` используют для более короткой записи, когда это заведомо безопасно.
|
||||
Итак, `style.cssText` осуществляет полную перезапись `style`. Если же нужно заменить какое-то конкретно свойство стиля, то обращаются именно к нему: `style.color`, `style.width` и т.п, чтобы не затереть что-то важное по ошибке.
|
||||
|
||||
Свойство `style.cssText` используют, например, для новосозданных элементов, когда старых стилей точно нет.
|
||||
|
||||
## Чтение стиля из style
|
||||
|
||||
|
|
@ -173,17 +175,17 @@ setTimeout(function() {
|
|||
Его синтаксис таков:
|
||||
|
||||
```js
|
||||
getComputedStyle(element, pseudo)
|
||||
getComputedStyle(element[, pseudo])
|
||||
```
|
||||
|
||||
<dl>
|
||||
<dt>element</dt>
|
||||
<dd>Элемент, значения для которого нужно получить</dd>
|
||||
<dt>pseudo</dt>
|
||||
<dd>Указывается, если нужен стиль псевдо-элемента, например `"::before"`. Пустая строка означает сам элемент.</dd>
|
||||
<dd>Указывается, если нужен стиль псевдо-элемента, например `"::before"`. Пустая строка или отсутствие аргумента означают сам элемент.</dd>
|
||||
</dl>
|
||||
|
||||
Поддерживается всеми браузерами, кроме IE<9. Следующий код будет работать во всех не-IE браузерах и в IE9+:
|
||||
Поддерживается всеми браузерами, кроме IE8-. Следующий код будет работать во всех не-IE браузерах и в IE9+:
|
||||
|
||||
```html
|
||||
<!--+ run height=100 -->
|
||||
|
|
@ -193,7 +195,7 @@ getComputedStyle(element, pseudo)
|
|||
<body>
|
||||
|
||||
<script>
|
||||
var computedStyle = getComputedStyle(document.body, '');
|
||||
var computedStyle = getComputedStyle(document.body);
|
||||
alert(computedStyle.marginTop); // выведет отступ в пикселях
|
||||
alert(computedStyle.color); // выведет цвет
|
||||
</script>
|
||||
|
|
@ -207,7 +209,9 @@ getComputedStyle(element, pseudo)
|
|||
<li>*Вычисленное* (computed) значение -- это то, которое получено после применения всех правил CSS и CSS-наследования. Например, `width: auto` или `font-size: 125%`.</li>
|
||||
<li>*Окончательное* ([resolved](http://dev.w3.org/csswg/cssom/#resolved-values)) значение -- непосредственно применяемое к элементу. При этом все размеры приводятся к пикселям, например `width: 212px` или `font-size: 16px`. В некоторых браузерах пиксели могут быть дробными.</li>
|
||||
</ol>
|
||||
Когда-то `getComputedStyle` задумывалось для возврата вычисленного значения, но со временем оказалось, что окончательное гораздо удобнее. Поэтому сейчас в целом все значения возвращаются именно такие, кроме некоторых небольших глюков в браузерах, которые постепенно вычищаются.
|
||||
Когда-то `getComputedStyle` задумывалось для возврата вычисленного значения, но со временем оказалось, что окончательное гораздо удобнее.
|
||||
|
||||
Поэтому сейчас в целом все значения возвращаются именно окончательные, кроме некоторых небольших глюков в браузерах, которые постепенно вычищаются.
|
||||
[/smart]
|
||||
|
||||
[warn header="`getComputedStyle` требует полное свойство!"]
|
||||
|
|
@ -227,7 +231,7 @@ getComputedStyle(element, pseudo)
|
|||
}
|
||||
</style>
|
||||
<script>
|
||||
var style = getComputedStyle(document.body, '');
|
||||
var style = getComputedStyle(document.body);
|
||||
alert( style.margin ); // в Firefox пустая строка
|
||||
</script>
|
||||
```
|
||||
|
|
@ -305,7 +309,7 @@ function getStyle(elem) {
|
|||
if (!elem.getComputedStyle) // старые IE
|
||||
document.write(getIEComputedStyle(elem, 'marginTop'));
|
||||
else
|
||||
document.write('Пример работает только в IE<9');
|
||||
document.write('Пример работает только в IE8-');
|
||||
</script>
|
||||
```
|
||||
|
||||
|
|
@ -318,11 +322,11 @@ function getStyle(elem) {
|
|||
if (!window.getComputedStyle) // старые IE
|
||||
document.write(getIEComputedStyle(elem, 'marginTop'));
|
||||
else
|
||||
document.write('Пример работает только в IE<9');
|
||||
document.write('Пример работает только в IE8-');
|
||||
</script>
|
||||
</i>
|
||||
[/pre]
|
||||
Современные Javascript-фреймворки используют этот прием для эмуляции `getComputedStyle` в старых IE.
|
||||
Современные Javascript-фреймворки и полифиллы используют этот прием для эмуляции `getComputedStyle` в старых IE.
|
||||
[/smart]
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue