Jquery как изменить стиль элемента

Статья, в которой разберем, как в jQuery осуществляется работа со стилями (style) элемента.

В jQuery работа со стилями HTML элементов осуществляется через метод css. Данный метод используется как получения значения стилей, так и для их добавления, изменения и удаления.

Первый вариант метода css — это получение окончательного значения CSS-свойства непосредственно применяемого к элементу.

Синтаксис метода css:

// Вариант 1 (получение окончательного одного CSS свойства)
.css( propertyName )
// propertyName (тип: Строка) – имя CSS-свойства, значение которого нужно получить
.css( propertyNames )
// propertyName (тип: Массив) – массив, состоящий из одного или нескольких CSS-свойств, значения которых нужно получить

Данный метод, если его применить к набору элементов, возвращает значение CSS свойства только для первого его элемента.

Пример, в котором получим цвет фона непосредственно применённого к элементу #header:

var bgHeader = $('#header').css('background-color');

В jQuery названия CSS-свойств можно указывать как в CSS, так и как это принято в JavaScript. Т.е. убирать дефисы и заменять буквы, следующие за каждым дефисом на прописные.

// можно и так
var bgHeader = $('#header').css('backgroundColor');

Если необходимо получить значения указанного CSS свойства или набора этих свойств у всех элементов текущего набора, то в этом случае необходимо использовать, например, метод each.

Например, определим значение свойства display у всех выбранных элементов и выведем их в консоль:

// переберём все элементы .container
$('.container').each(function(index){
  // значение css-свойства display текущего элемента набора
  var display = $(this).css('display');
  // выведем результат в консоль (индекс элемента в наборе и его значение css-свойства display)
  console.log(index + '. display = '+ display);
});

Кроме этого, метод css позволяет также получить сразу несколько CSS свойств у элемента.

Например, при нажатии на HTML элемент div выведим его ширину и высоту:

<div style="width: 100px; height: 100px; background-color: bisque;"></div>
<div style="width: 200px; height: 200px; background-color: lightseagreen;"></div>
...
<script>
  // при нажатии на элемент div
  $('div').click(function () {
    // создадим переменную, которая будет содержать результат
    var output = [];
    // получим значения сразу нескольких CSS свойств
    var cssProperties = $(this).css(['width', 'height']);
    // переберём полученные свойства
    $.each(cssProperties, function (prop, value) {
      // добавим в массив элемент, содержащий имя свойства и значения
      output.push(prop + ": " + value);
    });
    //выведем массив в качестве содержимого элемента
    $(this).html(output.join('<br>'));
  });
</script>

Как изменить или добавить стиль к элементу в jQuery

Установить стиль элементу осуществляется тоже с помощью метода css, но в этом случае используется следующий синтаксис:

// 1 вариант (для установки одного стиля элементу)
.css( propertyName, value )
// 2 вариант (установка значения стиля с помощью функции)
css( propertyName, function )
// 3 вариант (для установки несколько стилей элементу)
css( properties )
// Описание параметров:
// propertyName (тип: String) – имя CSS-свойства
// value (тип: String или Number) – значение, которое нужно установить CSS-свойству
// function – функция, результат выполнения которой будет установлен в качестве значения CSS-свойству
//   Синтаксис функции:
//     Function( Integer index, String value ) => String или Number
//     В качестве аргументов функция получает индекс элемента (index) и текущее окончательное значение CSS-свойства (value)
// properties (тип: объект JavaScript, содержащий ноль или более пар ключ-значение) – объект, состоящий из пар DOM-свойство-значение, которые нужно установить элементу.

При установлении стилей с помощью метода css, они задаются ко всем элементам текущего набора.

Например, добавим ко всем элементам .info серый цвет фона (background):

<div class="info">...</div>
<div class="info">...</div>

<script>
$('.info').css('background', 'grey');
</script>

Если необходимо применить к каждому элементу текущего набора сразу несколько CSS свойств, то в качестве параметра этого метода необходимо использовать объект JavaScript, содержащий пары ‘имяСвойства’ : значение.

.css({'имяСвойства1':значение, 'имяСвойства2':значение,...})

Пример, в котором показано как можно задать несколько CSS-свойств к элементам .success:

$('.success').css({
  'color':'green',
  'font-size':'16px'
});

В качестве значения строки также можно использовать относительные значения, которые начинаются с += или -=. Первое выражение используется для увеличения текущего значения CSS свойства, а второе — для уменьшения.

Например, увеличим отступ слева и справа у элементов .container на 10px:

$('.container').css({
  "padding-left": "+=10",
  "padding-right":"+=10"
});

Ещё один способ использования метода css — это применение в качестве 2 параметра функции.

.css('имяСвойства',функция)
// функция: Function( Integer index, String value ) => String или Number

Вариант использования метода css, у которого в качестве второго параметра используется функция обычно находить применение, когда значение необходимо как-то вычислить или определить по какому-то алгоритму.

Например, установим всем элементам .text, у которых цвет шрифта не равен чёрному, CSS свойство color, равное red.

$('.text').css('color',function(index,value){
  if (value!=='rgb(0, 0, 0)') {
    return 'red';
  }
});

Например, поменяем значение CSS свойства width у всех элементов img на странице, находящихся #content:

$('#content img').css('width','300px');

Как удалить определённый стиль у элемента

Для того чтобы в jQuery убрать определённый стиль у элемента, ему необходимо присвоить просто пустую строку.

Например, уберём у всех изображений на странице CSS свойство height:

$('img').css('height','');

In this article, we will learn how one can apply a style on an element using jQuery. Suppose you are building a website or game where you need the user interface to be interactive. In such cases styles can play a huge role there in this post we are going to learn how can we change styles when certain events got triggered with the help of JQuery. We can apply styles on elements by using either the JQuery CSS Classes or the JQuery .css() method.

Approach 1: Using JQuery CSS Classes. This approaches consists of using methods such as the addClass() method, removeClass() method and the toggleClass() method. These methods works similar to the classList.addClass() method and classList.removeClass() method. We can create some classes with some css rules and add or remove them using JQuery as per the requirement.

Syntax:

$("#poll").removeClass("safe").addClass("danger");
// OR
$("#poll").toggleClass("danger");

Example:

Output: 

In the above example, we maintain two different classes safe and dangerous for different states. Initially, class safe is attached to div with id #poll and on clicking the button this safe class is removed and danger class is added dynamically which increased the height of the div and changed its background color to red.

If you are confused about which class to remove and which class to add then the toggleClass(“className”) method is there for you. This method adds class(which is passed as an argument inside the method) to the HTML tag if not currently added or removes the class from the element if it’s currently added to the HTML tag. In simple words, this method toggles between adding/removing classes from the selected elements.

Approach 2: Using the JQuery css() method: In this method, instead of creating separate classes inside the stylesheet, you can directly set styles from javascript itself. The css() method can be used to either return a single property based on the given property or set a single or multiple CSS properties.

Syntax:

// Assigning a single CSS property
$("#phone").css("background", "red");

// Assigning multiple properties
$("#phone").css({"background": "red", "font-size": "16px"});

Example 2:

Output: We have checked whether the entered Indian phone number is correct or not for which we checked input value against a custom regex pattern if it’s false then using the JQuery CSS method we changed the background color of the input Textarea and displayed a warning.

In this article, we will learn how one can apply a style on an element using jQuery. Suppose you are building a website or game where you need the user interface to be interactive. In such cases styles can play a huge role there in this post we are going to learn how can we change styles when certain events got triggered with the help of JQuery. We can apply styles on elements by using either the JQuery CSS Classes or the JQuery .css() method.

