2020-06-08
74
Свойство style является специальным объектом, ему нельзя присваивать строку.
Запись div.style="color:blue" работать не будет. Но как же, всё-таки, поставить свойство стиля, если хочется задать его строкой?
Можно попробовать использовать атрибут: elem.setAttribute("style",...), но самым правильным и, главное, кросс-браузерным решением такой задачи будет использование свойства style.cssText.
Свойство style.cssText позволяет поставить стиль целиком в виде строки, например:
<div>Button</div>
<script>
var div = document.body.children[0];
div.style.cssText="color: red!important; \
width: 100px; \
blabla: 5; \ ";
alert(div.style.cssText);
</script>
Браузер разбирает строку style.cssText и применяет известные ему свойства. Неизвестные, наподобие blabla, большинство браузеров просто проигнорируют.
Важно!
При установке style.cssText все предыдущие свойства style удаляются.
Свойство style.cssText чаще используют, для новосозданных элементов, когда старых стилей точно нет.
Запоминаем!
style.cssText осуществляет полную перезапись style. Если же нужно заменить какое-то конкретно свойство стиля, то обращаются именно к нему: style.color, style.width и т.п, чтобы не затереть что-то важное по ошибке.
|
|
|
Полный стиль из getComputedStyle
Итак, свойство style дает доступ только к той информации, которая хранится в elem.style. Он не скажет ничего об отступе, если он появился в результате наложения CSS или встроенных стилей браузера.
А если мы хотим, например, сделать анимацию и плавно увеличивать marginTop от текущего значения? Как нам сделать это? Ведь для начала нам надо это текущее значение получить.
Для того, чтобы получить текущее используемое значение свойства, используется метод window.getComputedStyle, описанный в стандарте DOM Level 2.
Его синтаксис таков:
getComputedStyle(element[, pseudo])
element — Элемент, значения для которого нужно получить.
pseudo — Указывается, если нужен стиль псевдо-элемента, например "::before". Пустая строка или отсутствие аргумента означают сам элемент.
<style>
body { margin: 10px }
</style>
<body>
<script>
var computedStyle = getComputedStyle(document.body);
alert(computedStyle.marginTop); // выведет отступ в пикселях
</script>
</body>
Вычисленное (computed) и окончательное (resolved) значения
В CSS есть две концепции:
1. Вычисленное (computed) значение – это то, которое получено после применения всех правил CSS и CSS-наследования. Например, width: auto или font-size: 125%.
2. Окончательное (resolved) значение – непосредственно применяемое к элементу. При этом все размеры приводятся к пикселям, например width: 212px или font-size: 16px.
Когда-то getComputedStyle задумывалось для возврата вычисленного значения, но со временем оказалось, что окончательное гораздо удобнее. Поэтому сейчас в целом все значения возвращаются именно окончательные, кроме некоторых небольших глюков в браузерах, которые вычищаются.
Важно!
getComputedStyle требует полное свойство! Для правильного получения значения нужно указать точное свойство. Например: paddingLeft, marginTop, borderLeftWidth.
При обращении к сокращенному: padding, margin, border – правильный результат не гарантируется.
