Далее на странице...
- Стили из JavaScript - Объект CSSStyleDeclaration console.dir() - Свойство style Свойства объекта style: CSSStyleDeclaration Формат записи CamelCase - backgroundColor Инлайн стили имеют приоритет перед классами
- Свойство cssText - Несколько стилей Несколько стилей средствами JavaScript cssText - Свойства записываются как в CSS - background-color В строку со стилями можно подставлять переменные
- Использование циклов и методов перебора Цикл for - Стиль нескольким элементам Метод forEach - Стиль нескольким элементам Метод forEach существует только для querySelectorAll
В предыдущей статье были рассмотрены методы получения элементов со страницы.
Здесь будут совершаться действия с элементами на странице. В чем это заключается? Первым делом средствами JavaScript научимся изменять стиль элементов страницы.
Для работы будет использоваться тестовая страница. Вот так она выглядит. Это ссылка на архив с исходными файлами.
Стили из JavaScript - Объект CSSStyleDeclaration
Итак, как средствами JavaScript изменить стиль элементов страницы? Ниже представлен HTML-код исходной страницы.
Пример 1.1
HTML-код
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Elements - Udemy</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="box" id="box"></div>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="wrapper">
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
</div>
<script src="js/script.js"></script>
</body>
</html>
Результат в Браузере
Что мы уже имеем? Доступ ко всем элементам html-страницы с помощью различных методов, рассмотренных ранее (см. код ниже).
JavaScript-код
'use strict';
const box = document.getElementById("box"),
btns = document.getElementsByTagName('button'),
circles = document.getElementsByClassName('circle'),
hearts = document.querySelectorAll('.heart'),
oneHearts = document.querySelector('.heart');
Чтобы понимать, что можно сделать с тем или иным элементом страницы, нужно смотреть на него, как на объект. Воспользуемся командой console.dir().
console.dir(box);
Результат в консоли
div#box.box
accessKey: ""
align: ""
ariaAtomic: null
ariaAutoComplete: null
ariaBusy: null
.
.
.
style: CSSStyleDeclaration
alignContent: ""
alignItems: ""
alignSelf: ""
.
.
.
background: ""
backgroundAttachment: ""
backgroundBlendMode: ""
backgroundClip: ""
backgroundColor: ""
.
.
.
textContent: ""
title: ""
translate: true
__proto__: HTMLDivElement
В консоли есть возможность увидеть все свойства и методы, которые применимы к данному объекту (элементу страницы). Сейчас нас интересует свойство style: CSSStyleDeclaration.
CSSStyleDeclaration - это объект, который содержит список из всех свойств стилей для этого элемента.
CSSStyleDeclaration представляет собой объект, являющийся блоком объявления CSS.
В результате мы имеем объект box со встроенным объектом style: CSSStyleDeclaration. Таким образом к box применимы все стили из списка свойств объекта style: CSSStyleDeclaration. Это инлайн стили.
Стоит знать о приоритетности CSS-стилей: инлайн стили имеют приоритет перед стилями, заданными в CSS-файле, т.е. перед классами.
Особое внимание стоит обратить на следующее: стили свойств объекта style: CSSStyleDeclaration имеют формат записи CamelCase. Так работает JavaScript.
В CSS аналогичные свойства записываются через дефис.
Например, свойство backgroundColor в JavaScript и background-сolor в CSS.
CamelCase (с англ. «Верблюжий Регистр», также «Горбатый Регистр», «Стиль Верблюда») — стиль написания составных слов, при котором несколько слов пишутся слитно без пробелов, при этом каждое слово внутри фразы пишется с прописной буквы.
Пример 1.2
Итак, посмотрим, как изменить стиль у определенного элемента страницы из JavaScript, т.е. с помощью стилей объекта style: CSSStyleDeclaration.
JavaScript-код
'use strict';
const box = document.getElementById("box"),
btns = document.getElementsByTagName('button'),
circles = document.getElementsByClassName('circle'),
hearts = document.querySelectorAll('.heart'),
oneHearts = document.querySelector('.heart');
console.dir(box);
box.style.backgroundColor = "green";
box.style.width = "200px";
Результат в Браузере
Произошло изменение фонового цвета и размера одного из элементов страницы.
Результат в консоли
<div class="box" id="box" style="background-color: green; width: 200px;"></div>
Так выглядит код блока div после того, как для него были указаны стили из JavaScript - с помощью свойств объекта style: CSSStyleDeclaration (см. пример выше). И так как это инлайн стили, то они имеют приоритет перед ранее заданным оформлением при помощи класса class="box".
Пример 1.3
Теперь изменим оформление одной из кнопок. Исходный HTML-код смотрим в примере 1.1.
JavaScript-код
'use strict';
const box = document.getElementById("box"),
btns = document.getElementsByTagName('button'),
circles = document.getElementsByClassName('circle'),
hearts = document.querySelectorAll('.heart'),
oneHearts = document.querySelector('.heart');
console.dir(box);
box.style.backgroundColor = "green";
box.style.width = "200px";
/* Стили для 2-ой кнопки */
btns[1].style.borderRadius = "100%";
btns[1].style.backgroundColor = "gray";
Результат в Браузере
Вторая кнопка стала иметь овальную форму и серый цвет.
Свойство cssText - Несколько стилей
Как назначить несколько стилей средствами JavaScript?
Для этого существует свойство cssText.
При этом стилевые свойства записываются так, как это принято в CSS.
Изменим стилевое оформление объекта box, как это было сделано ранее - в примере 1.2. Но сделаем это при помощи свойства cssText.
Пример 2.1
JavaScript-код
'use strict';
const box = document.getElementById("box"),
btns = document.getElementsByTagName('button'),
circles = document.getElementsByClassName('circle'),
hearts = document.querySelectorAll('.heart'),
oneHearts = document.querySelector('.heart');
console.dir(box);
box.style.cssText = 'background-color: brown; width: 350px';
Результат в Браузере
Работая со свойством cssText в строку описания стилей можно подставлять переменные.
При этом используя обратные кавычки: вспоминаем что такое интерполяция в JavaScript или шаблонные литералы.
box.style.cssText = `background-color: brown; width: ${num}px`;
Это удобно, если какие-либо параметры рассчитываются динамически. Например, меняется ширина элемента страницы в зависимости от разрешения экрана.
Использование циклов и методов перебора
В примерах выше мы работали с каким-то одним из элементов страницы.
Как быть если над несколькими элементами нужно произвести одни и те же действия.
Для этого используются циклы или метод перебора for-of или же метод forEach.
Напомним, что метод forEach существует только при использовании метода querySelectorAll.
Пример 3.1 - Цикл for
Используем цикл for для задания одного стиля нескольким элементам страницы.
JavaScript-код
'use strict';
const box = document.getElementById("box"),
btns = document.getElementsByTagName('button'),
circles = document.getElementsByClassName('circle'),
hearts = document.querySelectorAll('.heart'),
oneHearts = document.querySelector('.heart');
for (let i = 0; i < hearts.length; i++) {
hearts[i].style.backgroundColor = "yellow";
}
Результат в Браузере
Циклы в таких случаях используются не часто. Удобнее работать с методом forEach (см. далее).
Пример 3.2 - Метод forEach
Используем метод forEach для задания одного стиля нескольким элементам страницы.
JavaScript-код
'use strict';
const box = document.getElementById("box"),
btns = document.getElementsByTagName('button'),
circles = document.getElementsByClassName('circle'),
hearts = document.querySelectorAll('.heart'),
oneHearts = document.querySelector('.heart');
hearts.forEach(item => {
item.style.backgroundColor = "orange";
});
Результат в Браузере
Итак, здесь было рассмотрено, как средствами JavaScript изменить стилевое оформление одного или нескольких элементов страницы.
На практике в основном работа ведется с классами: об этом в следующей статье, где также речь пойдет об основных методах для работы с элементами страницы.
