Сервис для
сео - оптимизаторов

Найди ошибки на сайте
Ошибки мешают продвижению сайта
Исправь ошибки на сайте
Сайт без ошибок продвигать легче
Получи новых клиентов
Новые клиенты принесут больше прибыль

Настройка стилей 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

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

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

Похожие

Как удалить неиспользуемый CSS из ваших файлов стилей
CSS-файлы вашего сайта могут иметь несколько избыточных правил, которые больше не используются ни одним элементом на веб-страницах. Например, вы могли добавить поиск по сайту на вашем веб-сайте и соответствующие стили вошли в таблицу стилей. Позже, если вы решите удалить это окно поиска, стили могут продолжать существовать в вашем CSS, хотя они нигде не используются. Эти неиспользуемые записи в ваших CSS-файлах
68K мгновенных сообщений
(Последнее обновление 4 августа 2009 г.) Вступление Мгновенный обмен сообщениями действительно тяжело на Mac 68K. Это еще сложнее на эмулированном Mac 68K. В ICQ и AIM есть старые неподдерживаемые клиенты, которые могут работать на реальном Macintosh, но мне не удалось использовать их на моем эмулируемом компьютере под управлением System 7.5.5 ( обновление : пользователь SSS на форуме описал
Сигналы тревоги - Windows 8.1: недостающее руководство [книга]
... обманывайтесь именем. Это приложение, новое в Windows 8.1, позволяет настраивать сигналы тревоги, но оно делает больше - намного больше. Это также таймер и секундомер. В первый раз, когда вы открываете его, Windows спрашивает, хотите ли вы, чтобы он был вашим основным сигналом тревоги; Если вы скажете «Да», то он сможет привлечь ваше внимание, отображая всплывающие уведомления на экране, когда придет время. Если вы много путешествуете, эта функция может оказаться одной
Индуистская книга астрологии: Близнецы
Священные тексты астрология Индекс предыдущий следующий
Мой PayPal был взломан, чтобы купить хитрое золото Diablo III
... сделал потрясающее открытие: мой банковский счет был очищен с помощью несанкционированных транзакций PayPal. Хотя это само по себе было неприятно, это привело к раскрытию преступности, о которой я даже не подозревал - где онлайн-мошенники мошенничают с другими мошенниками, и где виртуальные валюты используются для отмывания денег практически необнаружимым способом.
Станьте Гуру эскиза за 3 простых шага
Вы знаете, что действительно, действительно удобно? Ваша зона комфорта! У всех нас есть один. У каждого из нас есть те четыре или пять приложений, которые мы могли бы почти использовать во сне. Эти сотни часов мышечной памяти, ярлыки и знакомые причуды делают эти приложения похожими на уютное старое кресло. Они также
Способы установки агента Android
Способы установки агента устройства Android MobiControl Device Agent - это программное обеспечение MobiControl, которое устанавливается на мобильные устройства. Агент устройства связывается с серверами развертывания MobiControl и выполняет инструкции, которые он получает от серверов. Агенты устройств также предоставляют отчеты и информацию в режиме реального времени на серверы развертывания. Установка агента Android-устройства из Google Play 1. Установите
Обновление программного обеспечения PS Vita System
... ограммного обеспечения 3.73 PlayStation®Vita была выпущена 16 октября 2019 года. Версия 3.73 добавляет или обновляет следующие функции. Новое за 3.73 Это обновление системного программного обеспечения улучшает производительность системы. Новое для 3.72 Это обновление системного программного обеспечения улучшает производительность системы. Новое для 3.71 Это обновление системного программного обеспечения улучшает
Два инструмента, которые помогут вам прекратить чрезмерное использование слов в ваших документах
Я иду через фазы с моим письмом. Иногда я чувствую, что каждое второе предложение должно начинаться с «но», затем я начинаю использовать «однако», которое становится «тем не менее», и так далее до тех пор, пока дурная привычка не прекратится. В такие времена удобно использовать инструмент частоты слова, чтобы понять, как часто я использую проблемные слова. Вот два способа сделать это. Один легкий, а другой немного продвинутый. Решение для веб-приложений
Учебник: Тестирование пользовательского интерфейса с помощью Jest и Puppeteer
... ссматривать тестирование с Jest и Puppeteer сразу после выхода библиотеки. Кукловод имеет довольно интересный API. В следующем посте я познакомлю вас с базовым тестом пользовательского интерфейса для контактной формы . Мы будем тестировать с Jest и Puppeteer. Даже если он
Как использовать целевые страницы в Google Analytics для поиска ключевых слов
SEO: «Что в имени? То, что мы называем не предусмотрено Под любым другим именем все равно будут скрываться мои ключевые слова. " - не Шекспир SEO почти перестали жаловаться на то, что Google скрывает поисковые ключевые слова. Почти . Поисковые системы по-прежнему используют ключевые слова для поиска на настольном компьютере, в мобильном устройстве, на планшете с помощью клавиатуры, Siri или Cortana. В глубине души мы знаем, что ключевые слова ограничивают,

Комментарии

Помогла ли вам эта статья?
Помогла ли вам эта статья? Тогда поделитесь им сейчас с друзьями и оставьте нам комментарий. Мы хотели бы улучшить наш блог с каждой статьей, и мы рассчитываем на вашу поддержку и конструктивные предложения по улучшению. © Depositphotos.com / dizanna © Depositphotos.com / realinemedia ▼ Источники и научные исследования: [1] Тони Бьюзен, Барри Бьюзен: Книга карт разума. Лучший способ увеличить свой интеллектуальный потенциал. Modern Publishing
Вам понравилась эта статья?
Вам понравилась эта статья? Поделись с другими!
Будете ли вы устанавливать приложение File Manager Gold из Магазина Windows?
Будете ли вы устанавливать приложение File Manager Gold из Магазина Windows? Какую систему управления файлами вы используете? Дайте нам знать ваши мысли в обсуждении ниже. Также см
Что эта информация говорит вам?
Что эта информация говорит вам? Ваша популярная страница на первой странице поисковой выдачи? Достаточно ли высок рейтинг кликов? Справа над целевыми страницами на левой навигационной панели щелкните Запросы. Весьма вероятно, что ваши самые популярные запросы приводили посетителей на ваши главные целевые страницы. Здесь вы можете найти ключевые
Вам действительно нужен Ferrari, когда Toyota будет заставлять вас работать каждый день?
Вам действительно нужен Ferrari, когда Toyota будет заставлять вас работать каждый день? Одна из проблем, с которой столкнутся как Threadripper, так и Core i9, - это на самом деле найти приложения, которые масштабируются до высокого количества ядер. Сегодня вам повезло, если вы можете найти приложение, не говоря уже об игре, которая может впитать 16 потоков 8-ядерного Core i7 или Ryzen 7. Во время тестирования 10-ядерного Core i7 от Intel и 18-ядерного Xeon, мы обнаружили, что многие
Где я могу рассказать другим людям, что мой сайт продает рекламные площади?
Где я могу рассказать другим людям, что мой сайт продает рекламные площади? BuySellAds - самое популярное место AdvertiseSpace - Я не пробовал, но это должна быть хорошая альтернатива. 4) Продайте свой собственный цифровой продукт (например, электронную книгу) Продажа собственного продукта - это здорово, потому что нет комиссии, и никто не примет «участие» - здесь
Как скопировать DVD на мой ноутбук без шпионских программ?
Как скопировать DVD на мой ноутбук без шпионских программ? Как профессиональный DVD-риппер, это программное обеспечение настоятельно рекомендуется Media Worldwide, таким как Softpedia, Cnet, Top10 Reviews и т. Д., За его мощные функции и безопасность. 4. Прост в использовании. Благодаря интуитивно понятному интерфейсу каждый может узнать, как скопировать DVD на ПК, включая DVD-диск и образ ISO, одним щелчком мыши. 5. Он имеет различные форматы видео и аудио и популярные
Зачем ждать загрузки страницы несколько секунд, потому что в это время вы можете взглянуть еще на несколько?
Зачем ждать загрузки страницы несколько секунд, потому что в это время вы можете взглянуть еще на несколько? Оптимальное время загрузки для сайтов составляет 3 секунды и максимум 5 секунд. Скорость загрузки страницы это также важно для SEO деятельности. Как должны выглядеть эффективные сайты для бизнеса?

Книга JavaScript, написанная Кирупой?
Зачем вам устанавливать стили с помощью JavaScript?
Книга JavaScript, написанная Кирупой?
Помогла ли вам эта статья?
Вам понравилась эта статья?
Будете ли вы устанавливать приложение File Manager Gold из Магазина Windows?
Будете ли вы устанавливать приложение File Manager Gold из Магазина Windows?
Какую систему управления файлами вы используете?
Что эта информация говорит вам?
Ваша популярная страница на первой странице поисковой выдачи?