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

В 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

Вкладка 1

Вкладка 2

Вкладка 3

Вкладка 4

Итак, html-код:

<html>
  <head>
    <title>jQuery</title>
    <link rel="stylesheet" type="text/css" href="cascade.css">
  <script type="text/javascript" src="jquery-1.7.1.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
      <div>
<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. Внешний вид пропишем на странице cascade.css

 .vkl{
    float:left;
    width="99%";
    height:28px;
    background:#49A62E;
    color:white;
    font-size:20px;
    border-right:1px solid white;
    padding-left:10px;
}
#content{
    width="99%";
    height:100px;
    background:#A69927;
}
.selected{
   background:#A69927;
}

Осталось самое интересное, а именно функция chang():

function chang(s){
    $('.selected').removeClass('selected');
    $(s).addClass('selected');
}

Итак, как же работает эта функция? Сначала ищется элемент, который имеет класс selected, и этот класс у него убирается. Затем (вторая строка) выделенному элементу (он находится по id, переданному в функцию в качестве параметра s) добавляется класс selected. Вот так все просто.

1 2 3 4 5 6