Как работать со стилями в Javascript

Пост опубликован 12 января 2023 в 10:34 и находится в рубриках Js. 72

Javascript не только предназначен для создания функциональности на странице. Благодаря наличию Documnt Object Model (DOM) и Browser Object Model (BOM), язык может взаимодействовать с разметкой, стилями и браузером. DOM является древовидной структурой, основой которой является объект Window.

Элементы HTML разметки представляются в DOM как набор объектов в определенной иерархии. Каждый HTML элемент представлен в виде объекта со своими свойствами и методами. Поэтому, посредством JS, можно обращаться к элементам разметки и манипулировать с их свойствами.

Свойства HTML элементов выражены в CSS стилях. Однако JS не может изменять стили, заключенные в теге <style>, а также во внешних файлах CSS. Когда посредством JS изменяется или добавляется новое свойство CSS для элемента, то интерпретатор формирует его как атрибут «style». Это можно наглядно увидеть в инструментах разработчика Chrome или в Firebug браузера Firefox.

Иерархия DOM

Объекты в иерархии DOM распределены в следующей последовательности:

Window;
Document;
Element;

Теперь подробнее о каждом из них:

Window. Это главный объект всего браузера. Он содержит свойства-объекты управления окном и элементами разметки. Одним из его свойств-объектов управления экраном браузера является Document, который содержит в себе свойство-объект Element.
Document. Управляет всеми элементами разметки он содержит в себе необходимый набор свойств для обращения к элементам HTML, а также свойства для управления окном.
Element. Содержит свойства и методы, которые позволяют манипулировать элементами и стилями.

Поиск нужного элемента

Прежде чем присвоить элементу какой-либо стиль, нужно сначала обратиться к объекту этого элемента, через объект Document. Выглядит это следующим образом: Document.Element(метод обращения к элементу).style.property = value

Подробнее об этой конструкции:

Document — обращаемся к объекту страницы;
Element — полученный HTML-элемент в ходе вызова одного из методов Document.
style — объект, содержащий свойства CSS объекта Element.
property — CSS свойство, а также свойство объекта style.
value — значение CSS свойства, которое может быть как числовым, так и строковым.

Аналогичным способом мы можем прочитать значение любого CSS свойства. Однако это возможно только в том случае, если у элемента стоит атрибут style. Рассмотрим на примере обращение к элементу посредством метода «getElementById(name)»

Пример:

<p id = «paragraph» class = «parag1»>Параграф<\p>

var p = document.getElementById(«paragraph»); // сохранили в переменную элемент с id = paragraph.
p.style.fontSize = «3em»; // изменим стиль параграфа, увеличив его шрифт до 3em

Если открыть инструменты разработчика в браузере, параграф будет с атрибутом style: <p id = «paragraph» class = «parag1» style = «font-size: 3em»>Параграф<\p>

Методы поиска элемента

Есть несколько методов объекта document для поиска определенного элемента по классу, по айди или имени тега:

getElementById(id) — поиск элемента по id, возвращается один элемент с соответствующим айди;
getElementsByClassName(class) — возвращает список элементов под указанным классом, обращение к любому из них осуществляется по индексу [index];
getElementsByTagName(tag) — метод аналогичен предыдущему, только поиск осуществляется по имени тега;
getElementsByName(name) — возвращает список элементов с указанным именем в атрибуте;
querySelector(selector) — возвращает первый элемент с указанным в параметре селектором из тега style или внешнего файла CSS;
querySelectorAll(selector) — метод аналогичен предыдущему, но возвращает не один элемент, а их список;
body — обращение к тегу body;
forms — обращение к формам, сохраняется список имеющихся форм, к отдельной можно обратиться по индексу;
images — возвращает все имеющиеся изображения на страницы в теге img, обращение к отдельному осуществляется по индексу.

Пример:

<p id = «paragraph» class = «parag1»>Параграф<\p>
<form>
<input type = «text»>
<input type = «submit»>
</form>
<img src = «cat.jpg»>

// Получаем объекты этих элементов
var p = document.getElementById(«paragraph»); // получаем параграф по айди
var f = document.forms; // получили список форм, состоящий из одной
var i = document.images; // получение всех изображений

//Добавим полученным элементам стили
p.style.backgroundColor = «red»;
f.style.borderRadius = «20px»;
i.style.float = «left»;
i.style.margin = «50px»;

Отличия имен свойств в CSS и JavaScript

В CSS имена свойств пишутся через дефис, к примеру: font-size, background-image, border-width и другие. Сейчас рассматриваются именно те свойства, которые пишутся через дефис. В JavaScript свойства пишутся слитно, но с большой буквы: fontSize, backgroundImage, borderWidth. Данное правило не относится к свойствам CSS, состоящим из одного слова: width, position, margun и другие указываются в JavaScript с тем-же синтаксисом.

Как изменить свойства элемента через тег style или внешний файл

Представим, что у нас есть внешний CSS файл со свойствами для тегов определенного класса:

.paragraph{
font-size: 20px;
background-color: yellow;
border: 1px solid black;
}

Теперь в том-же файле определим стиль, для несуществующего элемента:

.chageParagraph{
font-size: 3em;
}

В HTML у нас есть элемент для которого были написаны эти стили:

<p class = «paragraph»>Параграф<\p>

Чтобы определить параграфу стили из внешнего файла, нужно сменить имя его класса. Мы определили стили для несуществующего класса. Его мы и поставим нашему параграфу:

var p = document.getElementById(«paragraph»); // Сохранили объект параграфа в переменную
p.class = «changeParagraph»; // Замена имени класса параграфа

Теперь наш параграф получил новый класс «chageParagraph». Как видно для данного класса определены лишь стили по увеличению размера шрифта. Соответственно, фоновый цвет стал по умолчанию, и рамка исчезла. Вернуть обратно прежний стиль можно прежним образом, через установку старого имени класса. Такой подход часто применяют в событиях при добавлении интерактивности странице.

Свойства и методы которые позволяют изменять классы и id элементов

Рассмотрим несколько полезных свойств и методов, которые удобно применять для значения атрибутов class и id:

id = value — сменяет значение id;
className = value — возвращает или устанавливает новое имя атрибута class;
class = value — аналогично предыдущему;
setAttribute(name, value) — метод позволяет установить класс или айди элементу, а также сменить значение имеющегося;

Другие примеры установки различных стилей

Рассмотрим несколько примеров для установки стилей для различных элементов через JavaScript:

object.style.animation = «name duration timingFunction delay iterationCount direction fillMode playState» создание анимации для объекта.
object.style.background = «color image repeat attachment position size origin clip» — установка свойств для фона.
object.style.border = «width style color» — установка стилей для границ элемента.
object.style.columns = «auto|column-width column-count» — установка свойств для колонок.
object.style.font = «font-style font-variant font-weight font-size/line-height — короткий способ установки нужных свойств для шрифта.
object.style.opacity — добавление элементу прозрачности.
object.style.outline = «width style color» — установка внешней границы для элемента.

Объект classList

ClassList хранит объект всех классов определенных элементов. Он обладает своими методами и свойствами для манипуляций с классами. Рассмотрим несколько примеров:

document.getElementById(«myDIV»).classList — получение объекта classList, который является списком классов с айди myDiv.
document.getElementById(«myDIV»).classList.add(«mystyle», «anotherClass», «thirdClass») — здесь определенному элементу было установлено три класса с именами, указанными в параметрах.
document.getElementById(«myDIV»).classList.remove(«mystyle») — здесь элементу удалили класс с именем, указанным в параметре метода remove.
document.getElementById(«myDIV»).classList.remove(«mystyle», «anotherClass», «thirdClass») — аналогично предыдущему примеру, однако здесь удаляется сразу несколько классов.
document.getElementById(«myDIV»).classList.length — получение длины списка классов.
document.getElementById(«myDIV»).classList.item(0) — получения первого элемента с классом из списка.
document.getElementById(«myDIV»).classList.contains(«mystyle») — проверяем, есть ли такой класс.
document.getElementById(«myDropdown»).classList.toggle(«show») — установка атрибута класса и его значения.

Другие примеры

Пример 1: Добавление надписи посредством нажатия на кнопку

<p id=»demo»>Click the button to change the text in this paragraph.</p>

<button onclick=»myFunction()»>Try it</button>

<script>
function myFunction() {
document.getElementById(«demo»).innerHTML = «Hello World»;
}
</script>

Пример 2: Смена цвета текста параграфа

<p id=»demo»>Click the button to change the color of this paragraph.</p>

<button onclick=»myFunction()»>Try it</button>

<script>
function myFunction() {
var x = document.getElementById(«demo»);
x.style.color = «red»;
}
</script>

Пример 3: Смена фонового цвета среднего параграфа

<div class=»example»>
<p>P element in first div with class=»example». Div’s index is 0.</p>
</div>

<div class=»example color»>
<p>P element in first div with class=»example color». Div’s index is 0.</p>
</div>

<div class=»example color»>
<p>P element in second div with class=»example color». Div’s index is 1.</p>
</div>

<p>Click the button to change the background color of the first div element with the classes «example» and «color».</p>

<button onclick=»myFunction()»>Try it</button>

<script>
function myFunction() {
var x = document.getElementsByClassName(«example color»);
x[0].style.backgroundColor = «red»;
}
</script>

Пример 4: Смена фона для всех элементов списка

<p>This is a p element</p>

<p>This is also a p element.</p>

<p>This is also a p element — Click the button to change the background color of all p elements in this document.</p>

<button onclick=»myFunction()»>Try it</button>

<script>
function myFunction() {
var x = document.getElementsByTagName(«P»);
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = «red»;
}
}
</script>

Пример 5: Получение всех параметров документа

<p>An unordered list:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<p>Click the button to display the innerHTML of the UL element (index 3).</p>

<button onclick=»myFunction()»>Try it</button>

<p id=»demo»></p>

<script>
function myFunction() {
var x = document.getElementsByTagName(«*»);
document.getElementById(«demo»).innerHTML = x[3].innerHTML;
}
</script>

Обратите внимание, здесь все элементы помещены в список через параметр «*». Обращение к любому из них также осуществляется через индекс.

Итого

Современный JavaScript не является удобным инструментом для манипуляций со стилями. доя этого есть ряд других инструментов, к примеру JQuery. Однако каждый разработчик должен знать как управлять стилями нативным языком.

Как работать со стилями в Javascript

Иерархия DOM

Поиск нужного элемента

Методы поиска элемента

Отличия имен свойств в CSS и JavaScript

Как изменить свойства элемента через тег style или внешний файл

Свойства и методы которые позволяют изменять классы и id элементов

Другие примеры установки различных стилей

Объект classList

Другие примеры

Итого

Похожие записи:

Новые посты:

Новый более удобный синтаксис медиа запросов css @media

Что лучше Pinia или Vuex ?

Как скрыть кусок кода от пользователя

Категории:

Топ посты: