В сегодняшней статье по документации jQuery будет разобрана работа библиотеки с CSS свойствами. Мы будем учиться получать и устанавливать значения 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
Устанавливает значения для 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
Устанавливает значение одного css-свойства для всех элементов набора. Если в качестве значения какого-либо из css-свойств используется число, оно автоматически конвертируется в значение в пикселах.

В этом примере, для того чтобы изменить цвет текста любого параграфа, используется событие mouseover.

$("p").mouseover(function () {
  $(this).css("color","red");
});

Откройте пример в отдельном окне и посмотрите исходный код.

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

offset()

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

В этом примере мы получаем значения отступов для второго параграфа, куда собственно эти значения и подставляем.

var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );

Откройте пример в отдельном окне и посмотрите исходный код.

Высота и ширина:

height()

возвращает: Integer
Получает текущее значение высоты в пикселах для первого элемента в наборе. Начиная с версии jQuery 1.2, этот метод позволяет найти высоту для 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
Устанавливает высоту в CSS-свойстве для каждого элемента в наборе. Если единицы измерения не определены однозначно (например ‘em’ или ‘%’), тогда значение устанавливается в px.

В этом примере по клику на элементе div, для него устанавливается высота в 30px и заодно изменяется цвет.

$("div").one('click', function () {
  $(this).height(30).css({cursor:"auto", backgroundColor:"green"});
});

Откройте пример в отдельном окне и посмотрите исходный код.

width()

возвращает: Integer
Получает текущее значение ширины в пикселах для первого элемента в наборе. Начиная с версии jQuery 1.2, этот метод позволяет найти ширину для 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
Устанавливает ширину в CSS-свойстве для каждого элемента в наборе. Если единицы измерения не определены однозначно (например ‘em’ или ‘%’), тогда значение устанавливается в px.

В этом примере по клику на элементе div, для него устанавливается ширина в 30px и заодно изменяется цвет.

$("div").one('click', function () {
  $(this).width(30).css({cursor:"auto", "background-color":"blue"});
});

Откройте пример в отдельном окне и посмотрите исходный код.

Вот и все на сегодня. Статья получилась не очень большая, но, надеюсь эта информация пригодится многим.

google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru