Как изменить цвет элемента HTML в JavaScript?

Динамическое изменение цвета HTML-элемента в JavaScript улучшает взаимодействие с пользователем. Чтобы изменить цвет HTML-элемента с помощью JavaScript, мы используем DOM для доступа и изменения его свойств стиля, что позволяет динамически изменять цвет. В этой статье мы увидим, как изменить цвет HTML-элемента с помощью Javascript, а также разберемся с различными подходами к его реализации.

Для начала мы должны решить, на каком элементе HTML мы хотим сосредоточиться. Этого можно добиться, выбрав элемент с помощью различных методов, таких как getElementById, getElementsByClassName или querySelector. Получив ссылку на нужный элемент, мы можем использовать атрибут стиля для доступа к его свойствам CSS, в частности к атрибуту цвета.

getElementById () возвращает элемент на основе его уникального идентификатора. Вы можете использовать его, чтобы указать, какой элемент вы хотите изменить, а style.color используется для изменения цвета элемента путем доступа к его свойству стиля. Вы можете изменить цвет текста элемента, изменив значение свойства color.

Синтаксис:

element.style.color = "green";

Подход 1. В этом подходе мы встроили код JavaScript непосредственно в документ HTML с помощью тега <script> в разделе <body>. Функция changeColor () выбирает элемент «gfg» с помощью document.getElementById() и устанавливает для свойства style.color значение «зеленый». Мы также добавили элемент кнопки с атрибутом onclick , который вызывает функцию changeColor() при нажатии. В кнопку мы добавили анимацию, когда мы наводим курсор на кнопку, она преобразуется в 0px, -5px.

Пример: этот пример иллюстрирует изменение цвета HTML-элемента путем реализации метода getElementById() в Javascript.

HTML

<!DOCTYPE html>

<html>

<head>

    <title>Change Font Color</title>

    <style>

        button {

            margin-top: 0.5rem;

            padding: 10px 10px 10px 10px;

            background: crimson;

            color: white;

            border: none;

            border-radius: 6px;

            transition: all linear 0.5s;

            cursor: pointer;

        }

        button:hover {

            transform: translate(0px, -5px);

        }

    </style>

</head>

<body>

    <div id="gfg">

        <h1>

              Welcome To GeeksForGeeks!!

          </h1>

    </div>

    <button onclick="changeColor()">

          Change Color

      </button>



    <script>

        function changeColor() {

            var gfg = document.getElementById("gfg");

            gfg.style.color = "green";

        }

    </script>

</body>

</html>

Выход:

Подход 2. В этом подходе мы добавили раскрывающееся меню с некоторыми вариантами цвета: черный, красный, зеленый, синий, голубой, лист мяты и розовый. Функция changeColor() вызывается, когда пользователь выбирает новый цвет из выпадающего меню, используя атрибут onchange элемента <select> . Функция выбирает элемент «gfg» с помощью document.getElementById() и выпадающее меню с помощью document.getElementById() с идентификатором «selectColor». Затем он извлекает значение выбранного цвета, используя свойство selectedIndex элемента <select>, и устанавливает цвет шрифта элемента «gfg» на выбранный цвет, используя свойство style.color .

Пример: этот пример иллюстрирует изменение цвета в HTML-элементе путем выбора цвета из раскрывающегося списка с помощью Javascript.

HTML

<!DOCTYPE html>

<html>

<head>

    <title>

          Change Font Color - Method 2

      </title>

    <style>

        body {

            margin: 10rem;

        }

    </style>

</head>

<body>

    <div id="gfg">

        <h1>

              Welcome To GeeksForGeeks!!

          </h1>

    </div>

    <label for="selectColor">

          Select a color:

      </label>

    <select id="selectColor"

            onchange="changeColor()">

        <option value="black">Black</option>

        <option value="crimson">Red</option>

        <option value="green">Green</option>

        <option value="#0984e3">Blue</option>

        <option value="cyan">Cyan</option>

        <option value="#00b894">Mint Leaf</option>

        <option value="#e84393">Pink</option>

    </select>

    <script>

        // Provide a function to modify the

       // "gfg" element's font color.

        function changeColor() {

            var gfg = document.getElementById("gfg");

            var selectColor =

                document.getElementById("selectColor");



            // From the drop-down menu, obtain

           // the value of the chosen color.

            var selectedColor =

                selectColor.options[selectColor.selectedIndex].value;



            // Set the font color of the "gfg"

           // element to the selected color

            gfg.style.color = selectedColor;

        }

    </script>

</body>

</html>

Выход: