Как изменить CSS-стили при помощи JavaScript
Подпишись на наш канал с тестами по HTML/CSS/JS в Telegram!
Как изменить CSS-стили? Ответ очевиден — отредактировать CSS-файл. Возможно, после этого понадобится компиляция. Затем нужно обновить стили во время выполнения, изменив атрибуты элемента, такие как class и aria-* .
Хотя этот ответ неполный, подумайте над следующими вопросами:
- Как обновить стили во время выполнения, основываясь на взаимодействии с пользователем, а не на предустановленных значениях? Сгенерировать уникальные имена классов для каждой возможной комбинации цветов нереально.
- Что, если у вас нет доступа к таблицам стилей или HTML? Например, если сайт сгенерирован конструктором сайтов со сторонними CSS-файлами, изобилующими свойствами !important.
В этой статье мы рассмотрим четыре способа обновить CSS-стили при помощи JavaScript. Также мы кратко разберем, в каких случаях эти способы стоит применять. Наконец, мы оценим их с точки зрения CSS-сложности, т. е. того, насколько просто понять и изменить код в каждом случае.
Используйте встроенные стили
До изобретения CSS для стилизации веб-страниц использовались теперь уже устаревшие HTML-атрибуты, такие как color , background и border . Встроенный CSS — духовный преемник этих атрибутов. При таком подходе свойства CSS задаются через атрибут style элемента.
Два следующих способа изменить размер шрифта для элемента hero равнозначны:
document.getElementById('hero').style = 'font-size: 12rem;'; document.getElementById('hero').style.fontSize = '12rem';
Использование JavaScript для обновления встроенного CSS в целом считается плохой практикой. Причин для этого несколько:
- Нарушается разделение между стилями и контентом, из-за чего становится сложнее читать и изменять документ.
- При таком подходе CSS-селекторы не могут формировать семантические абстракции.
- Без селекторов обновление нескольких элементов на странице потребует прохода по всем элементам, а это отнимает время. К тому же, таким образом можно допустить ошибки.
- Повторяющиеся стили раздувают ваш HTML.
- У вас не будет доступа к псевдоэлементам и псевдоклассам, они доступны только через CSS-селекторы.
В настоящее время мы наблюдаем возрождение встроенного CSS-lite через атомарные CSS-фреймворки, такие как Tailwind CSS. Атомарные фреймворки используют имена классов CSS, которые переводятся в одно CSS-свойство и основываются на генерации компонентов для повторного использования стилей при помощи JS. Это позволяет избавиться от проблем 3, 4 и 5 из приведенного выше списка. Но проблему раздувания HTML это все равно не решает.
Хотя встроенные CSS-стили в целом вредны, их применение имеет одно преимущество. Чтобы внести изменение, вам не нужно иметь доступ к таблицам стилей. Поэтому с их помощью вполне можно вносить некоторые правки по ходу работы.
Когда стоит применять встроенный CSS
- Для обновления стилей отдельного элемента во время выполнения.
- Для быстрой проверки чего-либо.
- Когда таблицы стилей недоступны.
Используйте HTML-атрибуты
Можно изменять и другие атрибуты элементов, не только style . Это самый популярный способ, он позволяет создавать переиспользуемые и семантически значимые стили. Вот несколько примеров:
// toggles HTML semantic state document.getElementById('cta').disabled = true; // a aria based semantic button state document.getElementById('cta').ariaExpanded = "true"; // a class based semantic primary variation document.getElementById('cta').classList.toggle('primary');
Тут особо нечего добавить. Вероятно, вы и так пользуетесь этим методом. Такой код и понять просто, и изменить легко. К тому же, в нашем распоряжении множество CSS-методологий для контроля над его сложностью.
Но я хочу отметить, что примеры в приведенном выше коде расположены в порядке их значимости. Прежде чем прибегнуть к состояниям на основе классов, стоит обратиться к состояниям на основе атрибутов HTML. Теперь, когда селектор :has() уже на горизонте, это стало проще.
Когда стоит модифицировать атрибуты помимо style
Всегда, когда у вас есть доступ к таблицам стилей и предопределенные стили.
Используйте CSSOM
Следующий метод изменения CSS посредством JavaScript можно сравнить со скальпелем в наборе инструментов фронтендера. Мы можем напрямую изменять объекты CSS.
Два предыдущих метода для изменения стилей модифицируют HTML DOM. Но в некоторых случаях проще изменить напрямую CSS Object Model (CSSOM).
Обратившись к объекту styleSheets документа, мы можем избирательно менять стили сайта, используя всю мощь CSS. Например:
const thirdPartyStylesheet = document.styleSheets[0]; //index 15 rule color: red !important; thirdPartyStylesheet.deleteRule(15);
Можно даже добавить новые динамически генерируемые стили при помощи конструктора CSSStyleSheet. По своему опыту могу сказать, что это наилучший вариант, когда вы имеете дело со сторонними таблицами стилей или конструктором сайтов, т. е., когда ваши возможности работы с CSS ограничены.
Когда вы засоряете свои встроенные стили многочисленными !important для перезаписи сторонних стилей, происходит жуткое разрастание CSS-селекторов. Изменение CSSOM позволяет этого избежать. Этот подход также может быть эффективнее перебора в цикле нескольких элементов для динамического обновления их стилей.
Основной недостаток CSSOM-подхода — такой код труден для понимания и отладки. Для измененного CSSOM нет поддержки в инструментах разработчика. И, если только вы не задокументировали свои шаги крупным шрифтом, ваш код может довести будущего мейнтейнера до ручки. Так же, как и скальпель, этот метод нужно использовать редко и осторожно.
Когда стоит модифицировать CSSOM
Больше всего этот способ подходит не для внесения новых стилей, а для удаления сторонних. Также с его помощью можно изменить стили, которые вы не контролируете.
Используйте пользовательские свойства CSS
Последний способ динамического обновления CSS-стилей предполагает применение пользовательских свойств CSS. Хотя технически тут не используются никакие новые APIs, применение пользовательских свойств существенно отличается от предыдущих подходов.
Пользовательские свойства можно использовать с любым из предыдущих методов:
const themeColor = document.getElementById('color-picker').value; // use with inline style document.body.style=`--theme-color: $;`; // use in CSSOM const stylesheet = document.styleSheets[0]; stylesheet.insertRule(`:root < --theme-color: $; >`);
Пользовательские свойства элемента наследуются его потомками. Мы можем использовать их со встроенными стилями и не беспокоиться о выборке и переборе в цикле всех элементов в DOM. Все, что нам нужно, это найти их общего предка. В силу этой особенности пользовательские свойства также могут применяться для изменения псевдоэлементов при помощи встроенных стилей.
Самые значительные минусы применения пользовательских свойств — необходимость доступа к таблицам стилей и необходимость планирования своих действий. При благоразумном использовании с их помощью можно изменить несколько стилей за одно обновление. Пример — генерация целой цветовой палитры путем обновления одного цвета.
Применение пользовательских свойств требует такой же продуманности (если не большей), что и подход с изменением атрибутов элемента, но с его помощью можно менять стили во время работы кода.
Поддержка кода с пользовательскими свойствами проще, чем кода с измененной CSSOM: тут нужно отслеживать меньше изменений. Но при этом вам нужен доступ к таблицам стилей.
Когда стоит применять пользовательские свойства
- Вам нужно внести комплексные изменения стилей во время выполнения программы.
- Вы хотите создать новые отношения между стилевыми свойствами.
- Вам нужно пробить Shadow DOM, чтобы стилизовать множество веб-компонентов.
Итоги
Когда вам в очередной раз понадобится изменить CSS-стили при помощи JavaScript, спросите себя:
- Это предопределенное изменение или значение стиля определяется динамически во время работы программы?
- Я перекрываю существующие сторонние стили?
- Мне нужно изменить один элемент или несколько, включая псевдоэлементы и классы?
- Хочу ли я, чтобы это изменение повлияло на несколько производных свойств или затронуло несколько элементов на странице?
Исходя из ответов на эти вопросы, можно подобрать наиболее подходящий способ внесения изменений в CSS-стили.
Как изменить размер изображения SVG
Предполагаю, что даже опытный разработчик может столкнуться с такой, казалось бы, простой проблемой.
Что такое SVG?
SVG отлично подходит для отображения логотипов, иконок, карт, флагов, графиков и другой графики, созданной в векторных графических редакторах типа Illustrator, Sketch и Inkscape. SVG позволяет “залить” Ваш логотип в супер-качестве и в высоком разрешении на сайт, и при этом будет весить в десятки раз меньше изображения в формате png.
SVG означает «Масштабируемая векторная графика». Согласно MDN, определение SVG приведено ниже.
Масштабируемая векторная графика (SVG) — это язык разметки на основе XML для описания двухмерной векторной графики. По сути, SVG для графики — это то же самое, что HTML для текста. SVG — это открытый веб-стандарт на основе текста. Он специально разработан для работы с другими веб-стандартами, такими как CSS, DOM и SMIL.
SVG чаще всего используется для изображений и значков при разработке приложений. Если вы работаете с веб-дизайнером, он или она будет отправлять вам изображения в формате SVG, а не в формате JPEG или PNG (если это опытный веб-дизайнер). Поэтому для FrontEnd-разработчика очень важно знать, как работать с SVG.
Как посмотреть исходный код страницы
Рассказываем, что такое «исходный код страницы в интернете», как его открыть и какие горячие клавиши браузера за это отвечают. Разберем зачем и кому нужно смотреть исходный код и как его редактировать.
Что такое исходный код страницы и кому он нужен
Исходный код страницы — это вид страницы на языке кода. Он выглядит как список пронумерованных строк, где каждая содержит информацию о конкретном объекте на сайте. Код страницы состоит из трех элементов:
- HTML — гипертекстовая разметка, которая отвечает за всю структуру страницы. С помощью нее делают текст, блоки, основные элементы сайта.
- CSS — работает в связке с HTML через теги и отвечает за визуализацию: размер, стиль, шрифты, форму, фон.
- JavaScript — логический язык программирования, который отвечает за более сложные элементы. Например, анимацию, аналитику или интерактив.
Как выглядит исходный код страницы сайта
Исходный код позволяет посмотреть, как написана страница сайта в интернете и какие элементы в ней «спрятаны» за внешней оболочкой. Чаще всего исходный код смотрят SEO-специалисты, чтобы узнать:
- Как собран текст страницы и какие ссылки используются.
- Какие метатеги и ключевые слова использованы.
- Какое описание (description) и название (title) страницы.
- Подключены ли страницы к «Яндекс.Метрике», Google Analytics, скрипты, счетчики, плагины, пиксели.
Еще исходный код часто смотрят дизайнеры, программисты и верстальщики. Им может пригодится эта информация, чтобы выяснить:
- Отступы у кнопок, размеры блоков, цвета и используемые шрифты.
- Как встроены изображения, графика и другие медиа.
- Как использован JavaScript, какие атрибуты кода применены, есть ли баги.
Читайте также: 76 ссылок, которые помогут сделать концепцию дизайна эффективнее и быстрее
Исходный код можно смотреть не только для своего сайта, но и любого другого в интернете. Для этого достаточно открыть браузер, выбрать страницу и перевести ее в режим просмотра кода.
Как посмотреть исходный код страницы
Код страницы можно посмотреть в двух режимах:
- Исходный код — загружается версия страница в формате HTML-кода.
- Инспектор — запускается консоль для просмотра и управления кода.
Два способа посмотреть код: в отдельной вкладке или через консоль
Чтобы посмотреть исходный код страницы, используйте горячие клавиши в любом браузере:
- Ctrl+U — посмотреть код в новой вкладе на Windows.
- Ctrl+Shift+C — открыть инспектор кода на Windows.
- cmd+U — открыть исходный код на MacOS.
- alt+cmd+U — открыть инспектор кода на MacOS.
Если по каким-то причинам не открывается, то воспользуйтесь инструкцией для каждого браузера далее.
Google Chrome
Нажмите правой кнопкой мыши на странице и выберите:
- Посмотреть код страницы. Код откроется в отдельной вкладке.
- Посмотреть код. Откроется инспектор для просмотра кода в текущей вкладке.
Как посмотреть исходный код страницы в Chrome
Safari
Чтобы пункт «Посмотреть исходный код» появился, сначала потребуется включить опцию его просмотра:
- Откройте настройки браузера в меню Safari.
- Перейдите во вкладку «Дополнение».
- Поставьте галочку на пункте «Показывать меню „Разработка“ в строке меню».
Как включить просмотр кода в браузере Safari
После этого открываете страницу в интернете, щелкаете правой кнопкой мыши и выбираете:
- Показать программный код страницы. Открыть код страницы в новой вкладке.
- Проверить объект. Включить инспектора.
Как посмотреть исходный код страницы в Safari
Opera
Откройте страницу и кликните правой мышкой по любой области на экране. Выберите:
- Исходный текст страницы. Код откроется отдельной вкладкой.
- Просмотреть код элемента. Запустить инспектора.
Как посмотреть исходный код страницы в Opera
Mozilla Firefox
Откройте страницу и кликните правой мышкой. Выберите:
- Исходный код страницы. Посмотреть код в новой вкладке.
- Использовать свойства поддержки доступности. Это специальная технология, которая поможет другим программам читать страницы для людей с ограниченными возможностями.
- Исследовать. Включает доступ к инспектору для просмотра кода страницы.
Как посмотреть исходный код страницы в Mozilla Firefox
Microsoft Edge
Откройте страницу и нажмите правой кнопкой мыши по любой области. В меню доступно:
- Просмотреть исходный код. Открыть код страницы в отдельной вкладке браузера.
- Проверить. Включить инспектора на странице.
Как посмотреть исходный код страницы в Microsoft Edge
«Яндекс.Браузер»
Откройте страницу и нажмите правой клавишей мыши:
- Просмотреть код страницы. Открыть код в новой вкладке.
- Исследовать элемент. Запустить инспектор кода.
Как посмотреть исходный код страницы в «Яндекс.Браузере»
Браузер на телефоне
На телефоне инспектор недоступен, но можно открыть исходный код с помощью строки «view-source:url-сайта». Например, вот так можно посмотреть страницу Workspace — «view-source:workspace.ru».
Как посмотреть исходный код страницы на телефоне
Как использовать исходный код
Вы можете редактировать сайт и изучать его структуру.
Редактирование страницы
Через инспектор можно менять код страницы внутри своего браузера — это никак не влияет на сам сайт: после перезагрузки сайт вернется в исходное положение. Редактирование страницы может пригодится, чтобы:
- менять блоки и их содержимое для проверки их отображения или тестирования;
- делать скриншоты для себя или в качестве технических заданий для копирайтеров, программистов или дизайнеров.
Как отредактировать код на сайте:
- В режиме инспектора нажмите на курсор около вкладки «Элементы» (Elements).
- Выберите курсором интересующий элемент сайта: блок, текст, картинку, заголовок.
Как посмотреть исходный код элемента страницы
В итоге над элементом появится информация о примененных CSS-стилях, а во вкладке «Элементы» (Elements) — конкретная строка в HTML-коде. Ее можно редактировать. Например, изменить текст — в нашем примере это строка h1.
Как найти элемента сайта в его исходном коде
Кликаем два раза и в окне «Элементы» (Elements) пишем что угодно. Изменение сразу отобразится на сайте.
Как изменить элемент сайта с помощью инспектора
Также можно менять CSS-стили. Например, изменить размер отображаемой картинки. Выберите элемент сайта и в разделе Стили (Styles) пролистайте в самый низ, где предлагают изменить размер изображения. Введите новые значения и сохраните.
Как изменить CSS-стиль через исходный код
Проверить SEO-оптимизацию
Вы можете проверить заголовки, тайтл и дескрипшн любой страницы. Для этого откройте режим просмотра кода в новой вкладке и через поиск (Ctrl+F) ищите следующие строки:
- title — название страницы,
- description — описание страницы,
- h1-h6 — заголовки,
- alt — теги для изображений.
Как посмотреть тайтл и дескрипшн через исходный код
Эти данные отвечают за продвижение статей через поисковики. Тайтл и дескрипшн отображается в заголовке и сниппете карточки в поисковике, а h1-h2 отвечают за логику всего документа, что тоже влияет на выдачу. Alt — описывают содержимое картинок, что пригодится для соответствующего поиска.
Параметры страницы, который можно найти в ее исходном коде
Подробнее о SEO-продвижении и способах улучшить свои позиции в поисковиках читайте в статьях:
- «Внутренняя оптимизация сайта: все, что нужно знать о техническом SEO»
- «Как оптимизировать картинки для SEO-продвижения и привлечь дополнительный трафик»
- «Как сделать расширенные сниппеты в выдаче „Яндекса“ и Google»
Заключение
Смотреть, читать и менять исходный код страницы может каждый пользователей браузера, но любые внесенные изменения работают только в браузере. Просмотр кода доступен для любого сайта — это не обязательно должен быть ваш ресурс. Например, посмотреть исходный код страницы конкурента, можно изучить, какие SEO-методы он использует для продвижения, как верстает страницы и какой код использует в работе.
Задачи на тендерной площадке Workspace в категории «SEO»
Даже если вы не разработчик, эта информация поможет составить грамотное техническое задание, которое можно разместить на нашем сайте Workspace и найти здесь исполнителя. Если же вы сами является специалистом, то Workspace поможет найти заказчика — регистрируйтесь, указывайте свои компетенции и находите новые проекты.
Workspace.LIVE — мы в Телеграме
Новости в мире диджитал, ответы экспертов на злободневные темы, опросы, статьи и многое другое. Подписывайтесь: https://t.me/workspace
Вакансии
- Тестировщик / QA Engineer
ALTWeb Group Удаленная работа По договоренности - Контент-оператор 1С
Webteam Удаленная работа По договоренности - Программист 1С-Битрикс
Рикорда Иваново от 80 000 - Креативный копирайтер
ChatCrafters Удаленная работа 40 000 – 55 000 - Бизнес-ассистент
ИП Еремина НН Удаленная работа 10 000 – 100 000
Изменить класс элемента с помощью JavaScript/jQuery
В этом посте мы обсудим, как изменить класс элемента с помощью JavaScript и jQuery.
1. Замените класс другим классом
Чтобы заменить класс другим классом, вы можете удалить старый класс с помощью jQuery. .removeClass() метод, а затем добавьте новый класс, используя jQuery .addClass() метод.
jQuery
function replaceClass ( id , oldClass , newClass ) < if ( elem . hasClass ( oldClass ) ) < elem . removeClass ( oldClass ) ; elem . addClass ( newClass ) ; $ ( document ) . ready ( function ( ) < $ ( "#darkmode" ) . click ( function ( ) < replaceClass ( "container" , "light" , "dark" ) ; $ ( "#lightmode" ) . click ( function ( ) < replaceClass ( "container" , "dark" , "light" ) ;
CSS
background-color : #ffffff ;
background-color : #243447 ;
HTML
В простом JavaScript вы можете использовать Element.classList.remove() а также Element.classList.add() методы для удаления и добавления класса соответственно.
JS
function replaceClass ( id , oldClass , newClass ) < var elem = document . getElementById ( id ) ; elem . classList . remove ( oldClass ) ; elem . classList . add ( newClass ) ; document . getElementById ( "darkmode" ) . onclick = function ( ) < replaceClass ( "container" , "light" , "dark" ) ; document . getElementById ( "lightmode" ) . onclick = function ( ) < replaceClass ( "container" , "dark" , "light" ) ;
CSS
background-color : #ffffff ;
background-color : #243447 ;
HTML
2. Замените все классы одним или несколькими новыми классами.
Чтобы заменить все существующие классы одним или несколькими новыми классами, вы можете просто заменить содержимое class атрибут с новыми классами. Вот пример в jQuery, демонстрирующий это с помощью .attr() метод.
jQuery
$ ( document ) . ready ( function ( ) < $ ( "#darkmode" ) . click ( function ( ) < $ ( "#container" ) . attr ( "class" , "dark" ) ; $ ( "#lightmode" ) . click ( function ( ) < $ ( "#container" ) . attr ( "class" , "light" ) ;
CSS
background-color : #ffffff ;
background-color : #243447 ;
HTML
В простом JavaScript мы можем сделать это с помощью className атрибут.
JS
document . getElementById ( «darkmode» ) . onclick = function ( ) < document . getElementById ( "container" ) . className = "dark" ; document . getElementById ( "lightmode" ) . onclick = function ( ) < document . getElementById ( "container" ) . className = "light" ;
CSS
background-color : #ffffff ;
background-color : #243447 ;
HTML
3. Переключить класс
Вы даже можете реализовать функцию переключения в JavaScript, которая переключается между двумя классами. Вот рабочий пример:
JS
document . getElementById ( «mode» ) . onclick = function ( ) < if ( this . innerText === "Dark Mode" ) < this . innerText = "Light Mode" ; this . innerText = "Dark Mode" ; document . getElementById ( "container" ) . classList . toggle ( "dark" ) ;
CSS
background-color : #ffffff ;
background-color : #243447 ;
HTML
Это все об изменении класса элемента с помощью JavaScript и jQuery.
Оценить этот пост
Средний рейтинг 4.79 /5. Подсчет голосов: 28
Голосов пока нет! Будьте первым, кто оценит этот пост.
Сожалеем, что этот пост не оказался для вас полезным!
Расскажите, как мы можем улучшить этот пост?
Спасибо за чтение.
Пожалуйста, используйте наш онлайн-компилятор размещать код в комментариях, используя C, C++, Java, Python, JavaScript, C#, PHP и многие другие популярные языки программирования.
Как мы? Порекомендуйте нас своим друзьям и помогите нам расти. Удачного кодирования 🙂
Подписывайся
1 Комментарий
Большинство голосов
Новейшие Самый старый
Встроенные отзывы
Просмотреть все комментарии
Просмотр комментариев
Загрузить больше комментариев
Просматривать
Подпишитесь на новые публикации
- Все проблемы
- Практика DSA
- 100 самых популярных задач
- 50 лучших классических задач
- Лучшие алгоритмы
- Компилятор С/С++
- Компилятор Java
- Компилятор Python
- Компилятор JavaScript
- компилятор PHP
- Компилятор C#
- Свяжитесь с нами
- Политика конфиденциальности
- условия обслуживания
- Подпишитесь на новые публикации
Techie Delight © 2023 Все права защищены.
Этот веб-сайт использует файлы cookie. Используя этот сайт, вы соглашаетесь с использованием файлов cookie, нашей политикой, условиями авторского права и другими условиями. Читайте наши Политика конфиденциальности. Понятно