Меню

Jquery как узнать цвет элемента



jQuery метод .css()

Определение и применение

jQuery метод .css() задает или возвращает одно или несколько свойств стиля для выбранных элементов.

Обращаю Ваше внимание, что, когда вы используете метод с целью вернуть заданное в CSS значение свойства, то возвращается значение первого совпадающего элемента. Некоторые универсальные свойства, такие как margin, padding, background, border могут возвращать разные результаты в зависимости от браузера пользователя. Рекомендуется получать такие значения отдельно для каждого свойства, например для ширины границы (доступно с версии jQuery 1.9):

Кроме того, вычисляемый размер элемента всегда возвращается в пикселях, но он может быть указан как в em, ex, px, % и т.п. в таблице стилей. В зависимости от браузера значения цвета, может быть возвращено как в системе RGB, так и в шестнадцатиричной (HEX), независимо в какой системе указания цвета это задано в таблице стилей.

jQuery одинаково интерпретирует как CSS, так и DOM свойства. Например, следуюшая запись равнозначна и jQuery установит правильное значение в обоих случаях:

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

Если вы используете метод .css() для того, чтобы установить значение, то jQuery модифицирует значение глобального атрибута style элемента (ниже приведенные методы равноценны):

Установка значения атрибута style в пустую строку удаляет свойство из элемента, если оно до этого уже было применено:

Обратите внимание на важный момент, что пустая строка не удалит стиль, который был применен с использованием внешней, или внутренней таблицы стилей.

Обращаю Ваше внимание, что при использовании метода .css(), jQuery игнорирует директиву !important , которая отменяет значимость последнего определенного стиля. Если Вам необходимо сделать какой-то стиль приоритетным, то Вы можете определить это в таблице стилей, и, например, добавить этот класс элементу с помощью метода .addClass().

С версии jQuery 1.4 метод .css() позволяет задать функцию, которая возвращает новое значение для свойства CSS. Если функция ничего не возвращает, или undefined, то в этом случае текущее значение не изменяется. Это может быть полезным для выборочной установки значений только при соблюдении определенных критериев.

С версии jQuery 1.6 метод .css() принимает относительные значения, начинающиеся с += или -= , чтобы увеличить или уменьшить текущее значение.

С версии jQuery 1.8 метод .css() автоматически проставляет префиксы производителей (-webkit, -moz, -ms и тому подобное).

jQuery синтаксис:

Добавлен в версии jQuery

Значения параметров

Параметр Описание
propertyName Задает имя CSS свойства.
value Задает значение CSS свойства.
function ( index, value ) Задает функцию, которая возвращает новое значение для свойства CSS.

  • index — возвращает индекс позиции элемента в наборе (среди выбранных элементов).
  • value — возвращает текущее значение свойства CSS.

Пример использования

В этом примере с использованием jQuery метода .css() мы в первом случае возвращаем значение одного свойства и выводим информацию в консоль браузера (обратите внимание, что информация у браузера Chrome выводится в системе RGB), а во втором случае возвращаем значения в виде объекта сразу четырех свойств. Обратите внимание, что в jQuery можно использовать как значения CSS свойств, например, border-top, так и DOM свойств borderTop.

Результат нашего примера:

Пример возвращения значений свойств с помощью метода .css()

Рассмотрим пример в котором с помощью метода .css() установим для элементов различные CSS свойства:

В этом примере с использованием jQuery метода .css() мы в первом случае с использованием селектора :first устанавливаем значение одного свойства первому элементу

Читайте также:  Лампа h4 желтого цвета артикул

. Обратите внимание, что синтаксис при установки нескольких свойств отличается.

Результат нашего примера:

Пример установки значений свойств методом .css()

Рассмотрим пример в котором в качестве значения параметра метода .css() передадим функцию:

В этом примере с использованием jQuery метода .css() и функции, переданной в качестве значения параметра мы изменяем при каждом нажатии на кнопку ширину элемента. Обратите внимание, что в примере была использована JavaScript функция parseFloat(), которая принимает строку в качестве аргумента и возвращает десятичное число.

Результат нашего примера:

Пример использования функции в качестве значения параметра метода .css() jQuery DOM методы

Источник

jQuery — Работа со стилем элемента

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Селекторы JQuery — как получить все что вы хотите. Часть 2

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

Читайте также:  Вытяжки черного цвета ширина 60 см

Специальные селекторы

К большому разнообразию CSS и XPath селекторов, JQuery добавляет еще и свои собственные селекторы. Большинство этих селекторов позволяет выбирать элементы, как говорится, из расположения. Синтаксис этих селекторов подобен синтаксису CSS-псевдо классов, когда селектор начинается с двоеточия (:)

Например, если нам нужно выбрать элементы второго уровня , из соответствующего набора div-ов с примененным к ним стилем horizontal, мы должны написать следующее:

Заметим, что eq(1) получает элемент второго уровня из набора, потому что Java-Script массив нумеруется с нуля, то есть первый элемент 0, второй 1 и т.д. Для контраста, CSS нумеруется с единицы, поэтому CSS-селектор подобный этому $(‘div:nth-child(1)’), получит первый div-элемент, являющей дочерним от своего родителя.

Стилизация чередующихся строк

Два наиболее полезных из специальных селекторов библиотеки JQuery — это :odd и :even . Давайте посмотрим, как можно использовать эти селекторы для раскрашивания таблицы в полоску, возьмем следующую таблицу:

