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

Создайте веб-приложение с помощью современного 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>

Выход:

тот пример иллюстрирует изменение цвета 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>

Выход:

от пример иллюстрирует изменение цвета в HTML-элементе путе

Читайте также:  10 лучших библиотек Angular для веб-разработчиков
Оцените статью
bestprogrammer.ru
Добавить комментарий