Approach 1: Using JQuery CSS Classes. This approaches consists of using methods such as the addClass() method, removeClass() method and the toggleClass() method. These methods works similar to the classList.addClass() method and classList.removeClass() method. We can create some classes with some css rules and add or remove them using JQuery as per the requirement.

Syntax:

$("#poll").removeClass("safe").addClass("danger");
// OR
$("#poll").toggleClass("danger");

Example:

Output: 

In the above example, we maintain two different classes safe and dangerous for different states. Initially, class safe is attached to div with id #poll and on clicking the button this safe class is removed and danger class is added dynamically which increased the height of the div and changed its background color to red.

If you are confused about which class to remove and which class to add then the toggleClass(“className”) method is there for you. This method adds class(which is passed as an argument inside the method) to the HTML tag if not currently added or removes the class from the element if it’s currently added to the HTML tag. In simple words, this method toggles between adding/removing classes from the selected elements.

Approach 2: Using the JQuery css() method: In this method, instead of creating separate classes inside the stylesheet, you can directly set styles from javascript itself. The css() method can be used to either return a single property based on the given property or set a single or multiple CSS properties.

Syntax:

// Assigning a single CSS property
$("#phone").css("background", "red");

// Assigning multiple properties
$("#phone").css({"background": "red", "font-size": "16px"});

Example 2:

Output: We have checked whether the entered Indian phone number is correct or not for which we checked input value against a custom regex pattern if it’s false then using the JQuery CSS method we changed the background color of the input Textarea and displayed a warning.

Когда вы хотите изменить стиль элемента, есть два варианта, к которым прибегают чаще других. Первый — можно добавить или удалить класс, вызывая обновление стиля для элемента на основе его нового или удаленного класса. Второй — можно работать с элементом DOM, применяя стили напрямую. Начнем с того, что посмотрим, как с помощью jQuery можно просто изменить стили элементов через классы.

Добавление и удаление имен классов с помощью jQuery

Атрибут class элементов HTML критически важен для создания интерактивных интерфейсов. В HTML он служит для подачи этих имен в качестве строки, разделенной пробелами. Можно использовать столько пробелов, сколько хотите, но обычно применяют один. Например, у вас может быть:

<div class="some-class my-class another-class"></div>

К сожалению, в элементах DOM имена классов в соответствующем свойстве className представлены не массивом, а строкой, в которой имена разделены пробелами. Как это досадно и неудобно! Получается так: всякий раз, когда вы хотите добавить или удалить имена классов из элементов, у которых уже есть эти имена, нужно анализировать строку, чтобы определить отдельные имена при чтении и обеспечивать восстановление в корректный, разделенный пробелами формат при записи.

Взяв пример с jQuery и других подобных библиотек, HTML5 представила лучший способ выполнять эту задачу через API, называемый classList. Он прибегает к примерно тем же методам, что и jQuery. Но, к сожалению, нативные методы могут работать только с одним элементом за раз, чем и отличаются от методов jQuery. Если вы захотите добавить класс в набор элементов, то придется итерировать по ним. Вдобавок, будучи нововведением, classList не поддерживается старыми браузерами, в первую очередь Internet Explorer 6– — 9. Чтобы лучше понять эту разницу, рассмотрим код, написанный на чистом JavaScript, который выбирает все элементы с классом some-class и добавляет класс hidden:

var elements = document.getElementsByClassName('some-class');
  for(var i = 0; i < elements.length; i++) {
  elements[i].classList.add('hidden');
}

Предыдущий фрагмент совместим только с современными браузерами, включая Internet Explorer 10 или выше. Теперь сравним код с эквивалентом в jQuery:

$('.some-class').addClass('hidden');

Версия jQuery не только короче, но и совместима с Internet Explorer, начиная с 6 (конечно же, в зависимости от того, какую версию jQuery вы используете!).

ПРИМЕЧАНИЕ

Список имен классов рассматривается как неупорядоченный; таким образом, порядок следования имен в разделенном пробелами списке не имеет семантического значения.

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

