jQuery: Урок 13 — Динамическое управление стилями CSS

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

Добавление стилей с помощью функции css()

Создадим простой блок <div> с именем block:

<div id="block">Блок</div>

Найдем этот блок с помощью jQuery:

$("#block");

Теперь воспользуемся функцией css(). Она принимает два параметра: имя свойства и его значение. Например, чтобы установить размер шрифта в 25 пикселей:

$("#block").css("font-size", "25px");

Обновив страницу, увидим, что размер шрифта блока изменился. Обратите внимание, что в HTML-коде не добавляются новые классы или стили.

Можно также устанавливать другие свойства, например, цвет фона:

$("#block").css("background-color", "#ff0000"); // Красный цвет через шестнадцатеричный код
$("#block").css("background-color", "red");     // Красный цвет через название

Использование функций в качестве значения свойства

В качестве второго параметра функции css() можно передать функцию. Это особенно полезно, когда значение стиля зависит от других параметров. Например:

$("#block").css("background-color", function() {
  return "blue";
});

Для одной строки это излишне, но для более сложных сценариев использование функции оправдано.

Установим ширину блока в 250 пикселей:

$("#block").css("width", "250px");

Зададим высоту блока, равную его ширине, используя функцию для получения текущей ширины:

$("#block").css("height", function() {
  return $(this).width() + "px";
});

$(this).width() возвращает ширину элемента, к которому применяется функция. Результат — высота блока, равная его ширине (250px). Изменение ширины автоматически изменит и высоту.

Более сложные примеры

Функция, переданная вторым параметром css(), может содержать несколько строк кода, например, вызовы alert() или prompt():

$("#block").css("height", function() {
  let newHeight = prompt("Введите высоту:");
  return newHeight + "px";
});

Этот код запрашивает у пользователя высоту и устанавливает её для блока.

Функция css() в jQuery — мощный инструмент для динамического управления стилями HTML-элементов. Она позволяет изменять стили без необходимости модификации CSS-файла, используя как простые значения, так и функции для более сложных сценариев.