jivo banner 468x60jivo banner 728x90jivo banner 930x180smsc banner 468x60smsc banner 728x90smsc banner 930x180skillbox banner 468x60skillbox banner 728x90skillbox banner 930x180

Руководство по добавлению и удалению CSS-классов в jQuery

jQuery предоставляет несколько методов, таких как addClass(), removeClass(), toggleClass() и т. д. для управления CSS-классами, назначенными элементам HTML.

jQuery-метод addClass()

jQuery-метод addClass() добавляет один или несколько классов к выбранным элементам.

В следующем примере класс .page-header добавляется к элементу <h1>, а класс .highlight к элементам <p> с помощью class .hint при нажатии кнопки.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery addClass() Demo</title>
<style>
    .page-header{
        color: red;
        text-transform: uppercase;
    }
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1").addClass("page-header");
        $("p.hint").addClass("highlight");
    });
});
</script>
</head>
<body>
    <h1>Demo Text</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    <p class="hint"><strong>Tip:</strong> Lorem Ipsum is dummy text.</p>
    <button type="button">Add Class</button>
</body>
</html>

Вы также можете добавить несколько классов к элементам одновременно. Просто укажите разделенный пробелами список классов в методе addClass(), например так:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery addClass() Demo</title>
<style>
    .page-header{
        color: red;
        text-transform: uppercase;
    }
    .highlight{
        background: yellow;
    }         
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1").addClass("page-header highlight");
    });
});
</script>
</head>
<body>
    <h1>Hello World</h1>
    <p>The quick brown fox jumps over the lazy dog.</p>
    <button type="button">Add Class</button>
</body>
</html>

jQuery-метод removeClass()

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

В следующем примере класс .page-header удаляется из элемента <h1>, а класс .hint и .highlight — из элементов <p> при нажатии кнопки.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery removeClass() Demo</title>
<style>
    .page-header{
        color: red;
        text-transform: uppercase;
    }
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1").removeClass("page-header");
        $("p").removeClass("hint highlight");
    });
});
</script>
</head>
<body>
    <h1 class="page-header">Demo Text</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    <p class="hint highlight"><strong>Tip:</strong> Lorem Ipsum is dummy text.</p>
    <button type="button">Remove Class</button>
</body>
</html>

Когда метод removeClass() вызывается без аргумента, он удаляет все классы из выбранных элементов. Вот пример:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery removeClass() Demo</title>
<style>
    .page-header{
        color: red;
        text-transform: uppercase;
    }
    .highlight{
        background: yellow;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1").removeClass();
        $("p").removeClass();
    });
});
</script>
</head>
<body>
    <h1 class="page-header">Demo Text</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    <p class="hint highlight"><strong>Tip:</strong> Lorem Ipsum is dummy text.</p>
    <button type="button">Remove Class</button>
</body>
</html>

jQuery-метод toggleClass()

jQuery-метод toggleClass() добавляет или удаляет один или несколько классов из выбранных элементов таким образом, что, если у выбранного элемента уже есть класс, он удаляется; если элемент не имеет класса, то он добавляется, то есть переключает классы.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery toggleClass() Demo</title>
<style>
    p{
        padding: 10px;
        cursor: pointer;        
        font: bold 16px sans-serif;
    }
    .highlight{
        background: yellow;
    }         
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).toggleClass("highlight");
    });
});
</script>
</head>
<body>
    <p>Нажмите, чтобы переключить подсветку.</p>
    <p class="highlight">Нажмите, чтобы переключить подсветку.</p>
    <p>Нажмите, чтобы переключить подсветку.</p>
</body>
</html>

Вы узнаете о манипулировании свойствами CSS в Руководство по получению и установке CSS-свойств в jQuery.

smsc banner 480x320smsc banner 728x90smsc banner 120x600kwork banner 480x320kwork banner 728x90kwork banner 120x600flexbe banner 480x320flexbe banner 728x90flexbe banner 120x600

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Руководство по синтаксису в jQuery

Оператор jQuery обычно начинается со знака доллара ($) и заканчивается точкой с запятой (;). В jQuery знак доллара ($) — это просто псевдоним для jQuery. Давайте рассмотрим следующий пример кода, который демонстрирует синтаксис кода на jQuery. Приведенный выше пример просто отображает предупреждающее сообщение «Hello World!» пользователю. Объяснение кода Давайте разберем приведенный выше пример подробнее. Тег…
Подробнее

Руководство по callback-функциям в jQuery

Операторы JavaScript выполняются построчно. Но, поскольку для завершения эффекта jQuery требуется некоторое время, код следующей строки может выполняться, пока предыдущий эффект все еще выполняется. Чтобы этого не происходило, jQuery предоставляет функцию обратного вызова (Callback) для каждого метода. Функция обратного вызова — это функция, которая выполняется после завершения эффекта. Функция обратного вызова передается в качестве аргумента…
Подробнее

Руководство по методу animate() в jQuery

jQuery-метод animate() используется для создания пользовательских анимаций. Метод animate() обычно используется для анимации числовых CSS-свойств, таких как width, height, margin, padding, opacity, top, left и т. д., Но нечисловые свойства, такие как color или background-color нельзя анимировать с помощью базовой функциональности jQuery. Не все CSS-свойства являются анимируемыми. Как правило, любое CSS-свойство, которое принимает значения в…
Подробнее