LOGO JQuery
jQuery API: работа библиотеки с CSS свойствами | Учебник JQuery

JQuery CSS

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

.css(name)

Возвращает: String

Возвращает значения для css-свойства, указанного в name, для первого элемента в наборе.

В этом примере, чтобы получить доступ к css-свойству background-color нужно всего лишь кликнуть по элементу div.
$("div").click(function () {
  var color = $(this).css("background-color");
  $("#result").html("Цвет этого div'а <span>" + color + "</span>.");
});
Откройте пример в новом окне и посмотрите исходный код

.css(properties)

Возвращает: jQuery Object

Устанавливает значения для css-свойств всех элементов набора, используя объект, состоящий из пар ключ/значение.

Это наилучший способ установить значения сразу для нескольких css-свойств всех элементов набора.

Посмотрите этот пример.
Если указатель мыши проходит над параграфом, то для этого параграфа будет установлен желтый фон и жирное начертание текста.
Когда же указатель мыши выходит за пределы параграфа - фон изменяется на серый, начертание текста становится нормальным.
$("p").hover(function () {
  $(this).css({
    backgroundColor:"yellow",
    fontWeight:"bolder"
  });
}, function () {
  var cssObj = {
    backgroundColor: "#ddd",
    fontWeight: "",
    color: "rgb(0,40,244)"
  }
  $(this).css(cssObj);
});
Откройте пример в новом окне и посмотрите исходный код

css(name, value)

Возвращает: jQuery Object
Устанавливает значение одного css-свойства для всех элементов набора.

Если в качестве значения какого-либо из css-свойств используется число, оно автоматически конвертируется в значение в пикселах.

В этом примере, для того чтобы изменить цвет текста любого параграфа, используется события mouseover, mouseout.
$("p").mouseover(function () {
	$(this).css("background-color",'red');
})
.mouseout(function(){
	$(this).css("background-color",'#87CEFA');
});
Откройте пример в новом окне и посмотрите исходный код

JQuery Позиционирование

.offset()

Возвращает: Object{top,left}

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

.position()

Возвращает: Object{top,left}

Для первого элемента в наборе получает текущие отступы координаты относительно относительно ближайшего родителя у которого задан тип позиционирования
(css-свойство position равно relative или absolute или fixed).

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

// возвратит координаты первого div-элемента с классом content
// относительно начала страницы.
var offset = $("div.content").offset();
// возвратит координаты первого div-элемента с классом content
// относительно ближайшего родителя с заданным позиционированием.
var position = $("div.content").position();
// устанавливает координаты относительно начала страницы, 
// равные (100, 30) для всех элементов с классом content.
$(".content").offset({top:30, left:100})
В этом примере мы получаем значения отступов для второго параграфа, куда собственно эти значения и подставляем.
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
Откройте пример в новом окне и посмотрите исходный код

.height()

Возвращает: Integer
Получает текущее значение высоты в пикселах для первого элемента в наборе.
Этот метод также позволяет найти высоту для window и document.

В этом примере мы получаем несколько значений высоты.
Функция showHeight вспомогательная, просто для вывода значений в элемент div.
function showHeight(ele, h) {
  $("div").text("Высота элемента "
+ ele + " равна " + h + "px.");
}
$("#getp").click(function () {
  showHeight("paragraph", $("p").height());
});
$("#getd").click(function () {
  showHeight("document", $(document).height());
});
$("#getw").click(function () {
  showHeight("window", $(window).height());
});
Откройте пример в новом окне и посмотрите исходный код

height(val)

Возвращает: jQuery Object
Устанавливает высоту в CSS-свойстве для каждого элемента в наборе.

Если единицы измерения не определены однозначно (например em или %), тогда значение устанавливается в px.

В этом примере по клику на элементе div, для него устанавливается высота в 30px и заодно изменяется цвет.
$("div").one('click', function () {
  $(this).height(30)
  	.css({cursor:"auto", backgroundColor:"green"});
});
Откройте пример в новом окне и посмотрите исходный код

.width()

Возвращает: Integer
Получает текущее значение ширины в пикселах для первого элемента в наборе.
Этот метод также позволяет найти ширину для window и document.

В этом примере мы получаем несколько значений высоты. Функция showWidth вспомогательная, просто для вывода значений в элемент div.
function showWidth(ele, w) {
  $("div").text("Ширина элемента "
+ ele + " равна " + w + "px.");
}
$("#getp").click(function () {
  showWidth("paragraph", $("p").width());
});
$("#getd").click(function () {
  showWidth("document", $(document).width());
});
$("#getw").click(function () {
  showWidth("window", $(window).width());
});
Откройте пример в новом окне и посмотрите исходный код

.width(val)

Возвращает: jQuery Object
Устанавливает ширину в CSS-свойстве для каждого элемента в наборе.

Если единицы измерения не определены однозначно (например em или %), тогда значение устанавливается в px.

В этом примере по клику на элементе div, для него устанавливается ширина в 30px и заодно изменяется цвет.
$("div").one('click', function () {
  $(this).width(30)
  .css({cursor:"auto", "background-color":"blue"});
});
Откройте пример в новом окне и посмотрите исходный код

.scrollTop() .scrollLeft()

С помощью этих функций можно получить или изменить величину вертикального или горизонтального скроллинга элементов на странице.
// возвратит величину вертикального скроллинга первого div-элемента с классом content.
$("div.content").scrollTop();
// устанавливает величину горизонтального скроллинга у всех div-элементов с классом content равной 30.
$("div.content").scrollLeft(30);
Пример использования метода для создания ссылки "наверх"
$(window).scroll(function(){
	if ($(this).scrollTop() > 200) {
		$('#btn_up').show();
	} else {
		$('#btn_up').hide();
	}
});

//Click event to scroll to top
$('#btn_up').click(function(){
	$('html, body').animate({scrollTop : 0},400);
	return false;
});
Пример ссылки наверх

Величина прокрутки измеряется количеством пикселей за пределами экрана: