Javascript цвет от значения

Изменить цвет поля ввода в зависимости от того, какие символы введены.

Мне нужно сделать условие: если в поле ввода ввели буквы ijklmnopqrstuvwxyz — то цвет поля стает красным, в других случаях — не меняет цвет. Пробовал написать так, но во всех случаях цвет был красный:

if(digitValue = 'ijklmnopqrstuvwxyz'){ document.getElementById("myText").style.backgroundColor = "red"; } else{ document.getElementById("myText").style.backgroundColor = "white"; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

 html> head> title>Конвертерtitle> head> body> div class="controls"> div class="row"> form name="form1"> div class="col-md-12"> div class="form-group"> input type="text" id="myText" class="form-control">br>br> div> div> div class="col-md-12"> button type="button" value="Calculate" onclick="Calculate()" class="btn btn-success btn-send">Перетворитиbutton> div> div class="col-md-12"> p id="demo">p> div> form> div> div> script> function hexToDec(hex) { var result = 0, digitValue; hex = hex.toLowerCase(); for (var i = 0; i  hex.length; i++) { digitValue = '0123456789abcdefgh'.indexOf(hex[i]); result = result * 16 + digitValue; if(digitValue = 'ijklmnopqrstuvwxyz'){ document.getElementById("myText").style.backgroundColor = "red"; }else{ document.getElementById("myText").style.backgroundColor = "white"; } } return result; } function Calculate() { var x = document.getElementById("myText").value; document.getElementById("demo").innerHTML = hexToDec(x); } script> body> html>

Источник

Как изменить цвет в javascript в зависимости от значения объекта

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

Как изменить цвет значения div для каждой строки в зависимости от текущего значения?

$(document).ready(function stocks() < var value = ""; var name = ""; var substring = "-"; $.getJSON("https://finance.google.com/finance/info?client=ig&q=TSLA,HM-B,AAPL&callback=?", function(json) < json.forEach(function(v) < //if(v.cp.includes(substring))< //>// //else < //>name += v.t + "
"; value += v.cp + " %" + "
"; document.getElementById('name').innerHTML = name; document.getElementById('value').innerHTML = value; >); setTimeout(stocks, 10000); >); >);

вы можете определить цвет переменной и обернуть значение в диапазоне и установить диапазон цвета в соответствии со значением

$(document).ready(function stocks() < var value = ""; var name = ""; var substring = "-"; $.getJSON("https://finance.google.com/finance/info?client=ig&q=TSLA,HM-B,AAPL&callback=?", function(json) < json.forEach(function(v) < //if(v.cp.includes(substring))< //>// //else < //>var color = 'green'; if (v.cp < 0) < color = 'red'; >name += v.t + "
"; value += '' + v.cp + " %" + "
"; document.getElementById('name').innerHTML = name; document.getElementById('value').innerHTML = value; >); setTimeout(stocks, 10000); >); >);

Вы можете изменить стиль фона элемента на странице, используя эту конструкцию:

document.getElementById('value').style.background = 'here is your color'. 

Итак, вы можете просто заменить свой

"document.getElementById('value').innerHTML = value;" 

const valueElement = document.getElementById('value'); const color = (v.cp > 0) ? 'greeen' : 'red'; valueElement.innerHTML = value; valueElement.style.background = color; 

Вместо изменения свойства “background” вы можете изменить любой другой (цвет, ширина и т.д.),

Вы можете вызвать yourElement.style.color и установить его на зеленый или красный

var value = ""; var name = ""; var substring = "-"; var nameElement = document.getElementById('name'); var valueElement = document.getElementById('value'); $.getJSON("https://finance.google.com/finance/info?client=ig&q=TSLA,HM-B,AAPL&callback=?", function(json) < json.forEach(function(v) < name += v.t + "
"; value += v.cp + " %" + "
"; valueElement.style.color = v.cp < 0 ? "red" : "green"; nameElement.innerHTML = name; valueElement.innerHTML = value; >); setTimeout(stocks, 10000); >);

Просто parseFloat значение v.cp если оно больше нуля, применить зеленый еще применить красный. Проверьте пример ниже.

Источник

HTML – изменение цвета текста в зависимости от значения с помощью JS

Я создаю таблицу, отображаемую в HTML с Django. Я хочу изменить цвет номера на красный, когда число отрицательное, и зеленое, когда число положительное. Я знаю, что мне нужно использовать JS для этого, но я не мог заставить его работать. Любая помощь будет оценена !!

Вот мой HTML-шаблон Django:

 " /> 
>
 
 var el = document.getElementById('TransactionAmount'); if(el <0) < el.addClass += "red"; >else
 
TRANSACTION AMOUNT
 
BALANCE AFTER TRANSACTION
 
TRANSACTION COMMENT
 
 
>
 
>
 
>
 
 
Feel free to contact me !
 
 

И классы, которые я создал в моем CSS:

Я попытался создать код JS из примеров, которые я нашел в Интернете, но что-то должно быть не так. Моя цель – проверить, является ли номер TransactionAmount отрицательным или положительным, и соответствующим образом отрегулируйте цвет. Я сделал div TransactionAmount, чтобы использовать его с getElementById…

 var el = document.getElementById('TransactionAmount'); if(el <0) < el.addClass += "red"; >else 

И мой номер по-прежнему серый.

Вам нужно получить textContent элемента, чтобы проверить его значение. И вы можете использовать один класс, который переключается, если он положительный или нет. И либо используйте jquery $.addClass() и $.removeClass() либо javascript classList.add() и classList.remove() .

Также, как указал Суйен К., у вас есть tr > div > td для этого элемента, и вместо этого он должен быть tr > td > div .

var els = document.getElementsByClassName('TransactionAmount'); for (var i = 0; i < els.length; i++) < var cell = els[i]; if (cell.textContent < 0) < cell.classList.remove('green') >else < cell.classList.add('green'); >>

.TransactionAmount < color: #FF0000; >.TransactionAmount.green

 
 
TRANSACTION AMOUNT
 
BALANCE AFTER TRANSACTION
 
TRANSACTION COMMENT
 
 
-1
 
>
 
>
 
 
0
 
>
 
>
 
 
1
 
>
 
>
 
 

Есть две проблемы. HTML-иерархия должна быть table> tr> td, и вы ставите div> td. Вторая проблема – addClass. Это из библиотеки jQuery, если вы хотите использовать простой JS с классомName. Попробуй это:

 
>
  var el = document.getElementById('TransactionAmount'); if(el <0) < el.className += "red"; >else
 
TRANSACTION AMOUNT
 
BALANCE AFTER TRANSACTION
 
TRANSACTION COMMENT
 
 
>
 
>
 
>
 
 
Feel free to contact me !
 

Источник

Javascript цвет от значения

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

if_id .style . background = «#efefef»;

if_id .style . background = «red»;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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»;

Источник