Загрузка...

Стили CSS из JavaScript

На стене мастерской уже висит образец краски. Заголовок — Oak, на плашке написано open. Правило #swatch в таблице стилей ставит color в navy и font-size в 16px. Класса dusk на плашке ещё нет. Его правило — font-style: italic. Менять CSS из JavaScript значит записать встроенный стиль или добавить этот класс. Слово open остаётся на месте.
element.style показывает только встроенные объявления. Поэтому до любой записи swatch.style.color и swatch.style.fontSize — пустые строки. Используемый размер даёт getComputedStyle(swatch).fontSize: 16px.
swatch.style.color = "teal" и swatch.style.fontSize = "22px" сохраняют эти встроенные значения. Запись style.font-size через точку — синтаксическая ошибка. Фон эта страница ставит через setProperty("background-color", "wheat"). После этого и getPropertyValue("background-color"), и style.backgroundColor читают wheat.
classList.add("dusk") только добавляет класс. style.color остаётся teal, style.fontStyle остаётся пустым, а getComputedStyle(swatch).fontStyle становится italic.
Отдельный опыт: cssText = "color: maroon;". Эта строка заменяет всё встроенное объявление. Встроенные размер и фон становятся пустыми, класс dusk остаётся. Демонстрация страницы эту строку не выполняет. Она запоминает teal, затем removeProperty("color") снимает только встроенный цвет. Строка под образцом читается teal / 22px / empty / dusk. Текст плашки по-прежнему open.

Объявление стиля, а не новая фраза на образце

Прошлая страница писала textContent, innerHTML и insertAdjacentHTML и меняла слова на бирке парома. Здесь вы не присваиваете плашке textContent, не разбираете тег и не сравниваете способы найти узел. getElementById только отдаёт образец. Урок — встроенный стиль и токен класса.

Что каждая запись оставляет на плашке

Плашка начинается со слова open. navy и 16px приходят из таблицы стилей, встроенного стиля ещё нет. Читайте строки по порядку. Строка cssText — отдельный опыт. Демонстрация останавливается на removeProperty и это стирание не запускает.

📊 Что каждая запись оставляет на плашке

Запись	Встроенная строка	Всё ещё из листа или класса	Легко перепутать
Пока ничего	`color` и `fontSize` равны `""`	вычисленный `fontSize` — `16px`; используемый цвет navy	читать navy из `style.color`
`style.color = "teal"` и `style.fontSize = "22px"`	teal и `22px`	фон ещё не встроенный	`style.font-size`, оно не разбирается
`setProperty("background-color", "wheat")`	`backgroundColor` равен wheat	цвет всё ещё teal	имя `background-color` вместо camelCase
`classList.add("dusk")`	`fontStyle` остаётся `""`; цвет остаётся teal	вычисленный `fontStyle` — italic	ждать italic внутри `style.fontStyle`
`removeProperty("color")`	`color` снова `""`	`fontSize` остаётся `22px`	думать, что размер вернётся к `16px`
`style.cssText = "color: maroon;"`	цвет maroon; `fontSize` и фон `""`	класс `dusk` остаётся	думать, что `cssText` снимает класс

element.style — только встроенное объявление. Правило таблицы стилей там не появляется, пока скрипт не скопирует его во встроенный стиль. getComputedStyle читает используемое значение после того, как лист, класс и встроенный стиль сложились. Встроенное свойство побеждает лист для того же свойства. classList меняет токен класса. Он не пишет style.color и не пишет style.fontStyle. cssText заменяет весь атрибут style одной строкой. removeProperty удаляет одно встроенное свойство и оставляет остальные.

Прочитайте образец до записи

Файл открывается заголовком Oak, текстом open и листом выше. Присваивания ещё не было. Первые три журнала спрашивают встроенный стиль. Четвёртый спрашивает используемый размер.

Читать образец

javascript

let swatch = document.getElementById("swatch");
console.log(swatch.textContent);
console.log(swatch.style.color);
console.log(swatch.style.fontSize);
console.log(getComputedStyle(swatch).fontSize);