Теперь добавим два класса в css файл, один для нечетных строк, и один четных:

И наконец напишем JQuery-код, добавляющий классы к ячейкам таблицы (тег

):

Вот этот небольшой фрагмент кода, может представить таблицу следующим образом:

На первый взгляд, может показаться что строки раскрашены наоборот. Однако, также как и селектор :eq() , селекторы :odd() и :even() , используют JavaScript нумерацию, начинающуюся с нуля. Следовательно, первая строчка 0 (четная), вторая 1 (нечетная) и т.д.

Стоит отметить, что мы можем увидеть неожиданные результаты, если таблиц на странице несколько. Например, если фоновый цвет последней строчки нашей таблицы является, синим, то первая строка следующей таблицы будет выкрашена в желтый цвет. Как обойти эту проблему будет рассказано позже, а пока просто следует запомнить.

Для того чтобы узнать как действует последний специальный селектор, давайте представим что нам нужно выделить в таблице строчку, содержащую только пьесы Генри. Для начала как обычно добавляем класс в CSS-файл, содержащий полужирное начертание и красный цвет шрифта:

И добавляем одну строчку, к уже написанному нами коду JQuery, использующую селектор :contains():

Итак, мы видим нашу прекрасную полосатую таблицу, с ярко выделенными пьесами Генри.

Следует признать, что расцвечивание элементов на странице, можно проводить и без JQuery, или любого другого программирования на клиенте. Но, несмотря на это, JQuery вместе с CSS, это отличная альтернатива, для стилизации динамического контента страницы.

Методы доступа к DOM

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

Существует множество случаев, когда получения родителя или предка элемента, имеет важное значение. И в этом случае может сыграть методы доступа к DOM. С этими методами мы сможем с легкостью двигаться вверх, вниз и даже кругом, по дереву элементов.

Некоторые из этих методов, весьма похожи на селекторные выражения, вот например строку, в который мы раскрашивали нечетные строки таблицы $(‘tr:odd’).addClass(‘odd’), легко можно переписать с использованием метода .filter(), следующим образом:

Хотя по большей части, эти два метода получения элементов дополняют друг друга. Давайте снова взглянем на нашу полосатую таблицу и увидим, что именно возможно получить с этими методами.

Ну, во-первых, таблица вполне может иметь строку заголовка, поэтому давайте дополним ее еще одной строкой tr, в которую внесем два элемента th, вместо тегов td:

Читайте также:  Очки для плавания синего цвета

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

Стилизация заголовка таблицы

Задача стилизации заголовка таблицы может быть выполнена следующим способом. Мы можем найти все элементы th, получить их родительский контейнер tr, и раскрасить его. Затем с помощью комбинации CSS, XPath и специальных селекторов JQuery, оставшиеся элементы, можно выбрать действием от обратного, то есть мы выберем все элементы tr, не содержащие в себе дочерних элементов th, и назначим им нужный стиль.

В результате получится следующее:

Здесь для получения родителя тега th, мы используем метод parent(), потому что точно знаем, что у нас есть только одна строка tr, содержащая в себе элементы th.

С остальными строками все еще проще, сначала мы выбрали все элементы tr, не содержащие в себе элементов th, а затем применили к ним фильтр :odd() и :even(). Заметьте, что порядок расположения селекторов очень важен, наша таблица выглядела бы совсем по-другому если бы мы написали $(‘tr:odd:not([th])’), вместо положенного $(‘tr:not([th]):odd’).

Стилизация ячейки по категории

Со стилизацией наименования пьес, еще проще, главное правильно поставить задачу. То есть фактически нам нужно найти ячейку, содержащую слово «Henry», и применить нужный стиль к ячейке находящейся по соседству, то есть в столбце «Category». Для этого мы напишем соответствующий селектор и применим метод next():

Теперь с применением вышеперечисленных стилей, наша таблица будет выглядеть вот так:

Метод next() применяет нужный нам стиль в пределах одного контейнера только к следующему элементу. А теперь представим, что в нашей таблице появится третий столбик, в котором будет содержаться год издания пьесы. Раскрасить текст всех ячеек, строки содержащий слово «Henry», можно сделать несколькими способами:

1. Получить ячейку, содержащую слово «Henry», и применить стиль ко всем ее «родственным» элементам с помощью метода siblings(). Этот метод выбирает элементы, содержащиеся в одном родительском контейнере

2. Получить ячейку, содержащую слово «Henry», получить ее родителя (tr), затем найти все ячейки внутри родителя, порядковый номер которых больше нуля (где ноль это первая ячейка), и добавить им нужный класс:

3. Получить ячейку, содержащую слово «Henry», получить ее родителя (tr), затем найти все ячейки внутри родителя, не содержащих в себе строк «Henry», и добавить им нужный класс:

4. Получить ячейку, содержащую слово «Henry», получить ее родителя (tr), затем найти вторую дочернюю ячейку, применить к ней нужный класс, сбросить на начало, найти третью дочернюю ячейку и применить к ней нужный класс:

Все эти способы приведут к одинаковому результату:

Если быть честным, не все из представленных способов комбинации селекторных выражений и методов рекомендованы. Фактически четвертый способ совершенно нелепый. Это просто пример, иллюстрирующий насколько гибкими могу быть методы доступа к DOM.

Сцепление

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

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

40 комментариев

Спасибо, хорошая растолковка. Особенно пригодилась конструкция вида $(‘tr:not([th]):even’).addClass(‘even’);
Как раз подобное и искал.

Источник