Jquery получить свойство css элемента

Работа с CSS

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

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

группе css-величин styleName1, styleName2, . будут присвоены значения value1, value2, . , у всех выбранных элементов.

css-величине styleName будет присвоено значение, возвращенное пользовательской функцией. Функция вызывается отдельно, для каждого из выбранных элементов. При вызове, ей передаются следующие параметры: index — позиция элемента в наборе, value — текущее значение css-величины styleName у элемента.

$(«.topBlock»).css(«top»)	вернет смещение по вертикали у первого элемента с классом topBlock
$(«.topBlock»).css(«top», «5px»)	установит смещение по вертикали равным 5px у всех элементов с классом topBlock
$(«.topBlock»).css()	установит смещения по вертикали и горизонтали равными 5px и 0px у всех элементов с классом topBlock

Замечание: важно отметить, что используя метод .css(styleName) вы получите значения css-величины только первого элемента из всех выбранных. Если вам нужны значения всех элементов, то следует использовать конструкции типа .map() или .each().

В действии

найдем среди списка планет родную землю и выделим ее зеленым цветом:

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="https://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~ ~lt~style~gt~ #list < width:260px; >.item < width: 250px; height: 20px; float: left; margin: 1px; padding: 3px; background-color: #EEEEEE; list-style-type:none; >~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~ul ~gt~ ~lt~li ~gt~Меркурий~lt~/li ~gt~ ~lt~li ~gt~Венера~lt~/li ~gt~ ~lt~li ~gt~Земля~lt~/li ~gt~ ~lt~li ~gt~Марс~lt~/li ~gt~ ~lt~li ~gt~Юпитер~lt~/li ~gt~ ~lt~li ~gt~Сатрурн~lt~/li ~gt~ ~lt~li ~gt~Уран~lt~/li ~gt~ ~lt~li ~gt~Нептун~lt~/li ~gt~ ~lt~li ~gt~Плутон~lt~/li ~gt~ ~lt~/ul~gt~ ~lt~script~gt~ $("#list .item").css("background-color", function(i,val)< if($(this).text() == "Земля") return "#cceecc"; else return val; >); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

Ссылки

• css значения
• стили элементов
• получить значение css-величин
• изменить значение css-величин
• установить значение css-величин
• присвоить значение css-величинам
• .css()
• css()

Источник

Получение и установка CSS-свойств элементам в jQuery

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

Как получить стиль элемента в jQuery

Первый вариант метода 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 выведим его ширину и высоту:

 .  

Как изменить или добавить стиль к элементу в 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):

Если необходимо применить к каждому элементу текущего набора сразу несколько 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 :

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

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

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

Источник

Category: CSS

These methods get and set CSS-related properties of elements.

.addClass()

Adds the specified class(es) to each element in the set of matched elements.

Get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.

.hasClass()

Determine whether any of the matched elements are assigned the given class.

.height()

Get the current computed height for the first element in the set of matched elements or set the height of every matched element.

.innerHeight()

Get the current computed inner height (including padding but not border) for the first element in the set of matched elements or set the inner height of every matched element.

.innerWidth()

Get the current computed inner width (including padding but not border) for the first element in the set of matched elements or set the inner width of every matched element.

jQuery.cssHooks

Hook directly into jQuery to override how particular CSS properties are retrieved or set, normalize CSS property naming, or create custom properties.

jQuery.cssNumber

An object containing all CSS properties that may be used without a unit. The .css() method uses this object to see if it may append px to unitless values.

jQuery.escapeSelector()

Escapes any character that has a special meaning in a CSS selector.

.offset()

Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document.

.outerHeight()

Get the current computed outer height (including padding, border, and optionally margin) for the first element in the set of matched elements or set the outer height of every matched element.

.outerWidth()

Get the current computed outer width (including padding, border, and optionally margin) for the first element in the set of matched elements or set the outer width of every matched element.

.position()

Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

.removeClass()

Remove a single class, multiple classes, or all classes from each element in the set of matched elements.

.scrollLeft()

Get the current horizontal position of the scroll bar for the first element in the set of matched elements or set the horizontal position of the scroll bar for every matched element.

.scrollTop()

Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.

.toggleClass()

Add or remove one or more classes from each element in the set of matched elements, depending on either the class’s presence or the value of the state argument.

.width()

Get the current computed width for the first element in the set of matched elements or set the width of every matched element.

• Ajax
  • Global Ajax Event Handlers
  • Helper Functions
  • Low-Level Interface
  • Shorthand Methods
  • Deprecated 1.3
  • Deprecated 1.7
  • Deprecated 1.8
  • Deprecated 1.9
  • Deprecated 1.10
  • Deprecated 3.0
  • Deprecated 3.2
  • Deprecated 3.3
  • Deprecated 3.4
  • Deprecated 3.5
  • Basics
  • Custom
  • Fading
  • Sliding
  • Browser Events
  • Document Loading
  • Event Handler Attachment
  • Event Object
  • Form Events
  • Keyboard Events
  • Mouse Events
  • Class Attribute
  • Copying
  • DOM Insertion, Around
  • DOM Insertion, Inside
  • DOM Insertion, Outside
  • DOM Removal
  • DOM Replacement
  • General Attributes
  • Style Properties
  • Collection Manipulation
  • Data Storage
  • DOM Element Methods
  • Setup Methods
  • Properties of jQuery Object Instances
  • Properties of the Global jQuery Object
  • Attribute
  • Basic
  • Basic Filter
  • Child Filter
  • Content Filter
  • Form
  • Hierarchy
  • jQuery Extensions
  • Visibility Filter
  • Filtering
  • Miscellaneous Traversing
  • Tree Traversal
  • Version 1.0
  • Version 1.0.4
  • Version 1.1
  • Version 1.1.2
  • Version 1.1.3
  • Version 1.1.4
  • Version 1.2
  • Version 1.2.3
  • Version 1.2.6
  • Version 1.3
  • Version 1.4
  • Version 1.4.1
  • Version 1.4.2
  • Version 1.4.3
  • Version 1.4.4
  • Version 1.5
  • Version 1.5.1
  • Version 1.6
  • Version 1.7
  • Version 1.8
  • Version 1.9
  • Version 1.11 & 2.1
  • Version 1.12 & 2.2
  • Version 3.0
  • Version 3.1
  • Version 3.2
  • Version 3.3
  • Version 3.4
  • Version 3.5
  • Version 3.6
  • Version 3.7

  Books

  Copyright 2023 OpenJS Foundation and jQuery contributors. All rights reserved. See jQuery License for more information. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. OpenJS Foundation Terms of Use, Privacy, and Cookie Policies also apply. Web hosting by Digital Ocean | CDN by StackPath

  Источник