Журналы: open, пустая строка, пустая строка и 16px. Используемый цвет — navy, браузер сообщает его в виде rgb(), не словом navy. style.color всё ещё пуст, значит этот журнал — не navy. Заголовок Oak — другой элемент. Дальнейшие записи слово open не меняют.

camelCase пишет встроенные значения

color и fontSize — свойства объявления стиля. Имя CSS font-size в JavaScript становится fontSize. Точка в style.font-size — это вычитание, файл так не пишет.

camelCase

javascript

let swatch = document.getElementById("swatch");
swatch.style.color = "teal";
swatch.style.fontSize = "22px";
console.log(swatch.style.color);
console.log(swatch.style.fontSize);
console.log(swatch.style.backgroundColor);

Журналы: teal, 22px и пустая строка. Фон ещё не задан. Используемый размер шрифта теперь 22px, потому что встроенное значение побеждает 16px листа. Слово на плашке всё ещё open.

Имя с дефисом идёт через setProperty

setProperty принимает имя свойства CSS вместе с дефисом. getPropertyValue читает то же имя. Свойство backgroundColor читает значение, которое вы только что сохранили.

Имя с дефисом

javascript

let swatch = document.getElementById("swatch");
swatch.style.setProperty("background-color", "wheat");
console.log(swatch.style.getPropertyValue("background-color"));
console.log(swatch.style.backgroundColor);

Оба журнала — wheat. color всё ещё teal, fontSize всё ещё 22px. Этот вызов добавляет одно встроенное свойство. Уже заданные он не стирает.

Класс не заполняет style.fontStyle

.dusk говорит font-style: italic. Добавление класса ставит на элемент токен dusk. Значение italic живёт в правиле таблицы стилей, поэтому встроенная строка fontStyle остаётся пустой. Встроенный цвет всё ещё teal. Класс его не заменил.

Добавить класс

javascript

let swatch = document.getElementById("swatch");
swatch.classList.add("dusk");
console.log(swatch.classList.contains("dusk"));
console.log(swatch.style.color);
console.log(swatch.style.fontStyle);
console.log(getComputedStyle(swatch).fontStyle);

Журналы: true, teal, пустая строка и italic. contains смотрит токен. style.fontStyle смотрит встроенное объявление. getComputedStyle смотрит используемое значение. Это три разных чтения.

cssText заменяет весь встроенный стиль

Этот блок — отдельный опыт. Запускайте его только когда teal, 22px, wheat и dusk уже стоят. Присваивание cssText пишет новый атрибут style и отбрасывает каждое встроенное свойство, которого нет в этой строке. Демонстрация ниже эту строку не содержит.

Заменить встроенный стиль

javascript

let swatch = document.getElementById("swatch");
swatch.style.cssText = "color: maroon;";
console.log(swatch.style.color);
console.log(swatch.style.fontSize);
console.log(swatch.style.backgroundColor);
console.log(swatch.classList.contains("dusk"));

Журналы: maroon, пустая строка, пустая строка и true. Встроенные 22px и wheat исчезли. Класс dusk на месте, потому что cssText меняет атрибут style, а не атрибут class. Текст плашки всё ещё open.

Одна строка под образцом

Скрипт стоит в конце body, когда образец и таблица стилей уже есть. Он ставит teal, 22px и wheat, добавляет dusk, запоминает слово teal и снимает только встроенный цвет. cssText он не присваивает. Пустой встроенный цвет он пишет словом empty, чтобы строка читалась.

Демонстрация страницы — образец краски

html

