jQuery => Манипуляция CSS

Синтаксис

.css (cssProperty) // Получить значение свойства rendered CSS
.css ([cssProperty, ...]) // Получить значения из массива cssProperties
.css (cssProperty, value) // Установленное значение
.css ({cssProperty: значение, ...}) // Установить свойства и значения
.css (cssProperty, function) // Представление cssProperty для функции обратного вызова

замечания

Полученные значения

Если используется единица реагирования (например, "auto" , "%" , "vw" и т. Д.), .css() вернет фактическое отображаемое значение в px

.myElement{ width: 20%; }

var width = $(".myElement").css("width"); // "123px"

Форматирование свойств и значений

Свойства можно определить с помощью стандартного форматирования CSS как String или с помощью camelCase

"margin-bottom"
marginBottom

Значения должны быть выражены в String. Числовые значения рассматриваются как px единицы внутри jQuery

.css(fontSize: "1em")
.css(fontSize: "16px")
.css(fontSize: 16)      // px will be used

Начиная с jQuery 3 избегайте использования .show() и .hide()

Согласно этой статье в блоге jQuery , из-за проблем с накладными расходами и производительности вы больше не должны использовать .show() или .hide() .

Если у вас есть элементы в таблице стилей, которые установлены для display: none , метод .show() больше не будет отменять это. Поэтому самым важным правилом перехода на jQuery 3.0 является следующее: Не используйте таблицу стилей для установки значения по умолчанию для display: none а затем попытайтесь использовать .show() - или любой метод, который показывает элементы, такие как .slideDown() и .fadeIn() - сделать видимым. Если вам нужен элемент, который должен быть скрыт по умолчанию, лучший способ - добавить к элементу имя класса, например «скрытый», и определить, какой класс будет display: none в таблице стилей. Затем вы можете добавить или удалить этот класс, используя .addClass() jQuery .addClass() и .removeClass() для контроля видимости. В качестве альтернативы вы можете иметь вызов .ready() обработчика .hide() для элементов, прежде чем они будут отображаться на странице. Или, если вы действительно должны сохранить таблицу стилей по умолчанию, вы можете использовать .css("display", "block") (или соответствующее отображаемое значение), чтобы переопределить таблицу стилей.

Установить свойство CSS

Установка только одного стиля:

$('#target-element').css('color', '#000000');

Установка нескольких стилей одновременно:

$('#target-element').css({
    'color': '#000000',
    'font-size': '12pt',
    'float': 'left',
});

Получить свойство CSS

Чтобы получить свойство CSS элемента, вы можете использовать метод .css(propertyName) :

var color    = $('#element').css('color');
var fontSize = $('#element').css('font-size');

Инкремент / Уменьшение числовых свойств

Числовые свойства CSS могут быть увеличены и уменьшены с помощью синтаксиса += и -= , соответственно, с использованием метода .css() :

  // Increment using the += syntax
  $("#target-element").css("font-size", "+=10");
  
  // You can also specify the unit to increment by
  $("#target-element").css("width", "+=100pt");
  $("#target-element").css("top", "+=30px");
  $("#target-element").css("left", "+=3em");
  
  // Decrementing is done by using the -= syntax
  $("#target-element").css("height", "-=50pt");

CSS - Getters and Setters

CSS Getter

Функция .css() getter может применяться к каждому элементу DOM на странице следующим образом:

// Rendered width in px as a string. ex: `150px`
// Notice the `as a string` designation - if you require a true integer, 
// refer to `$.width()` method
$("body").css("width");

Эта строка вернет вычисленную ширину указанного элемента, каждое свойство CSS, которое вы предоставили в круглых скобках, даст значение свойства для этого элемента DOM $("selector") , если вы попросите атрибут CSS, который не существует, вы будет undefined как ответ.

Вы также можете вызвать getter с массивом атрибутов:

$("body").css(["animation","width"]);

это вернет объект всех атрибутов со своими значениями:

Object {animation: "none 0s ease 0s 1 normal none running", width: "529px"}

CSS Setter

.css() метод установки также может быть применен к каждому элементу DOM на странице.

$("selector").css("width", 500);

Этот оператор устанавливает width $("selector") в 500px и возвращает объект jQuery, чтобы вы могли связать больше методов с указанным селектором.

.css() сеттер также может быть использована передача объекта свойств CSS и значений:

$("body").css({"height": "100px", width:100, "padding-top":40, paddingBottom:"2em"});

Все изменения, внесенные сеттером, добавляются к свойству style элемента DOM, что влияет на стили элементов (если только значение свойства стиля уже не определено как !important другом месте в стилях).

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow

jQuery
Манипуляция CSS

Поиск…