Добавление класса элементам. Метод addClass() в jQuery


Метод addClass() в jQuery позволяет динамически добавлять нужный класс css определенному элементу или элементам на странице.

Самый простой пример:

1
$("div").addClass("test");

Здесь всем элементам div на странице мы присваиваем класс test. Разумеется, если добавляемый класс не описан в стилях, то вы вряд ли визуально увидите какой-либо эффект от применения данного метода. Рассмотрим более детальный пример:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Пример использования addClass</title>
    <style>
    .red-style {
        color: red;
        font-size: 13px;
    }
    </style>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
    <ul>
        <li>Первый пункт</li>
        <li>Второй пункт</li>
        <li>Третий пункт</li>
    </ul>
    <script>
        $( "li:last" ).addClass( "red-style" );
     </script>
</body>
</html>

В этом примере мы находим последний элемент li и присваиваем ему класс red-style. Теперь текст данного пункта будет выделен красным шрифтом и размером шрифта 13px.

Другие посты

Категория: jQuery

Оставить комментарий


Яндекс.Метрика