логотип PurpleSchool
логотип PurpleSchool

.setProperty() в JavaScript

Автор

Дмитрий Нечаев

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

Введение в .setProperty()

Метод .setProperty() является частью интерфейса CSSStyleDeclaration и позволяет устанавливать значение CSS-свойства для указанного элемента. Этот метод принимает два параметра: имя CSS-свойства и его значение.

Синтаксис метода .setProperty() выглядит следующим образом:

element.style.setProperty(propertyName, value);

Где:

  • element
    • это элемент DOM, для которого мы хотим установить CSS-свойство.
  • propertyName
    • это строка, представляющая имя CSS-свойства, которое мы хотим установить.
  • value
    • это значение CSS-свойства, которое мы хотим установить.

Примеры использования .setProperty()

Давайте рассмотрим несколько примеров использования метода .setProperty() для установки значений различных CSS-свойств у элементов на веб-странице.

1. Установка цвета текста элемента

<div id="myDiv">Пример текста</div>
// Получаем ссылку на div
const div = document.getElementById('myDiv');

// Устанавливаем цвет текста в синий
div.style.setProperty('color', 'blue');

В этом примере мы используем метод .setProperty() для установки цвета текста в элементе <div>.

2. Установка ширины рамки элемента

<div id="myDiv">Пример блока</div>
// Получаем ссылку на div
const div = document.getElementById('myDiv');

// Устанавливаем ширину рамки в 2 пикселя
div.style.setProperty('border', '2px solid black');

В этом примере мы используем метод .setProperty() для установки ширины рамки у элемента <div>.

3. Установка размера шрифта элемента

<div id="myDiv">Пример текста</div>
// Получаем ссылку на div
const div = document.getElementById('myDiv');

// Устанавливаем размер шрифта в 20 пикселей
div.style.setProperty('font-size', '20px');

В этом примере мы используем метод .setProperty() для установки размера шрифта у элемента <div>.

Заключение

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

Стрелочка влево.style в JavaScript.scrollTo() в JavaScriptСтрелочка вправо

Постройте личный план изучения Javascript до уровня Middle — бесплатно!

Javascript — часть карты развития Frontend

  • step100+ шагов развития
  • lessons30 бесплатных лекций
  • lessons300 бонусных рублей на счет

Бесплатные лекции

Все гайды по Javascript

Как работает метод trim() - JavaScriptКак работает метод toUpperCase() - JavaScriptКак работает метод toLowerCase() - JavaScriptКак работает метод substring() - JavaScriptКак работает метод startsWith() - JavaScriptКак работает метод split() - JavaScriptКак работает метод slice() - JavaScriptКак работает метод search() - JavaScriptКак работает метод replaceAll() - JavaScriptКак работает метод replace() - JavaScriptКак работает метод repeat() - JavaScriptКак работает метод padStart() - JavaScriptКак работает метод padEnd() - JavaScriptКак работает метод matchAll() - JavaScriptКак работает метод match() - JavaScriptКак работает метод localeCompare() - JavaScriptКак работает свойство length - JavaScriptКак работает метод lastIndexOf() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод fromCodePoint() - JavaScriptКак работает метод fromCharCode() - JavaScriptКак работает метод endsWith() - JavaScriptКак работает метод concat() - JavaScriptКак работает метод codePointAt() - JavaScriptКак работает метод charCodeAt() - JavaScriptКак работает метод charAt() - JavaScript
Итератор в JavaScript
try...catch в JavaScriptError в JavaScript
Событие wheel в JavaScriptСобытие unload в JavaScriptСобытие touch в JavaScriptСобытие submit в JavaScriptСобытие scroll в JavaScriptСобытие reset в JavaScriptМетод .preventDefault() в JavaScriptСобытие mouseover в JavaScriptСобытие mouseout в JavaScriptСобытие load в JavaScriptСобытие keyup в JavaScriptСобытие keydown в JavaScriptСобытие invalid в JavaScriptСобытие input в JavaScriptСобытийная модель Event в JavaScriptОбъект события Event в JavaScriptСобытие DOMContentLoaded в JavaScriptСобытие dblclick в JavaScriptСобытие click в JavaScriptСобытие change в JavaScriptСобытие beforeunload в JavaScript
Как работает метод some() - JavaScriptКак работает метод reverse() - JavaScriptКак работает метод reduce() - JavaScriptКак работает метод map() - JavaScriptКак работает метод isArray() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод from() - JavaScriptКак работает метод forEach() - JavaScriptКак работает метод flatMap() - JavaScriptКак работает метод flat() - JavaScriptКак работает метод findIndex() - JavaScriptКак работает метод find() - JavaScriptКак работает метод filter() - JavaScriptКак работает метод every() - JavaScriptМассивы в JavaScript
Открыть базу знаний

Лучшие курсы по теме

изображение курса

Основы JavaScript

Антон Ларичев
иконка часов12 бесплатных уроков
иконка звёздочки рейтинга4.8
Backend
Frontend
Mobile
изображение курса

TypeScript с нуля

Антон Ларичев
иконка часов21 бесплатный урок
иконка звёздочки рейтинга4.7
Backend
Frontend
Mobile
изображение курса

Next.js - с нуля

Антон Ларичев
иконка часов23 бесплатных урока
иконка звёздочки рейтинга4.7
Frontend