Переключить класс, добавив имя класса при щелчке по элементу и удалив при щелчке за пределами

Опубликовано: 30 Ноября, 2021

В этой статье задача состоит в том, чтобы переключить класс CSS при щелчке по этому элементу и удалить этот конкретный класс при щелчке за пределами этого элемента, то есть в любом другом месте документа HTML.

Подход: это легко сделать с помощью JavaScript, выполнив следующие шаги:

Сначала мы выберем элемент, на котором должен быть переключен класс, и весь HTML-документ с помощью метода querySelector ().
Затем нам нужно добавить прослушиватели событий «щелчок» к обоим выбранным элементам.
В прослушиватель событий элемента, на который нужно щелкнуть, мы добавим требуемый класс CSS с помощью метода classList.add ().
В прослушивателе событий HTML-документа мы сначала проверим, является ли выбранная цель указанным выше обязательным элементом, а затем удалим класс с помощью метода classList.remove (), тем самым переключая класс при щелчке за пределами вышеуказанного элемента.

Пример: В этом примере в документе HTML определена кнопка, к которой «активный» класс CSS будет добавлен после нажатия на нее. Этот «активный» класс также будет удален с кнопки, как только мы щелкнем где-нибудь в HTML-документе.

HTML

 <!DOCTYPE html>
 < html >
 
< head >
    < style >
        button {
            background-color: green;
            color: white;
            padding: 10px 24px;
            font-size: 18px;
            border: none;
            font-weight: bold;
            transition: all 0.4s;
            margin: 300px;
        }
 
        .active {
            background-color: black;
        }
    </ style >
 </ head >
 
< body >
    < button >GeeksforGeeks</ button >
 
    < script >
        // Select the button on which the
        // class has to be toggled
        const btn = document.querySelector("button");
 
        // Select the entire HTML document
        const html = document.querySelector("html");
 
        // Add an event listener for
        // a click to the button
        btn.addEventListener("click", function (e) {
 
            // Add the required class
            btn.classList.add("active");
        });
 
        // Add an event listener for a
        // click to the html document
        html.addEventListener("click", function (e) {
 
            // If the element that is clicked on is
            // not the button itself, then remove
            // the class that was added earlier
            if (e.target !== btn)
                btn.classList.remove("active");
        });
    </ script >
 </ body >
 
</ html > 

Выход:

Technical Scripter JQuery Picked HTML CSS-Misc HTML-Misc CSS

Переключить класс, добавив имя класса при щелчке по элементу и удалив при щелчке за пределами

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