Как поменять цвет текста в javascript
Перейти к содержимому

Как поменять цвет текста в javascript

  • автор:

Как менять цвет текста при клике?

Изучаю JavaScript. Хочу сделать, чтобы при клике на параграф текст в нём менял свой цвет на красный, а при повторном клике перекрашивался обратно в чёрный. Применил if, но если использую оператор повторно, то первый не работает. Интересует только вариант на чистом JS, не jQuery.

function clickColor() < var d; d = document.getElementById('tagP'); if (d.style.color='red') < d.style.color='black'; >if (d.style.color='black') < d.style.color='red'; >console.log(d.style.color); >;
    Document   

Россия

Австрия

Польша

Латвия

Чехия

Отслеживать
задан 7 июл 2019 в 18:33
Daniil Kedrov Daniil Kedrov
562 1 1 золотой знак 5 5 серебряных знаков 13 13 бронзовых знаков

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

for (var p of document.getElementsByTagName('p')) < // Берём все теги 

и проходимся по каждому p.onclick = function() < // В функции onclick указываем цвет противоположный текущему (с тернарным оператором) this.style.color = this.style.color === 'red' ? 'black' : 'red'; >>

Россия

Австрия

Польша

Латвия

Чехия

Отслеживать
ответ дан 7 июл 2019 в 18:48
13.1k 2 2 золотых знака 21 21 серебряный знак 37 37 бронзовых знаков
Очень продвинутый вариант) Пошёл разбираться)
7 июл 2019 в 18:52

Но в ИЕ11 работать не будет, т.к. надо поддержка es6. И, да, солидарен с @Dantessss на счет нескольких обработчиков

7 июл 2019 в 18:55

Вы в условиях if присваиваете значение, а не сравниваете. Используйте оператор == вместо = .

Отслеживать
ответ дан 7 июл 2019 в 18:53
Don2Quixote Don2Quixote
1,705 3 3 золотых знака 12 12 серебряных знаков 26 26 бронзовых знаков
Точно. Спасибо)
7 июл 2019 в 19:03

Есть возможность использовать делегирование событий, чтобы не создавать сотню обработчиков и уменьшить потребление памяти

document.addEventListener('click', function(e) < if (e.target.tagName === 'P') < e.target.style.color = e.target.style.color === 'red' ? 'black' : 'red'; >>);

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, pariatur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, pariatur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, pariatur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, pariatur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, pariatur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, pariatur.

Свойство color: цвет текста

Это задание архивной части. Перейдите по ссылке, чтобы пройти задание в актуальной части.

Цвет текста задаётся с помощью свойства color . Значение цвета можно задавать разными способами:

  • Шестнадцатеричным кодом, например #ff9900 .
  • Ключевым словом: red .
  • В RGB-формате: rgb(255, 255, 0) .

Чаще всего цвет задают в шестнадцатеричном формате.

Хотите всё и сразу? HTML, CSS, JavaScript, React, Node.js, оплачиваемая стажировка в Лиге А и гарантия трудоустройства. Записывайтесь на профессию «Фулстек-разработчик». Всего от 6 080 ₽ в месяц.

Перейти к заданию

  • index.html Сплит-режим
  • style.css Сплит-режим
  1. Смысл документа, логическая разметка. Технология: HTML.
  2. Внешний вид. Технология: CSS.
  3. Безупречный внешний вид. Технология: CSS3.
  4. Взаимодействие, интерактивность, удобство. Технология: JavaScript.

Проверить на сервере Проверка проводилась слишком много времени, попробуйте ещё разок Показать ответ

Спасибо! Мы скоро всё исправим)

Автозапуск

Код изменился, нажмите «Обновить» или включите автозапуск.

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

Увеличить 100% Уменьшить
Задачи Выполнено

Практикуемся использовать разные значения цвета текста.

  1. Задайте цвет #b94a48 ,
  2. цвет green ,
  3. цвет rgb(58, 135, 173) .

Если у вас возникли сложности во время прохождения задания, то вы можете обратиться за помощью на наш форум или задать вопрос в Телеграм-чате.

  • Наша группа в VK
  • Наш канал на YouTube
  • Наша страница в Twitter
  • Наш канал в Telegram

String.prototype.fontcolor()

Устарело: Эта возможность была удалена из веб-стандартов. Хотя некоторые браузеры по-прежнему могут поддерживать её, она находится в процессе удаления. Не используйте её ни в старых, ни в новых проектах. Страницы или веб-приложения, использующие её, могут в любой момент сломаться.

Сводка

Примечание: элемент был удалён из HTML5 (en-US) и больше не должен использоваться. Вместо него веб-разработчикам следует использовать свойства CSS.

Синтаксис

str.fontcolor(color)

Параметры

Строка, выражающая цвет в виде шестнадцатеричного триплета RGB, либо в виде названия цвета. Названия цветов перечислены в справочнике по значению цвета в CSS.

Описание

