Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 34 из 114 · 9 мин
classList add/remove/toggle/contains, style, getAttribute, setAttribute, dataset и hidden.
Ластики закончились — пусть товар станет серым.
Стили пишем в CSS, а из JavaScript только включаем и выключаем классы. Так всё остаётся в своих местах.
classListadd, remove, toggle (вкл/выкл), contains (есть ли).const li = document.querySelector("li");
li.classList.add("sold");
console.log(li.classList.contains("sold"));.styleel.style.color = "red" — стиль прямо в элемент. Имена через camelCase: backgroundColor.document.querySelector(".bar").style.width = "70%";getAttribute() · setAttribute()const a = document.querySelector("a");
a.setAttribute("href", "#menu");
console.log(a.getAttribute("href"));datasetdata-price="220" читается как el.dataset.price (строка).const li = document.querySelector("li");
console.log(Number(li.dataset.price) + 30);.hiddenel.hidden = true — элемент скрыт (атрибут hidden).document.querySelector("#promo").hidden = true;
console.log("Скрыт");Вид — в CSS-классах. JavaScript только переключает классы.
Добавь класс sold пункту с текстом «Ластик», а в total посчитай сумму data-price всех .item, которые не .sold.
sold — пока нетdataset — пока нетclassList — пока нетВыберите один ответ.
Что делает el.classList.toggle("open")?
Выберите один ответ.
Как прочитать атрибут data-size="L"?
Проверяем состояние обучения…