<!DOCTYPE html>
<html>
<head>
<title>css style — page</title>
<style>
#swatch { color: navy; font-size: 16px; }
.dusk { font-style: italic; }
</style>
</head>
<body>
<article id="wall">
<h2 id="chip">Oak</h2>
<p id="swatch">open</p>
<p id="line">…</p>
</article>
<script>
let swatch = document.getElementById("swatch");
swatch.style.color = "teal";
swatch.style.fontSize = "22px";
swatch.style.setProperty("background-color", "wheat");
swatch.classList.add("dusk");
let saved = swatch.style.color;
swatch.style.removeProperty("color");
let inlineNow = swatch.style.color === "" ? "empty" : swatch.style.color;
let mark = swatch.classList.contains("dusk") ? "dusk" : "no";
document.getElementById("line").textContent = saved + " / " + swatch.style.fontSize + " / " + inlineNow + " / " + mark;
</script>
</body>
</html>

Строка читается teal / 22px / empty / dusk. saved держит teal до removeProperty. После вызова style.color пуст, а style.fontSize всё ещё 22px. Фон всё ещё wheat. Токен класса всё ещё dusk, поэтому используемый font-style — italic. Используемый цвет возвращается к листу, navy, потому что встроенный цвет исчез. Текст плашки всё ещё open. Следующая страница создаёт новые элементы. Другого способа записать эти свойства стиля она не даёт.

Проверьте образец

Запишите в журнал текст, две встроенные строки и вычисленный размер: ждите open, две пустые строки и 16px
Поставьте color в teal и fontSize в 22px, затем ждите teal, 22px и пустой backgroundColor
Поставьте фон через setProperty и ждите wheat из обоих чтений, затем добавьте dusk и ждите true, teal, пустой fontStyle и вычисленный italic
В отдельном опыте присвойте cssText цвет maroon и ждите maroon, пустой fontSize, пустой фон и dusk всё ещё true
Прочитайте строку страницы и ждите teal / 22px / empty / dusk, прочитайте текст плашки и ждите open

Промахи на этом образце

Страница по-прежнему открывается. Присваивание записало значение не того рода.

Читать style.color в начале и ждать navy
Писать swatch.style.font-size: разбор это отвергает
Ждать, что classList.add("dusk") положит italic в style.fontStyle
Ждать, что этот класс уведёт style.color от teal
Присвоить cssText и ждать, что встроенные 22px останутся
Присвоить cssText и ждать, что класс dusk исчезнет
Вызвать removeProperty("color") и ждать, что fontSize вернётся к 16px
Ставить здесь textContent на плашку; прошлая страница меняла слова
Вызывать здесь createElement; следующая страница строит новые узлы

Унесите это с собой

element.style читает встроенные объявления: вначале style.color пуст, а используемый размер — 16px
style.color и style.fontSize хранят teal и 22px
setProperty("background-color", "wheat") совпадает с style.backgroundColor
classList.add("dusk") оставляет style.fontStyle пустым, а используемый стиль — italic
cssText = "color: maroon;" стирает остальные встроенные значения и сохраняет класс
removeProperty("color") снимает только цвет, поэтому строка страницы всё ещё может показать 22px
Строка читается teal / 22px / empty / dusk, текст плашки остаётся open

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓

Вопросы

🎯

70%

Для Прохождения

♾️

∞

Время

🔄

∞

Попытки

📝 Инструкции

Внимательно прочитайте каждый вопрос
Выберите лучший ответ на каждый вопрос
Вы можете пересдавать тест столько раз, сколько захотите
Ваш прогресс будет показан вверху

Стили CSS из JavaScript

Объявление стиля, а не новая фраза на образце

Что каждая запись оставляет на плашке

📊 Что каждая запись оставляет на плашке

Прочитайте образец до записи

Читать образец

camelCase пишет встроенные значения

camelCase

Имя с дефисом идёт через setProperty

Имя с дефисом

Класс не заполняет style.fontStyle

Добавить класс

cssText заменяет весь встроенный стиль

Заменить встроенный стиль

Одна строка под образцом

Демонстрация страницы — образец краски

Проверьте образец

Промахи на этом образце

Унесите это с собой

🧠 Проверьте Свои Знания

Проверьте Свои Знания

📝 Инструкции

🚧 Курс Скоро Появится

Course Name

Получить Уведомление О Доступности

Доступно Сейчас

Coming Soon

Course Name