«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript


Игра на «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих


Далее на странице...



В предыдущей статье были рассмотрены методы получения элементов со страницы.

Здесь будут совершаться действия с элементами на странице. В чем это заключается? Первым делом средствами 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 изменить стилевое оформление одного или нескольких элементов страницы.

На практике в основном работа ведется с классами: об этом в следующей статье, где также речь пойдет об основных методах для работы с элементами страницы.



Читайте также...



Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


Рунет - Часть 3
Помощь сайту
Yandex-деньги/Ю-Money
410011236419322
Перевод на карту СБ
4276 1300 1671 5819
WebMoney
R711879515665 Z861169301432

Тематические публикации
Популярные заметки
Последние заметки