3.11.2. Чтение и изменение CSS-свойств, классов и атрибутов

Опубликовано: 10 августа 2015 Обновлено: 21 января 2022 1 комментарий

Библиотека jQuery позволяет управлять свойствами и атрибутами элементов обернутого набора, изменяя первоначальные значения. Можно устанавливать новые свойства, получать и изменять значения первоначальных свойств. Удаляя или добавляя классы, можно динамически изменять стиль отображения элементов.

Манипулирование свойствами и атрибутами элементов

1. Добавление и удаление класса

1.1. Метод .addClass()

Добавляет указанный класс (или несколько классов) к каждому элементу обернутого набора. Чтобы данный метод сработал, необходимо заранее создать стиль для добавляемого класса. Метод не удаляет старый класс, а просто добавляет новый.

.addClass(имя класса)
имя класса — одно или больше имен класса, отделённых друг от друга пробелами.
.addClass(функция)
функция — возвращает одно или более имен класса, разделенных пробелом, которые будут добавлены к существующим. В качестве аргумента принимает индекс элемента в наборе и существующее имя класса(ов).

1.2. Метод .removeClass()

Удаляет указанное имя класса(ов) у всех элементов обернутого набора.

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

1.3. Метод .toggleClass()

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

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

1.4. Метод .hasClass()

Проверяет наличие указанного имени класса хотя бы у одного элемента в соответствующем наборе. Возвращает true, если хотя бы один из элементов в наборе имеет проверяемое имя класса, в противном случае — false.

.hasClass(имя класса)
имя класса — строка с именем класса для поиска.

2. Изменение атрибутов элементов

Метод получает значение атрибута первого элемента набора или устанавливает одно или более значений атрибутов для элементов набора.

2.1. Метод .attr()

.attr(имя атрибута)
имя атрибута — возвращает значение атрибута первого элемента в обернутом наборе. Если атрибут отсутствует, возвращает undefined.
.attr(имя атрибута, значение)
имя атрибута — задает имя атрибута, для которого будет установлено указанное значение.
значение — строка или число, которое будет добавлено как значение атрибута для всех элементов обернутого набора.
.attr(атрибуты)
атрибуты — значения, которые копируются из свойств объекта, будут установлены для всех элементов обернутого набора.
.attr(имя атрибута, функция)
имя атрибута — задает имя атрибута, для которого будет установлено указанное значение.
функция — в качестве аргументов принимает индекс элемента в наборе и старое значение атрибута. Возвращаемое значение будет установлено в качестве значения атрибута.

2.2. Метод .removeAttr()

Удаляет указанный атрибут у каждого элемента обернутого набора.

.removeAttr(имя атрибута)
имя атрибута — строка, определяющая атрибут для удаления.

3. Изменение свойств элемента

3.1. Метод .css()

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

.css(имя свойства)
имя свойства — строка с именем свойства, возвращает его вычисляемое значение для первого элемента набора.
.css(имена свойств)
имена свойств — массив свойств, возвращает их вычисляемые значения для первого элемента набора.
.css(имя свойства, значение)
имя свойства — строка с именем свойства.
значение — строка или число, которые будут установлены в качестве значения указанного свойства для всех элементов обернутого набора.
.css(имя свойства, функция)
имя свойства — строка с именем свойства.
функция — в качестве аргументов функции передается индекс элемента в наборе и старое значение свойства. Возвращаемое значение будет установлено для всех элементов набора.
.css(объект свойств)
объект свойств — добавляет CSS-свойства, имена которых определены как ключи в переданном объекте, в связанные с ними значения для всех элементов в соответствующем наборе.

4. Получение и изменение размеров и координат элемента

4.1. Метод .width()

Возвращает текущее значение ширины для первого элемента в наборе или устанавливает ширину для каждого элемента набора. Единица измерения по умолчанию px. Метод можно использовать в случае, если полученное значение будет использоваться в математических расчетах. Размеры вычисляются без учета отступов и толщины рамки, без указания единицы измерения. При изменении размеров окна браузера размеры элемента могут изменяться.

.width()
Метод вызывается без параметров. Возвращает текущее значение ширины для первого элемента в наборе без указания единицы измерения.
.width(значение)
значение — целое числовое значение или строка-значение ширины, которое будет установлено для каждого элемента набора.
.width(функция)
функция — принимает в качестве аргумента индекс элемента и старое значение свойства, возвращаемое значение будет установлено как ширина для всех элементов.

4.2. Метод .height()

Возвращает текущее значение высоты для первого элемента в наборе или устанавливает высоту для каждого элемента набора.

.height()
Метод вызывается без параметров. Возвращает текущее значение высоты для первого элемента в наборе.
.height(значение)
значение — целое числовое значение или строка-значение высоты, которое будет установлено для каждого элемента набора.
.height(функция)
функция — принимает в качестве аргумента индекс элемента и старое значение свойства, возвращаемое значение будет установлено как высота для всех элементов.

4.3. Метод .innerWidth()

Возвращает ширину первого элемента в обернутом наборе с учетом отступов padding или устанавливает ее для каждого элемента обернутого набора.

.innerWidth()
Метод вызывается без параметров. Возвращает текущее значение внутренней ширины для первого элемента в наборе.
.innerWidth(значение)
значение — целое числовое значение, которое будет установлено для каждого элемента набора.
.innerWidth(функция)
функция — принимает в качестве аргумента индекс элемента и старое значение свойства, возвращаемое значение будет установлено как внутренняя ширина для всех элементов набора.

4.4. Метод .innerHeight()

Возвращает высоту первого элемента в обернутом наборе с учетом отступов padding.

.innerHeight()
Метод вызывается без параметров. Возвращает текущее значение внутренней высоты для первого элемента в наборе.
.innerHeight(значение)
значение — целое числовое значение, которое будет установлено для каждого элемента набора.
.innerHeight(функция)
функция — принимает в качестве аргумента индекс элемента и старое значение свойства, возвращаемое значение будет установлено как внутренняя ширина для всех элементов набора.

4.5. Метод .outerWidth()

Возвращают ширину первого элемента в обернутом наборе. В эти размеры входят толщина рамки и ширина отступа.

.outerWidth(логическое значение)
логическое значение — необязательное значение, если установлено true, значение margin учитывается, в противном случае нет.

4.6. Метод .outerHeight()

Возвращают высоту первого элемента в обернутом наборе. В эти размеры входят толщина рамки и ширина отступа.

.outerHeight(логическое значение)
логическое значение — необязательное значение, если установлено true, значение margin учитывается, в противном случае нет.

4.7. Метод .offset()

Получает текущие координаты первого элемента или устанавливает координаты для каждого элемента. Возвращает объект JavaScript со свойствами left и top, содержащими координаты первого элемента в px обернутого набора относительно начала документа. Метод применяется только к видимым элементам.

.offset()
Метод вызывается без параметров.

4.8. Метод .position()

Возвращает объект JavaScript со свойствами left и top, содержащими координаты первого элемента в px обернутого набора относительно ближайшего родительского элемента. Метод применяется только к видимым элементам.

.position()
Метод вызывается без параметров.

Поделиться: