Как управление элементами стиля CSS (jQuery.css())?

На чтение 3 мин Просмотров 58 Опубликовано 03.11.2023

Используйте jQuery.css() для настройки свойств стиля CSS непосредственно из JavaScript без необходимости использовать громоздкий доступ к DOM или подробные селекторы CSS. Таким образом, упрощенное управление способствует быстрым и точным изменениям в дизайне вашего веб-сайта.

Содержание

Что такое метод jQuery.css()?
Каков синтаксис метода jQuery.css()?
Пример использования jQuery.css()

Что такое метод jQuery.css()?

Вы можете использовать метод jQuery.css(), чтобы получить или изменить значение определенного свойства CSS. Эту функцию также можно использовать для событий с помощью jQuery.on() или для анимации с помощью jQuery.animate(). Если вы хотите манипулировать свойствами нескольких похожих элементов, вы можете использовать jQuery.css() в сочетании с jQuery.each(). Если вы используете jQuery в WordPress, интеграция jQuery.css() происходит без проблем и не требует дополнительных зависимостей.

Каков синтаксис метода jQuery.css()?

Синтаксис jQuery.css() имеет следующую форму:

$(selector).css(property, value);

Параметр propertyиспользуется для указания свойства CSS, значение которого необходимо получить. valueНовое значение имеет числовую форму или строку символов.

Также возможно одновременно захватывать или манипулировать несколькими свойствами CSS, передавая объект с парами свойство-значение :

$(selector).css({property1: value1, property2: value2, ...});

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

Ниже мы хотели бы проиллюстрировать конкретное использование jQuery.css() на примере:

<!DOCTYPE html>
<html>
<head>
  <title>jQuery.css() example</title>
  <style>
    .myElement {
      width: 200px;
      height: 100px;
      background-color: blue;
      color: white;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div class="myElement">This is an example text</div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {

      $(".myElement").css("background-color", "red");

      $(".myElement").css("color", "green");

      var fontSize = $(".myElement").css("font-size");
      console.log("Font-Size:", fontSize);
    });
  </script>
</body>
</html>

В этом примере у нас есть элемент HTML с классом myElement, который изначально имеет синий фон, белый текст и размер шрифта 20 пикселей. Используя jQuery.css(), мы меняем цвет фона элемента на красный ( $(«.myElement»).css(«background-color«, «red»);), а цвет шрифта на зеленый ( $(«.myElement»).css(«color«, «green»);). Кроме того, мы используем этот метод $(«.myElement»).css(«font-size»), чтобы получить текущий размер шрифта элемента и вывести его на консоль.

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