CSS, Стилизация и Измерения с jQuery

jQuery включает удобный способ получать и устанавливать CSS свойства элементов.

Получение свойств CSS.

Пример

$( "h1" ).css( "fontSize" );
// Возвращает строку, такую как "19px".

Попробуйте Сами »
$( "h1" ).css( "font-size" ); // Также работает.

Установка свойств CSS.

Установка отдельного свойства.

Пример

$( "h1" ).css( "fontSize", "100px" );

Попробуйте Сами »

Установка нескольких свойств.

Пример

$( "h1" ).css({
    fontSize: "100px",
    color: "red"
});

Попробуйте Сами »

Отметьте стиль параметра на второй строке – это - объект, который содержит несколько свойств. Это - распространенный способ передавать несколько аргументов функции, и многие методы установщиков 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 - Предостережения

Смотрите также
Комментарии
Написать

(обязательно)

(обязательно)

Это не спам (обязательно)