Главная » Статьи » Web-программирование » JQuery

jQuery. Работа с css свойствми элемента
Code (Java Script)
$("div").click(function () {
  var color = $(this).css("background-color");
  $("#result").html("Цвет этого div'а <span>"
  + color + "</span>.");
});  

Css (properties)

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

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

Посмотрите этот пример.
Если указатель мыши проходит над параграфом, то для этого параграфа будет установлен желтый фон и жирное начертание текста. Когда же указатель мыши выходит за пределы параграфа - фон изменяется на серый, начертание текста становится нормальным, а сам текст становится синего цвета.

Code (Java Script)
$("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.

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

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

Offset()

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

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

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

Code (Java Script)
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.

Code (Java Script)
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 и заодно изменяется цвет.

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

width()

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

Получает текущее значение ширины в пикселах для первого элемента в наборе. Начиная с версии jQuery 1.2, этот метод позволяет найти ширину для window и document.

В этом примере мы получаем несколько значений высоты. Функция showWidth вспомогательная, просто для вывода значений в элемент div.

Code (Java Script)
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 и заодно изменяется цвет.

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


Надеюсь эта информация пригодится многим.

Источник: Сайт программистов Proger.in.ua


Категория: JQuery | Добавил: likbezz (13.05.2010) | Автор: Flesh
Просмотров: 7871 | Комментарии: 2 | Теги: CSS, метод, div, значений, Значения, jQuery, примере, свойства, элемента, получаем
Всего комментариев: 2
0  
1  eleklim [Материал[13.05.2010]

Ну... это все - точно - не для средних умов... wacko

0  
2  likbezz [Материал[13.05.2010]

Quote (eleklim)
Ну... это все - точно - не для средних умов...

... А вот и ошибаетесь ... Это-то, как раз и есть основы ... А именно с основ, «средние» умы ... потихоньку продвигаются в сторону «продвинутых» ...
Конечно, не всем это удаётся, но, стремится стоит ...

Flesh

Ответ:

Test

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]