JQuery добавляем свойства CSS. JQuery добавляем свойства CSS Jquery изменение стиля элемента

На нескольких примерах рассмотрим добавление свойств CSS на страницу сайта с помощью jQuery . Разбираем плюсы и минусы двух основных способов изменения стилей на странице.

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

1. Изменение отдельных свойств

Изменим элементы со свойствами class-one и .class-two при наведении на элемент с классом .сайт .

$ (".сайт" ) . mouseover (function () { $ (".class-one, .class-two" ) . css ("width" , "30%" ) ; $ (".class-one, .class-two" ) . css ("height" , "240px" ) ; } ) ;

Изменение классов

Этот способ предпочтительнее и удобнее, если требуется изменить много различных свойств с помощью jQuery. Если все эти свойства прописать в самом js файле , то можно серьёзно усложнить читаемость и понимание всего кода. Лучше прописать все стили в CSS файле, а с помощью jQuery менять их.

При возникновении события поменяем стиль .class-one на стили .class-one .class-two :

$ (".сайт" ) . on ("mouseover mousemove" , function () { $ (".class-one" ) . removeClass () . addClass ("class-one class-two" ) ; } ) ;

Если внимательно посмотреть на код выше, можно задаться вопросом, зачем мы удаляем класс class-one и его же затем возвращаем вместе с другим.

Так нужно, потому что в этом коде было решено .class-one использовать как «ярлык», чтобы в дальнейшем можно было обрабатывать этот элемент не вспоминая какой у него новый класс.

Давно в моем блоге не было статей про JQuery. Нет, статьи с его применением были, конечно, но он там выступал в роле вспомогательного инструмента, а рубрика «Изучаем JQuery» тем временем покрывалась пылью. А между тем, пришло время, перейти к самой интересной части обучения – добавлению различных эффектов, именно то, из-за чего его берутся изучать многие люди. И в сегодняшней статье вы узнаете, как изменять CSS-свойства «на лету».

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

Однако бывают случаи, когда вам нужно изменить стиль CSS, которого нет в файле стилей, или который описать нельзя. Для таких случаев в JQuery существует метод.css() .

Для того чтобы получить значение CSS-свойства, мы должны просто передать имя свойства в качестве строки, примерно так. css(‘backgroundColor’) .

Свойства, состоящие из нескольких слов, можно записывать через дефис, как в CSS-файле (background-color) , или разным регистром, как они записываются в DOM (backgroundColor). Для установки свойств CSS, метод.css() использует два способа. Первый способ – два параметра, название CSS-свойства и его значение, через запятую. Второй – карта, состоящая из пар свойство-значение.

Css("property","value") .css({property1: "value1", "property-2": "value2"})

Мы будем использовать метод. css() , точно так же как использовали.addClass() – объединим их селектором и привяжем событие. Давайте разберем метод.css() на конкретном примере. Нам понадобится следующая HTML-разметка:

И немного CSS:

#textbox{ border: 1px solid #000; background: #DFECFF; margin: 20px auto; text-align: left; padding: 10px; width: 400px; color: #0000a0; font-style: italic; clear: both; }

В результате у нас появится вот такая страничка:

На странице присутствуют две кнопки – для увеличения и уменьшения шрифта. В принципе здесь можно использовать метод.addClass() , описанный в предыдущей статье, но давайте немного усложним задачу, и представим, что нам нужно уменьшать или увеличивать текст, при каждом нажатии соответствующей кнопки. Это конечно можно реализовать, через описание отдельного класса для каждого клика, но гораздо проще будет получать текущий размер текста, и увеличивать (уменьшать) его по заданному значению.

Наш код традиционно начинается с $(document).ready() и обработчика событий кнопки $("#increase").click() :

$(document).ready(function(){ $("#increase").click(function(){ }); })

