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();

Далее: Контекст JavaScript - Предостережения