CSS, Стилизация и Измерения с jQuery
jQuery включает удобный способ получать и устанавливать CSS свойства элементов.
Получение свойств CSS.
$( "h1" ).css( "font-size" );
// Также работает.
Установка свойств CSS.
Установка отдельного свойства.
Установка нескольких свойств.
Отметьте стиль параметра на второй строке – это - объект, который содержит несколько свойств. Это - распространенный способ передавать несколько аргументов функции, и многие методы установщиков jQuery принимают объекты для установки сразу нескольких значений.
Свойства CSS, которые обычно включают дефис, должны быть в нотации верблюда в JavaScript. Например, свойство CSS font-size
выражается как fontSize
, когда используется в качестве имени свойства в JavaScript. Однако, это не применяется при передаче имени свойства CSS методу .css()
в виде строки – в этом случае, как нотация верблюда, так и написание через дефис будут работать.
Не рекомендуется использовать .css()
в качестве установщика в производственном (рабочем) коде, но передаваемые в объекте для установки CSS, свойства CSS будут в нотации верблюда вместо того, чтобы использовать дефис.
Использование CSS Классов для Стилизации
Как получатель, .css()
метод ценен. Однако, его нужно избегать как установщик в рабочем коде, потому что обычно лучше хранить информацию о стилях вне кода JavaScript. Вместо этого запишите правила CSS для классов, которые описывают различные визуальные состояния, и затем изменяйте класс на элементе.
Работа с классами:
var $h1 = $( "h1" );
$h1.addClass( "big" );
$h1.removeClass( "big" );
$h1.toggleClass( "big" );
if ( $h1.hasClass( "big" ) ) {
...
}
Классы могут также быть полезными для хранения информации состояния элемента, такой как указание, что элемент выбран.
Размеры
jQuery предлагает множество методов для получения и изменения размеров и информации о положении элемента.
Код ниже показывает краткий обзор функциональности размеров в jQuery. Для более подробных данных о методах размеров jQuery см. документацию на api.jquery.com.
Основные Методы размеров.
Устанавливает ширину всех элементов <h1>:
$( "h1" ).width( "50px" );
Получает ширину первого элемента <h1>:
$( "h1" ).width();
Устанавливает высоту всех элементов <h1>:
$( "h1" ).height( "50px" );
Получает высоту первого элемента <h1>:
Gets the height of the first <h1> element:
$( "h1" ).height();
Возвращает объект, содержащий информацию о положении, для первого <h1> относительно его "смещения (позиционирования) родительского элемента":
$( "h1" ).position();