Добавление имен классов к элементам набора — простая операция, осуществляемая благодаря методу addClass(), который был использован в предыдущем фрагменте кода.

Удалять имена класса просто с помощью метода removeClass().

Чтобы увидеть, когда метод removeClass() может быть полезен, допустим, что у вас есть такой элемент на странице:

<p id="text" class="hidden">Краткое описание</p>

Вы можете удалить скрытый класс, используя следующую команду:

$('#text').removeClass('hidden');

Часто может понадобиться переключить набор стилей, принадлежащий имени класса, туда и обратно, видимо, чтобы показать изменения между двумя состояниями или по какой-то другой причине, нужной вашему интерфейсу. jQuery упрощает эту работу с помощью метода toggleClass().

Как видите, метод toggleClass() дает много возможностей. Прежде чем перейти к другим методам, рассмотрим несколько примеров.

Ситуация, когда метод toggleClass() может понадобиться, — если вы хотите легко и быстро переключить визуальное представление элементов, обычно основываясь на некоторых других элементах. Представьте, что хотите разработать простенький виджет Share (Поделиться), при щелчке показывающий окно с кнопками социальных сетей, чтобы поделиться ссылкой на эту страницу. Если кнопку нажать повторно, то окно должно быть скрыто.

Используя jQuery и метод jQuery click(), вы легко сможете сделать этот виджет:

$('.share-widget').click(function() {
  $('.socials', this).toggleClass('hidden');
});

Переключения класса на основании его наличия или отсутствия у элемента — достаточно распространенная операция, но возможны и переключения класса, основанные на других, произвольных условиях. Рассмотрим следующий код:

if (aValue === 10) {
  $('p').addClass('hidden');
} else {
  $('p').removeClass('hidden');
}

Для этой распространенной ситуации jQuery предоставляет параметр switch, который мы обсудили в описании метода. Можно сократить предыдущий фрагмент кода следующим образом:

$('p').toggleClass('hidden', aValue === 10);

В таком случае класс hidden будет добавлен ко всем абзацам, выбранным, если переменная aValue строго равна 10; в противном случае он будет удален.

В качестве последнего примера представьте, что может понадобиться добавить класс для каждого элемента, основываясь на заданном условии. Вы можете захотеть добавить ко всем нечетным элементам в наборе класс, называемый hidden, не меняя при этом классов для четных элементов. Достигнуть цели можно, передав функцию как первый аргумент toggleClass():

$('p').toggleClass(function(index) {
  return (index % 2 === 0) ? 'hidden' : '' ;
});

Иногда вам потребуется определить, есть ли у элемента конкретный класс, чтобы в соответствии с этим выполнить некие операции. С jQuery можно это сделать, используя метод hasClass():

$('p:first').hasClass('surprise-me');

Метод будет возвращать значение true, если любой элемент в наборе имеет указанный класс; в противном случае — false. Синтаксис данного метода следующий.

Вспомнив метод is() из главы 3, можно достичь цели так:

$('p:first').is('.surprise-me');

Но, возможно, метод hasClass() делает код более читаемым и внутренне является гораздо более эффективным.

Манипулирование стилистическим исполнением элементов с помощью имен классов CSS — действенный инструмент, но в некоторых случаях вы захотите сосредоточиться на мельчайших стилях как объявленных непосредственно на элементах. Посмотрим, что jQuery предложит здесь.

Получение и установка стилей элементов с помощью jQuery

Изменение класса элемента позволяет вам выбрать, какой предопределенный набор заданных правил таблиц стилей должен применяться. Но иногда вы просто хотите установить значение лишь одного или нескольких свойств, неизвестных заранее; таким образом, имени класса не существует. Применение стилей напрямую к элементам (через свойство style, доступное для всех элементов DOM) автоматически переопределит стиль, заданный в таблице стилей (за некоторыми исключениями, например !important, но мы не собираемся здесь подробно обсуждать всю специфику CSS), что дает более точный контроль над отдельными элементами и их стилями.

