Изменить свойство css jquery – Как изменить CSS дочернего элемента блока при наведении посредством jQuery? — Хабр Q&A — Вебджем.рф

Содержание

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

Библиотека 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(): Метод вызывается без параметров.

Получение или изменение css в jQuery

.css() — возвращает или изменяет значения css-величин у выбранных элементов страницы.

Функция имеет четыре варианта использования.

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

propertyName — имя свойства.

.css( propertyName, value )

Устанавливает значение value свойству propertyName для всех элементов набора jQuery.

propertyName — имя свойства;
value — значение, присваиваемое свойству.

.css( propertyName, function )

Присваивает свойству propertyName значение, возвращенное функцией function() для всех элементов набора jQuery.

propertyName — имя свойства;
function (index, value) — функция, которая вызывается индивидуально для каждого отдельного элемента в наборе, а возвращаемое ею значение становится значением атрибута
- index — позиция элемента в наборе;
- value — текущее значение свойства propertyName у элемента.

Присваивает одновременно несколько свойств для всех элементов набора jQuery, с помощью объекта отображения.

properties — {имя_свойства1: значение, имя_свойства2: значение и т.д.}

Метод .css() позволяет легко получить значение свойства вычисляемого стиля из первого соответствующего элемента, особенно с учетом различных способов доступа браузерами к большинству этих свойств. Например, Internet Explorer обращается к свойству float как styleFloat, а W3C-браузер как cssFloat. В jQuery вы можете просто использовать «float», а библиотека сама будет переводить его на правильное значение для каждого браузера.

Кроме того, jQuery в равной степени может интерпретировать код CSS и DOM для свойств, название которых состоит из нескольких слов. Например, jQuery понимает и возвращает правильное значение для .css( "background-color") и для .css( "backgroundColor"). Это означает, что смешанное написание имеет особое значение, например .css( "WiDtH" ) не будет делать то же самое, что и .css( "width" ).

Возвращает или изменяет значения css-величин у выбранных элементов страницы.

Описание: Set one or more CSS properties for the set of matched elements.

As with the .prop() method, the .css() method makes setting properties of elements quick and easy. This method can take either a property name and value as separate parameters, or a single object of key-value pairs.

Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both .css({ "background-color": "#ffe", "border-left": "5px solid #ccc" }) and .css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" }). Notice that with the DOM notation, quotation marks around the property names are optional, but with CSS notation they’re required due to the hyphen in the name.

When a number is passed as the value, jQuery will convert it to a string and add px to the end of that string. If the property requires units other than px, convert the value to a string and add the appropriate units before calling the method.

When using .css() as a setter, jQuery modifies the element’s style property. For example, $( "#mydiv" ).css( "color", "green" ) is equivalent to document.getElementById( "mydiv" ).style.color = "green". Setting the value of a style property to an empty string — e.g. $( "#mydiv" ).css( "color", "" ) — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery’s .css() method, or through direct DOM manipulation of the style property. As a consequence, the element’s style for that property will be restored to whatever value was applied. So, this method can be used to cancel any style modification you have previously performed. It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or <style> element. Warning: one notable exception is that, for IE 8 and below, removing a shorthand property such as border or background will remove that style entirely from the element, regardless of what is set in a stylesheet or <style> element.

Note: .css() ignores !important declarations. So, the statement $( "p" ).css( "color", "red !important" ) does not turn the color of all paragraphs in the page to red. It’s strongly advised to use classes instead; otherwise use a jQuery plugin.

As of jQuery 1.8, the .css() setter will automatically take care of prefixing the property name. For example, take .css( "user-select", "none" ) in Chrome/Safari will set it as -webkit-user-select, Firefox will use -moz-user-select, and IE10 will use -ms-user-select.

As of jQuery 1.6, .css() accepts relative values similar to .animate(). Relative values are a string starting with += or -= to increment or decrement the current value. For example, if an element’s padding-left was 10px, .css( "padding-left", "+=15" ) would result in a total padding-left of 25px.

As of jQuery 1.4, .css() allows us to pass a function as the property value:

$( "div.example" ).css( "width", function( index ) {

This example sets the widths of the matched elements to incrementally larger values.

Note: If nothing is returned in the setter function (ie. function( index, style ){} ), or if undefined is returned, the current value is not changed. This is useful for selectively setting values only when certain criteria are met.

jquery — Изменение CSS свойств другого дива/элемента

Stack Overflow на русском

Loading…

Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
Справка Подробные ответы на любые возможные вопросы
Мета Обсудить принципы работы и политику сайта
О нас Узнать больше о компании Stack Overflow
Бизнес Узнать больше о поиске разработчиков или рекламе на сайте

Изменить свойство css jquery – Как изменить CSS дочернего элемента блока при наведении посредством jQuery? — Хабр Q&A