Далее, размер шрифта можно легко получить через с помощью $(“#textbox”).css("fontSize") . Однако, возвращаемое значение будет содержать как число так и единицы измерения, поэтому нам нужно сохранить каждую часть в собственную переменную, после чего мы сможем увеличить число, и заново присоединить к нему единицы измерения. Также, мы планируем использовать объект JQuery более одного раза, следовательно, было бы неплохо и его сохранить в переменную.

$(document).ready(function() { $("#increase").click(function() { var $speech = $("div.speech"); var currentSize = $speech.css("fontSize"); var num = parseFloat(currentSize, 10); var unit = currentSize.slice(-2); num *= 1.4; $speech.css("fontSize", num + unit); }); });

Первая строка внутри функции.click() сохраняет переменную c блоком #textblock .

Обратите внимание, что мы используем символ $ , в имени переменной $speech . Поскольку $ — это допустимый символ для переменных JavaScript, мы можем использовать его в качестве напоминания, что это переменная хранит объект JQuery. Следующая строка – сохраняет в переменную размер шрифта блока #textblock – например, 12px.

После этого мы используем parseFloat() и slice() . Функция parseFloat() используется для конвертирования строковых значений в числовые (десятичные). Например, строку 12, будет конвертирована в число 12. Если строка начинается с нечислового символа, parseFloat() вернет NaN, что означает: «Не числовое значение» (Not a Number ).Второй аргумент функции parseFloat() , гарантирует, что число будет конвертировано именно в десятеричное значение.

Метод.sice() возвращает подстроку, начинающуюся с определенного символа строки. Поскольку название единиц измерения, которые мы используем длиной в два символа (px), мы указываем, что подстрока должна начинаться с двух последних символов основной строки.

Все что нам осталось это умножить полученное значение переменной num на 1.4, а затем установить размер шрифта, путем склеивания двух переменных num и unit:

$(document).ready(function(){ $("#increase").click(function(){ var $speech = $("#textbox"); var currentSize = $speech.css("fontSize"); var num = parseFloat(currentSize, 10); var unit = currentSize.slice(-2); num*=1.4; $speech.css("fontSize", num + unit); }); })

Теперь после клика по кнопке «Увеличить», текст в блоке увеличивается, как на представленном скриншоте:

Следующий клик по этой же кнопке, продолжает увеличивать текст в блоке.

Для того чтобы сделать работающей кнопку «Уменьшить», мы будем делить значение переменной – num/=1.4 . И чтобы не увеличивать размер кода, мы можем объединить два обработчика событий.click() в один, через класс button . Затем, после установки переменных, мы легко можем умножать или делить, основываясь на ID кнопки, которая была нажата. Вот как должен выглядеть код:

$(document).ready(function(){ $("input").click(function(){ var $speech = $("#textbox"); var currentSize = $speech.css("fontSize"); var num = parseFloat(currentSize, 10); var unit = currentSize.slice(-2); if (this.id=="increase"){ num*=1.4; } else if(this.id=="decrease"){ num/=1.4; } $speech.css("fontSize", num + unit); }); })

Выше был приведен простейший пример использования метода.css() на практике. Можно привести еще один пример использования этого метода.

Разделение пунктов меню

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

Для такого меню потребуется следующая HTML-разметка:

Ul{ list-style: none; } ul li{ list-style: none; float: left; background: #DFECFF; display: block; padding: 10px; border-right: 1px gray solid; } ul li a{ text-decoration: none; color: #000; }

Вот так будет выглядеть наше меню:

А для того чтобы убрать правый разделитель у последнего пункта меню (четвертый пункт), можно использовать вот такой код:

$(document).ready(function(){ $("#menu ul li:last").css("border-right", "none"); });

И в результате у нас получается вот такое меню:

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

Сохраните эту страницу для тестирования приведенных ниже примеров.

Библиотека jQuery предоставляет ряд удобных специализированных методов, значительно упрощающих работу со стилями CSS. Одним из наиболее широко используемых методов такого рода является метод css() , краткое описание которого приведено в таблице ниже:

При считывании значений свойств с помощью метода css() вы получаете значение свойства, которое имеет первый из элементов, содержащихся в объекте jQuery. В то же время при установке свойства вносимое изменение применяется ко всем элементам набора. Пример простейшего использования метода css() приведен ниже:

$(function() { var sizeVal = $("label").css("font-size"); console.log("Размер шрифта: " + sizeVal); $("label").css("font-size", "1.5em"); });

В этом сценарии мы выбираем все элементы label, получаем с помощью метода css() значение свойства font-size и выводим его на консоль. Затем мы вновь выбираем все элементы label и присваиваем новое значение этого же свойства всем элементам.

Несмотря на то что в сценарии используется фактическое имя свойства (font-size), а не его запись с применением регистра, т.е. форма записи, в которой это свойство определено в объекте HTMLElement (свойство fontSize), оно также воспринимается корректно, поскольку jQuery поддерживает оба варианта.

В результате работы данного сценария на консоль выводится следующий результат:

Установка для свойства значения в виде пустой строки ("") равносильна удалению этого свойства из атрибута style данного элемента.

Установка одновременно нескольких свойств CSS

Существуют два способа одновременной установки нескольких CSS-свойств. Первый из них - это формирование цепочки вызовов метода css(), как показано ниже:

$(function() { $("label").css("font-size", "1.5em").css("color", "blue"); });

В этом сценарии устанавливаются значения свойств font-size и color. Того же эффекта можно добиться, используя объект отображения, как показано в примере ниже:

$(function() { var cssVals = { "font-size": "1.5em", "color": "blue" }; $("label").css(cssVals); });

Оба варианта сценария приводят к одному и тому же результату, показанному на рисунке:

Установка относительных значений

В качестве аргументов метод css() может принимать также относительные значения. Они представляют собой числовые значения, которым предшествуют знаки += и -= и которые добавляются или вычитаются из текущего значения. Этот прием можно использовать лишь в отношении числовых величин. Соответствующий пример приведен ниже:

$(function() { $("label:odd").css("font-size", "+=5") $("label:even").css("font-size", "-=5") });

Относительные значения выражаются в тех же единицах, что и значения свойств. В данном случае размер шрифта увеличивается на 5 пикселей для нечетных элементов label и уменьшается на ту же величину для четных. Результат показан на рисунке:

Установка свойств с помощью функции

Можно устанавливать значения свойств динамически, передавая функцию методу css(). Соответствующий пример приведен ниже:

$(function() { $("label").css("border", function(index, currentValue) { if ($(this).closest("#row1").length > 0) { return "thick solid red"; } else if (index % 2 == 1) { return "thick double blue"; } }); });

Аргументами, передаваемыми функции, являются индекс элемента в наборе и текущее значение свойства. Переменная this ссылается на объект HTMLElement, соответствующий элементу, а функция возвращает значение, которое требуется установить.

Использование специализированных методов для работы со свойствами CSS

В дополнение к методу css() в jQuery определен ряд специализированных методов, предназначенных для получения или установки значений конкретных свойств. Перечень этих методов приведен в таблице ниже:

Методы для работы с конкретными свойствами CSS

Метод	Описание
height()	Возвращает высоту (в пикселях) первого из элементов, содержащихся в объекте jQuery
height(значение)	Устанавливает высоту для всех элементов, содержащихся в объекте jQuery
innerHeight()	Возвращает внутреннюю высоту (т.е. высоту элемента, включая внутренние отступы, но исключая границы и поля) первого из элементов, содержащихся в объекте jQuery
innerWidth()	Возвращает внутреннюю ширину (т.е. ширину элемента, включая внутренние отступы, но исключая границы и поля) первого из элементов, содержащихся в объекте jQuery
offset()	Возвращает координаты первого из элементов, содержащихся в объекте jQuery, относительно начала документа
outerHeight(логическое_значение)	Возвращает высоту первого из элементов, содержащихся в объекте jQuery, включая внутренние отступы и границы. Аргумент определяет, должен ли при этом учитываться размер полей
outerWidth(логическое_значение)	Получает ширину первого из элементов, содержащихся в объекте jQuery, включая внутренние отступы и границы. Аргумент определяет, должен ли при этом учитываться размер полей
position()	Возвращает координаты первого из элементов, содержащихся в объекте jQuery, относительно его родительского элемента, у которого задан тип позиционирования
scrollLeft(), scrollTop()	Получает значение отступа прокрутки слева или сверху для первого из элементов, содержащихся в объекте jQuery
scrollLeft(значение), scrollTop(значение)	Устанавливает значение отступа прокрутки слева или сверху для всех элементов, содержащихся в объекте jQuery
width()	Получает ширину первого из элементов, содержащихся в объекте jQuery
width(значение)	Устанавливает ширину для всех элементов, содержащихся в объекте jQuery
height(функция), width(функция)	Устанавливает высоту или ширину всех элементов, содержащихся в объекте jQuery, с помощью функции

Названия большинства этих методов говорят сами за себя, однако некоторые из них нуждаются в дополнительных пояснениях. Методы offset() и position() возвращают объект, имеющий свойства top и left , которые указывают положение элемента. Пример использования метода position() приведен ниже.

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

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

css-величине styleName будет присвоено значение value , у всех выбранных элементов.

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

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

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

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

В действии

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

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="http://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 id="list"~gt~ ~lt~li class="item"~gt~Меркурий~lt~/li ~gt~ ~lt~li class="item"~gt~Венера~lt~/li ~gt~ ~lt~li class="item"~gt~Земля~lt~/li ~gt~ ~lt~li class="item"~gt~Марс~lt~/li ~gt~ ~lt~li class="item"~gt~Юпитер~lt~/li ~gt~ ~lt~li class="item"~gt~Сатрурн~lt~/li ~gt~ ~lt~li class="item"~gt~Уран~lt~/li ~gt~ ~lt~li class="item"~gt~Нептун~lt~/li ~gt~ ~lt~li class="item"~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~

Библиотека 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(логическое значение) логическое значение

4.6. Метод.outerHeight()

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

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

4.7. Метод.offset()

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

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

4.8. Метод.position()

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

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