Это исследование проиллюстрирует методы изменения цвета текста в JavaScript.
Как изменить цвет текста в JavaScript?
Для изменения цвета текста в JavaScript используйте указанные ниже предопределенные методы JavaScript:
Давайте объясним эти методы по отдельности.
Способ 1: изменить цвет текста с помощью свойства style.color с методом getElementById()
Чтобы изменить цвет текста, вы можете использовать кнопку « получитьэлемент по идентификатору() ” метод с “ стиль.цвет ' имущество. В таком сценарии к текстовому элементу можно получить доступ с помощью метода getElementById(), а затем применить атрибут цвета с помощью свойства HTML style.color.
Синтаксис
Используйте данный синтаксис для изменения цвета текста с помощью свойства color с помощью метода getElementById():
документ. получитьэлементбиид ( 'я бы' ) . стиль . цвет знак равно 'цвет' ;“ я бы ” — это идентификатор элемента, указанный для доступа к текстовому элементу и последующего изменения его цвета с помощью свойства style.color.
Перейдите к приведенному ниже примеру, чтобы понять изложенную концепцию!
Пример
Сначала мы создадим заголовок, используя пометить и присвоить идентификатор « я бы », который используется для доступа к элементу h4, затем создайте кнопку, которая вызывает функцию с именем « изменить цвет() », определенный в файле JavaScript (JS), когда срабатывает событие onclick добавленной кнопки:
< h4 идентификатор знак равно 'я бы' > Добро пожаловать в LinuxHint h4 >< тип кнопки знак равно 'кнопка' по щелчку знак равно 'изменить цвет()' > Нажмите, чтобы увидеть волшебство кнопка >
В файле JS определите функцию с именем « изменить цвет() ” и получить заголовок, передав его id методу getElementById(), а затем изменив его цвет:
функция changeColor ( ) {документ. получитьэлементбиид ( 'я бы' ) . стиль . цвет знак равно 'красный' ;
}
Наконец, укажите источник файла JavaScript, используя тег src в файле HTML:
< источник сценария знак равно './JSfile.js' > сценарий >Из вывода видно, что при нажатии на добавленную кнопку текстовый элемент изменил свой цвет на « красный ”:
Давайте проверим другой метод!
Способ 2: изменить цвет текста с помощью свойства style.color с помощью метода querySelector()
Вы также можете изменить цвет текста с помощью кнопки « селектор запросов() ” со свойством style.color. Он обращается к элементу как с идентификатором, так и с назначенным классом, в то время как метод getElementById() просто извлекает элемент с назначенным ему идентификатором.
Синтаксис
Используйте следующий синтаксис, чтобы изменить цвет текста, используя свойство color с помощью метода querySelector():
документ. селектор запросов ( 'идентификатор/имя класса' ) . стиль . цвет знак равно 'цвет' ;Пример
Здесь мы будем использовать тег, чтобы добавить абзац с классом с именем « цвет ', что поможет получить доступ к элементу
и кнопке, которая вызовет JavaScript ' изменить цвет() », когда будет запущено его событие onclick:
< п учебный класс знак равно 'цвет' > Добро пожаловать в LinuxHint п >< кнопка при нажатии знак равно 'изменить цвет()' > Нажмите, чтобы увидеть волшебство кнопка >
В определении « изменить цвет() », мы вызовем метод « селектор запросов() », передав имя класса с точкой (.), которая указывает, что доступ к элементу осуществляется на основе его имени класса, а затем примените к нему свойство цвета:
функция changeColor ( ) {документ. селектор запросов ( '.цвет' ) . стиль . цвет знак равно 'Пурпурный' ;
}
Однако, чтобы использовать идентификатор в элементе HTML и получить к нему доступ с помощью метода querySelector(), добавьте « # ” знак с именем id:
документ. селектор запросов ( '#цвет' ) . стиль . цвет знак равно 'Пурпурный' ;Выход
Мы собрали самый простой способ изменить цвет текста в JavaScript.
Вывод
Для изменения цвета текста вы можете использовать свойство style.color с помощью метода getElementById() или метода querySelector(). Метод getElementById() используется для доступа к элементу HTML на основе назначенного ему идентификатора, тогда как метод querySelector() обращается к элементу на основе назначенного идентификатора или класса, указав знаки (#) или (.) соответственно. Это исследование иллюстрирует простую процедуру изменения цвета текста в JavaScript.