Как изменить стиль/класс элемента с помощью JavaScript?

В этой статье мы знаем, как изменить стиль/класс элемента. Если вы хотите создать классный веб-сайт или приложение, то пользовательский интерфейс играет важную роль. Мы можем изменить, добавить или удалить любое свойство CSS из элемента HTML при возникновении любых событий с помощью JavaScript. Есть два решения, которые позволяют решить эту проблему.

Подход 1: Изменение CSS со свойствами с помощью стиля

Синтаксис:

document.getElementById("id").style.property = новый_стиль

Пример. В этом случае мы наблюдаем появление обнаружения номера PAN. Мы возьмем значение входа и проверяем его с помощью шаблона регулярного выражения. Если необходимо, с помощью JavaScript добавьте встроенный стиль в тег <p>. В случае необходимости добавления другого стиля к тегу <p>.

HTML

<!DOCTYPE html>

<html lang="en">

<body>

    <h1 style="color: green;">

        GeeksforGeeks

    </h1>

    <h2>

        How can the style/class of

        an element be changed?

    </h2>

    <b>Validate Pan Number</b>

    <input type="text" id="pan" />

    <p></p>

    <button id="submit">Validate</button>

    <script>

        const btn = document.getElementById("submit");

        btn.addEventListener("click", function () {

            const pan = document.getElementById("pan").value;

            const para = document.querySelector("p");

            let regex = /([A-Z]){5}([0-9]){4}([A-Z]){1}$/;

            if (regex.test(pan.toUpperCase())) {

                para.innerHTML = "Hurrey It's correct";

                // Inline style

                para.style.color = "green";

            } else {

                para.innerHTML = "OOps It's wrong!";

                // Inline style

                para.style.color = "red";

            }

        });

    </script>

</body>

</html>

Выход:

Подход 2: Изменение самого класса. Мы можем использовать два свойства, которые можно использовать для управления классами.Выход:

Свойство classList. СвойствоclassList доступно только для чтения и возвращает имена классов CSS-элемент в виде объекта DOMTokenList.

Синтаксис:

document.getElementById("id").classList

Вы можете использовать описанные ниже методы для добавления классов, извлечения классов и перехода между классами, соответственно.

Метод add():добавляет один или несколько классов.
Метод remove():на обходе одного или нескольких классов.
Метод toggle():если не существует, он производит его и возвращает класс true. Он класс реакции и возвращает ложь. Второй аргумент вызывает класс быть добавленным или удаленным.

Пример:

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <style>

        .hide {

            display: none;

        }

        .blueColor {

            color: blue;

        }

    </style>

</head>

<body>

    <h1 style="color: green;">

        GeeksforGeeks

    </h1>



    <h2>

        How can the style/class of

        an element be changed?

    </h2>



    <h3>Hide and Show the Para</h3>



    <p>

        GeeksforGeeks is a computer science portal

        for geeks. This platform has been designed

        for every geek wishing to expand their

        knowledge, share their knowledge, and is

        ready to grab their dream job. GFG have

        millions of articles, live as well

        as online courses, thousands of tutorials

        and much more just for the geek inside you.

    </p>



    <button id="hide">Hide</button>

    <button id="show">Show</button>

    <button id="color">Change Color</button>

    <script>

        const btn_hide = document.getElementById("hide");

        const btn_show = document.getElementById("show");

        const btn_color = document.getElementById("color");

        const para = document.querySelector("p");

        btn_hide.addEventListener("click", function () {

            para.classList.add("hide");

        });

        btn_show.addEventListener("click", function () {

            para.classList.remove("hide");

        });

        btn_color.addEventListener("click", function () {

            para.classList.toggle("blueColor");

        });

    </script>

</body>

</html>

Выход:

В приведенном выше выявлении мы наблюдаем два класса манипуляций «hide» и «toggleColor», которые включают элемент и меняют цвет на синий соответственно. При записи записи «Скрыть» класс закрытия раскрывается к тегу «p», который скрывает его. При регистрации записи «Показать» раскрытие информации класс защиты из тега «p». Когда кнопка «Изменить цвет» нажимается один раз, она производит класс «toggleColor» к тегу p (который делает цвет текста синим), а при повторном просмотре проходит класс toggleColor.

Свойство className:это свойство используется для установки массового элемента класса в указанный класс.

Синтаксис:

document.getElementById("id").className = класс

Пример:

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <style>

        .colorBlue {

            color: blue;

        }

        .colorRed {

            color: red;

        }

    </style>

</head>

<body>

    <h1 style="color: green;">

        GeeksforGeeks

    </h1>



    <h2>

        How can the style/class of

        an element be changed?

    </h2>



    <h3>className Example</h3>



    <p class="colorBlue">

        GeeksforGeeks is a computer science portal

        for geeks.This platform has been designed

        for every geek wishing to expand their

        knowledge, share their knowledge and is

        ready to grab their dream job. GFG have

        millions of articles, live as well

        as online courses, thousands of tutorials

        and much more just for the geek inside you.

    </p>



    <button id="submit">Change Color</button>

    <script>

        const btn = document.getElementById("submit");

        const para = document.querySelector("p");

        btn.addEventListener("click", function () {

            para.className = "colorRed";

        });

    </script>

</body>

</html>

Выход:

В классическом представлении выше существующий ColorBlue создается в классе colorRed с использованием свойства className, которое изменяет цвет шрифта с синего на красный.