Как создать свой сайт → Уроки jQuery → Урок 4. Методы для работы с CSS-стилями

jQuery - Урок 4. Методы для работы с CSS-стилями

В jQuery имеется три категории методов: одни манипулируют с элементами, подходящими по шаблону; вторые возвращают значения элемента, а третьи изменяют сами элементы.

Сегодня рассмотрим методы, которые используются для CSS-стилей.

Итак, чтобы добавить какому-либо элементу стиль, необходимо воспользоваться следующим методом:

.css(name,value)

Пример:
$("div").css("border", "1px solid blue");
Данная инструкция обведет div синей рамкой.

В качестве параметров здесь используются названия и значения, применимые в CSS: background, border, font-style, color и т.д.

Если необходимо задать для элемента несколько CSS-правил, то лучше использовать следующую конструкцию:

.css({properties})

Пример:
$("div").css({ border:"1px solid blue", fontWeight:"bolder", backgroundColor:"red" });
Данная инструкция обведет div синей рамкой, сделает фон красным, а текст - жирным.

Обратите внимание, что для сложносоставных свойств CSS вроде font-weight и background-color используются иэ эквиваленты из JS: fontWeight, backgroundColor и т.д.

Перечислим другие методы для работы со стилями:
  • .addClass(class)

    Пример:
    $("p:last").addClass("main");
    Данная инструкция добавит класс main к последнему элементу параграфа.


  • .removeClass(class)

    Пример:
    $("p:even").removeClass("main");
    Данная инструкция удалит класс main из всех четных параграфов.


  • .toggleClass(class)

    Пример:
    $("p").toggleClass("main");
    Данная инструкция удалит класс main из всех параграфов, если он присутствует. И добавит этот класс, если он отсутствует.


  • .offset()

    Пример:
    var offDiv=$("div").offset();
    Данная инструкция позволяет получить отступы слева и сверху для элемента. Чтобы получить значения конкретного свойства, нужно использовать следующие свойства: offset.left для отступа слева и offset.top - для отступа сверху.


  • .height(value)

    Пример:
    $("div").height(); $("div").height(200);
    Данная инструкция позволяет получить (первая строка) и задать (вторая строка) высоту элемента.


  • .width(value)

    Пример:
    $("div").width(); $("div").width(200);
    Данная инструкция позволяет получить (первая строка) и задать (вторая строка) ширину элемента.

    Еще пример:
    var widDiv=$("div").width(); $("div.fir").width(300);
    Первая строка запишет в переменную widDiv значение ширины первого div-а. Вторая инструкция задаст div-ам класса fir ширину в 300 пикселов.

    Это очень интересная особенность методов jQuery: они используются, как для задания параметров (когда принимаются 2 аргумента), так и для получения значений этих параметров (если передается один аргумент).


Давайте, используя полученные знания сделаем меню с вкладками, вот такого вида (пощелкайте по вкладкам):

jQuery - CSS

Вкладка 1
Вкладка 2
Вкладка 3
Вкладка 4
Итак, html-код страницы следующий:
<html> <head> <title>jQuery</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <h2>jQuery - CSS</h2> <div id="vkladki"> <div class="vkl" id="vkladka1" onClick="chang('#vkladka1');">Вкладка 1</div> <div class="vkl" id="vkladka2" onClick="chang('#vkladka2');">Вкладка 2</div> <div class="vkl" id="vkladka3" onClick="chang('#vkladka3');">Вкладка 3</div> <div class="vkl" id="vkladka4" onClick="chang('#vkladka4');">Вкладка 4</div> </div> <div style="clear: both"></div> <div id="content"></div> <div style="clear: both"></div> </body> </html>
Как видно, все вкладки имеют единый стиль, определяемый классом vkl, а выделенная вкладка имеет класс selected. Внешний вид пропишем на странице style.css
.vkl{ float:left; width:140px; height:28px; background:#E5BA83; color:white; font-size:20px; border-right:1px solid white; padding-left:10px; } #content{ width:603px; height:100px; background:#CCA675; } .selected{ background:#CCA675; }
Осталось самое интересное, а именно функция chang():
function chang(s){ $('.selected').removeClass('selected'); $(s).addClass('selected'); }
Итак, как же работает эта функция? Сначала ищется элемент, который имеет класс selected, и этот класс у него убирается. Затем (вторая строка) выделенному элементу (он находится по id, переданному в функцию в качестве параметра s) добавляется класс selected. Вот так все просто.

В следующем уроке узнаем, как с помощью jQuery вставлять целые куски html-кода на страницу и манипулировать ими.



Предыдущий урок Вернуться в раздел Следующий урок 
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.