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

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: Изменение самого класса. Мы можем использовать два свойства, которые можно использовать для управления классами.Выход:

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

Синтаксис:

document.getElementById("id").classList

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

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

Пример:

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.

  1. Свойство className:это свойство используется для установки массового элемента класса в указанный класс.
Читайте также:  Добавление строки в C++

Синтаксис:

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 у

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

Оцените статью
bestprogrammer.ru
Добавить комментарий

Adblock
detector