Аргумент value может также быть функцией аналогично методу attr(). Это значит, что вы можете, например, увеличить ширину всех элементов в наборе на 20 пикселов, умноженных на индекс элемента, как в следующем примере:

$('.expandable').css('width', function(index, currentWidth) {
  return parseInt(currentWidth, 10) + 20 * index;
});

В этом фрагменте нужно передать текущее значение в функцию parseInt(), потому что ширина элемента возвращается в пикселах как строка (например, «50px»). Без преобразования сумма будет совершаться как конкатенация строк наподобие «50px20» (если значение index равно 1).

Если вы хотите увеличить ширину всех элементов на 20 пикселов, то jQuery может предложить вам хорошее сокращение. Вместо написания функции можно указать:

$('.expandable').css('width', '+=20');

И аналогичное сокращение возможно, если вы хотите отнять заданное количество пикселов:

$('.expandable').css('width', '-=20');

Приведем еще один пример того, как jQuery упрощает работу: обычно проблемное свойство opacity будет отлично работать со всеми браузерами (даже старыми), если передать значение между 0.0 и 1.0; больше никакой путаницы с фильтрами alpha в старых IE!

Теперь рассмотрим пример использования второй сигнатуры метода css():

$('p').css({
  margin: '1em',
  color: '#FFFFFF',
  opacity: 0.8
});

Этот код установит указанные значения ко всем элементам в наборе. Но что, если вы хотите создать эффект уменьшения прозрачности для ваших элементов?

Так же как и в сокращенной версии метода attr(), можно применить функции как значения к любому свойству CSS в объекте параметров свойства, и они будут вызваны для каждого элемента в наборе, чтобы определить, какое значение следует применить. Для выполнения этой задачи задействуйте функцию как значение opacity вместо фиксированного числа:

$('p').css({
  margin: '1em',
  color: '#1933FF',
  opacity: function (index, currentValue) {
    return 1 - ((index % 10) / 10);
  }
});

Наконец, обсудим, как можно применить css() с переданным ему именем или массивом имен для получения вычисленного стиля свойства или свойств, связанных с этим именем (именами) первого элемента в объекте jQuery. Когда мы говорим «вычисленный стиль», имеем в виду стиль после применения всех связанных, включенных и встроенных CSS.

Этот вариант метода css() всегда возвращает значения как строку, так что если нужно число или какой-то другой тип, то следует проанализировать возвращаемое значение, используя, в зависимости от ситуации, функции parseInt() или parseFloat().

Чтобы понять, как работает метод чтения css(), когда ему передается массив имен, рассмотрим такой пример. Необходимо вывести в консоль свойство и соответствующее ему значение элемента, имеющего special как его класс для следующих свойств: font-size, color и text-decoration. Для выполнения задачи вы должны написать:

Метод css() — еще один пример того, как jQuery решает множество проблем с кросс-браузерной несовместимостью. Чтобы решить эту задачу с использованием только нативных методов, вам пришлось бы применить метод getComputedStyle() для всех версий Chrome, Firefox, Opera, Safari и Internet Explorer, начиная с версии 9, и свойства currentStyle и runtimeStyle для Internet Explorer 8 и ниже.

Прежде чем продолжить, мы хотим обратить внимание на два важных факта. Первый: разные браузеры могут возвращать разные значения для цветов в CSS, эквивалентных логически, но не текстуально. Например, если у вас есть объявления вроде color: black;, то некоторые браузеры могут вернуть #000, #000000 или rgb(0, 0, 0). Второй факт: получение сокращенных форм в свойствах CSS, таких как margin или border, библиотекой не гарантируется (хотя и работает в отдельных браузерах).

Для маленького набора общедоступных значений CSS jQuery предоставляет удобные методы, которые получают доступ к этим значениям и преобразуют их в наиболее часто используемые типы.