Перейти к содержимому

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

  • автор:

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

Сразу оговорюсь, я новичок в JS.
Суть вопроса такова, сам текст с зеленого на красный меняется, но обратно с красного на зеленый не меняется. Вопрос заключается в следующем, как сделать так, чтобы с красного менялся обратно на зеленый. Исходный код прилагаю ниже:

Изменить цвет 

Текст, меняющий цвет

function ChangeColor(Element)
  • Вопрос задан более двух лет назад
  • 2983 просмотра

1 комментарий

Простой 1 комментарий

AntonLitvinenko

Антон Литвиненко @AntonLitvinenko

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

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

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

03.03.2014, 20:57
Регистрация: 13.12.2012
Сообщений: 283

рони,
Нет,я как раз вспоминал тебя.Ты просто делал как-то,
str(bgcolor:»red»).
Синтаксис не помню.Мне совсем просто,без id.

03.03.2014, 20:59
Регистрация: 13.12.2012
Сообщений: 283
Zuenf,
Мне нужно в document.write или в консоле
Последний раз редактировалось dima***, 03.03.2014 в 21:02 .
03.03.2014, 21:36
Кандидат Javascript-наук
Регистрация: 27.01.2012
Сообщений: 134
А чем не устраивает предложенный здесь Ронин вариант ?

    Document      

Если document.write то так:

    Document      

Последний раз редактировалось Zuenf, 03.03.2014 в 21:39 .
03.03.2014, 21:48
Регистрация: 13.12.2012
Сообщений: 283

Zuenf,спасибо перенёс тему сюда:
Подскажите,как правильно прописать цвет текста
Рони,без div Делал,как-то.Не помню как.

Последний раз редактировалось dima***, 03.03.2014 в 21:51 .
03.03.2014, 22:43
Регистрация: 27.05.2010
Сообщений: 33,038

dima***,
кроме вариантов предложенных Zuenf, можно задать class — но в любом случае нужен элемент вокруг текста.

Менять цвет при наведении при клике javascript

Смена цвета через js — мы можем поменять цвет, либо при наведении, либо при клике(onclick). разберем несколько способов менять цвет с помощью javascript.

Заменить цвет у элемента с помощью javascript

  1. Сменить цвет(background) при наведении мышки javascript
  2. Изменить цвет(background) нажав по элементу.
  3. Изменение цвета (background) javascript скриптом
  4. Изменение цвета (background) кнопки javascript
  5. js при клике менять background

Сменить цвет(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»;

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

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

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

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

https://czena.narkolog-na-dom-voronezh-11.ru/