Настройка стилей CSS с помощью JavaScript

1. О, МОЙ БОГ! Книга JavaScript, написанная Кирупой? !!
2. Зачем вам устанавливать стили с помощью JavaScript?
3. Повесть о двух подходах к стилю
4. Установка стиля напрямую
5. Специальный корпус Некоторые имена свойств CSS
6. Добавление и удаление классов с использованием JavaScript
7. Заключение
8. KIRUPA NEWSLETTER

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

.batman {ширина: 100px; высота: 100 пикселей; цвет фона: # 333; }

Элемент, на который будет влиять это правило стиля, может выглядеть так:

<div class = "batman"> </ div>

На любой веб-странице вы увидите от нескольких до многих МНОГО стилевых правил, каждое из которых прекрасно переходит друг в друга, чтобы стилизовать все, что вы видите. Это не единственный подход, который вы можете использовать для стилизации контента с помощью CSS. Это не был бы HTML, если бы не было нескольких способов выполнить одну и ту же задачу!

Игнорирование встроенных стилей, другой подход, который вы можете использовать для ознакомления элементов с совершенством CSS-стилей, включает JavaScript. Вы можете использовать JavaScript, чтобы напрямую установить стиль для элемента , и вы также можете использовать JavaScript, чтобы добавить или удалить значения класса для элементов, которые изменят, какие правила стиля будут применены.

В этом уроке вы познакомитесь с обоими этими подходами.

Onwards!

О, МОЙ БОГ! Книга JavaScript, написанная Кирупой? !!

Чтобы перенести ваши навыки JavaScript в космическое пространство, все, что вы видите здесь и многое другое (со всей его случайной ясностью!), Доступно как в мягкой обложке, так и в цифровых изданиях.

КУПИТЬ НА АМАЗОНЕ

Зачем вам устанавливать стили с помощью JavaScript?

Прежде чем мы пойдем дальше, вероятно, будет полезно объяснить, почему вы вообще захотите использовать JavaScript, чтобы в первую очередь влиять на стиль элемента. В общих случаях, когда вы используете правила стиля или встроенные стили, чтобы повлиять на внешний вид элемента, стили загружаются при загрузке страницы. Это потрясающе, и это, вероятно, то, что вы хотите большую часть времени.

Есть много случаев, особенно когда ваш контент становится более интерактивным, когда вы хотите, чтобы стили динамически включались на основе пользовательского ввода, некоторый код выполнялся в фоновом режиме и многое другое. В таких сценариях модель CSS с правилами стиля или встроенными стилями вам не поможет. Хотя псевдоселекторы типа hover обеспечивают некоторую поддержку, вы по-прежнему сильно ограничены в своих возможностях.

Решение, которое вам нужно будет использовать для всех из них, включает в себя JavaScript. JavaScript не только позволяет стилизовать элемент, с которым вы взаимодействуете, но, что более важно, он позволяет стилизовать элементы по всей странице. Эта свобода очень мощна и выходит далеко за пределы ограниченной способности CSS стилизовать контент внутри (или очень близко) к самому себе.

Повесть о двух подходах к стилю

Как я уже упоминал во введении, у вас есть два способа изменить стиль элемента с помощью JavaScript. Одним из способов является установка свойства CSS непосредственно на элемент. Другой способ - добавление или удаление значений класса из элемента, что может привести к тому, что определенные правила стиля будут применены или проигнорированы. Давайте рассмотрим оба этих случая более подробно.

Установка стиля напрямую

Каждый элемент HTML, к которому вы получаете доступ через JavaScript, имеет объект стиля. Этот объект позволяет вам указать свойство CSS и установить его значение. Например, вот как выглядит установка фона для элемента HTML, значение id которого равно superman :

var myElement = document.querySelector ("# superman"); myElement.style.backgroundColor = "# D93600";

Чтобы повлиять на многие элементы, вы можете сделать следующее:

var myElements = document.querySelectorAll (". bar"); for (var i = 0; i <myElements.length; i ++) {myElements [i] .style.opacity = 0; }

Короче говоря, чтобы стилизовать элементы напрямую с помощью JavaScript, первым шагом является доступ к элементу. Я использую querySelector способ сделать это. Второй шаг - просто найти интересующее вас свойство CSS и присвоить ему значение. Помните, что многие значения в CSS на самом деле являются строками. Также помните, что для многих значений требуется единица измерения, такая как px или em, или что-то в этом роде. Также помните ... на самом деле, я забыл.

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

myElement.style.transform = "translate3d (" + xPos + "," + yPos + "px, 0)";

Это может очень раздражать, так как отслеживание кавычек и т. Д. Является чем-то утомительным и подверженным ошибкам. Одним из менее раздражающих решений является использование строкового литерального синтаксиса:

myElement.style.transform = `translate3d ($ {xPos} px, $ {yPos} px, 0)`;

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

Специальный корпус Некоторые имена свойств CSS

JavaScript очень требователен к тому, что составляет действительное имя свойства. Большинство имен в CSS получили бы одобрение JavaScript, поэтому вы можете просто использовать их прямо из коробки. Есть несколько вещей, которые нужно иметь в виду, хотя.

Чтобы указать свойство CSS в JavaScript, которое содержит тире, просто удалите тире. Например, background-color становится backgroundColor, свойство border-radius преобразуется в borderRadius и так далее.

Кроме того, некоторые слова в JavaScript зарезервированы и не могут быть использованы напрямую. Одним из примеров CSS-свойства, попадающего в эту специальную категорию, является float. В CSS это свойство макета. В JavaScript это означает нечто иное. Чтобы использовать свойство, имя которого полностью зарезервировано, добавьте префикс в свойство css, где float становится cssFloat.

Добавление и удаление классов с использованием JavaScript

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

.disableMenu {display: none; }

В HTML у вас есть меню с идентификатором dropDown :

<ul id = "dropDown"> <li> Один </ li> <li> Два </ li> <li> Три </ li> <li> Четыре </ li> <li> Пять </ li> <li > Шесть </ li> </ ul>

Теперь, если мы хотим применить наше правило стиля .disableMenu к этому элементу, все, что вам нужно сделать, это добавить disableMenu в качестве значения класса для элемента dropDown :

<ul class = "disableMenu" id = "dropDown"> <li> Один </ li> <li> Два </ li> <li> Три </ li> <li> Четыре </ li> <li> Пять < / li> <li> Шесть </ li> </ ul>

Чтобы достичь того же результата с помощью JavaScript, мы будем использовать classList API , Этот API упрощает добавление или удаление значений класса из элемента HTML. Чтобы добавить имя класса disableMenu в наш элемент dropDown , используйте метод add в свойстве classList HTML-элемента:

var theDropDown = document.querySelector ("# dropDown"); theDropDown.classList.add ( "disableMenu");

Чтобы удалить имя класса disableMenu , мы можем вызвать метод remove API classList:

var theDropDown = document.querySelector ("# dropDown"); theDropDown.classList.remove ( "disableMenu");

Это все, что нужно для работы со значениями классов в JavaScript, но это еще не все для API classList. Если вам особенно скучно, с помощью classList API вы можете сделать гораздо больше, чем просто добавлять и удалять значения классов. Чтобы увидеть API classList и все его хобби, описанные более подробно, иди сюда ,

Заключение

Итак, у вас есть это - два совершенно прекрасных подхода на основе JavaScript, которые вы можете использовать для стилизации ваших элементов. Из этих двух вариантов, если у вас есть возможность изменить свой CSS, я бы предпочел, чтобы вы использовали элементы стиля, добавляя и удаляя классы. Простая причина заключается в том, что этот подход гораздо более ремонтопригоден. Гораздо проще добавлять и удалять свойства стиля из правила стиля в CSS, а не добавлять и удалять строки JavaScript.

Также огромное спасибо Крис Уитко он обнаружил несколько довольно вопиющих ошибок в более ранней версии этой статьи, в которой была включена моя функция removeClass - функция, о которой мы больше не будем говорить.

Если у вас есть вопрос по этой или любой другой теме, проще всего наши форумы где куча самых дружелюбных людей, с которыми ты когда-либо встретишься, будет рада помочь тебе!

KIRUPA NEWSLETTER

Получите крутые советы, хитрости, селфи и многое другое ... лично доставленные вручную на ваш почтовый ящик!

( Посмотреть прошлые выпуски за идею о том, что ты упускал все это время! )

Похожие

Комментарии