Если вы выразили цвет в виде шестнадцатеричного триплета RGB, вы должны использовать формат rrggbb . Например, шестнадцатеричные значения RGB для оранжево-розового цвета такие: красный=FA, зелёный=80 и синий=72, так что RGB-триплет для оранжево-розового цвета будет следующим «FA8072» .

Примеры

Пример: использование метода fontcolor()

В следующем примере метод fontcolor() используется для изменения цвета строки путём генерирования строки с HTML-тегом .

var worldString = "Привет, мир"; console.log(worldString.fontcolor("red") + " на этой строке красный"); // 'Привет, мир на этой строке красный' console.log( worldString.fontcolor("FF00") + " на этой строке красный в шестнадцатеричной форме", ); // 'Привет, мир на этой строке красный в шестнадцатеричной форме' 

При помощи объекта element.style (en-US) вы можете получить значение атрибута style элемента и управлять им более обобщённым способом, например:

.getElementById("yourElemId").style.color = "red"; 

Спецификации

Specification
ECMAScript Language Specification
# sec-string.prototype.fontcolor

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 20 янв. 2024 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

  • Product help
  • Report an issue

Our communities

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

Как поменять цвет текста в javascript

В связи с переходом на новый движок. возможны сбои в работе! Простите!
Работы производятся прямо сейчас 20-02-2024! ��

Сменить цвет(background) при наведении мышки javascript

Для того, чтобы сделать сменяемость цвета с помощью javascript, при наведении мышки. Нам понадобится:

Нам понадобится элемент DOM div,

Javascript

+ onmouseover — когда мышка будет попадать на элемент,

И когда мышка будет покидать элемент — onmouseleave и внутри функций, в зависимости от действия будем изменять цвет, или возвращать первоначальный:

example.onmouseleave = function() example.style.background= «yellow»;
>;

Результат замены цвета при наведении мышки на элемент:

Изменить цвет(background) нажав по элементу.

В этом пункте разберем замену background цвета по клику с расположением js кода внутри тега.

Для того, чтобы изменить цвет элемента нажав по нему, нам понадобится, как и в выше проведенном пункте:

Пусть это будет элемент DOM div,

Соберем это все в одн целое:

Результат замены цвета при клике на элемент:

Для того, чтобы увидеть изменение цвета элемента при нажатии на него нажмите по блоку!

Изменение цвета (background) javascript скриптом

Выше я уже рассмотрел один из вариантов изменения цвета (background) javascript внутри тега.

Теперь тоже самое(ну или похожее. ) сделаем внутри скрипта.

Нам опять нужен элемент. + id

Обратимся к элементу через id

Стили для блока выделим в отдельный тег style

Далее скрипт изменения цвета (background) javascript скриптом

Используем один из способов onclick

Нам понадобится getElementById для получения объекта.

Ну и далее простое условие с проверкой, что внутри атрибута style , если цвет красный

if(if_id .style . background == «red»)

, то меняем его на #efefef

if_id .style . background = «#efefef»;

Во всех други случаях, т.е. иначе(else) меняем на красный.

if_id .style . background = «red»;

Скрипт javascript для замены background при нажатии

Не забываем. если не сделано onload, то скрипт должен находиться под выше приведенным кодом элемента, в котором собираемся изменить background при нажатии

if_id = e . target. id;

if(if_id .style . background == «red»)

if_id .style . background = «#efefef»;

if_id .style . background = «red»;

Пример изменения background при нажатии javascript

Нам остается разместить приведенный код прямо здесь. Чтобы проверить как работает изменение background при нажатии javascript кликните по ниже идущему цветному блоку.

здесь background

Изменение цвета кнопки (background) javascript

С помощью самописного скрипта, заставим кнопки менять цвет.

Алгоритм смены цвета кнопки.

У кнопки должно быть что-то одинаковое — «class» = click_me.

И что-то разное. уникальное, это id.

Javascript

Возьмем один из способов onclick

document.addEventListener(«click», function(e)

Получим имена класса и ид:

if_id = e . target. id;

the_class = e . target.className;

Условие -если нажали по нашей кнопке с классом:

if(the_class == «click_me»)

Получаем объект из имени(которое получили раннее):

if_id = document.getElementById(if_id);

При покрашенной кнопке возвращаем нажатой кнопке её цвет по умолчанию:

if(if_id .style . background == «red»)
if_id .style . background = «#efefef»;
>

Иначе, всем кнопкам с классом возвращаем в цикле её цвет по умолчанию и только той кнопке, по которой нажали изменяем цвет::

else
var links = document.querySelectorAll(«.click_me»);
links.forEach(link => link.setAttribute(«style», «background:#efefef»);
>)
if_id .style . background = «red»;
>

Соберем весь код смены цвета с помощью javascript

if_id = e . target. id;

the_class = e . target.className;

if(if_id .style . background == «red»)

if_id .style . background = «#efefef»;

var links = document.querySelectorAll(«.click_me»);

if_id .style . background = «red»;

Результат изменения цвета при нажатии на элемент

ruweb

Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru!
© 2015 — 2024 Контакты. Реклама на сайте
Лучший хостинг : RUWEB + помощь по RUWEB

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *