[英]How can I change the color in javascript depending of object value
我有一个我不知道如何解决的问题。 下面的脚本显示股票及其当前值。 我要添加的一件事是，如果股票具有正值，则为绿色，如果股票具有负值，则为红色。
如何根据当前值更改每行的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 += vt + "<br>"; value += v.cp + " %" + "<br>"; document.getElementById('name').innerHTML = name; document.getElementById('value').innerHTML = value; }); setTimeout(stocks, 10000); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <div id="name" style="float:left ; padding-right:10px"></div> <div id="value" style="text-align:right; width:140px"></div> </div>
您可以使用以下结构来更改页面上元素的背景样式：
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;
您可以随意更改其他任何属性（颜色，宽度等），而无需更改“背景”属性
您可以调用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 += vt + "<br>"; value += v.cp + " %" + "<br>"; valueElement.style.color = v.cp < 0 ? "red" : "green"; nameElement.innerHTML = name; valueElement.innerHTML = value; }); setTimeout(stocks, 10000); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <div id="name"></div> <div id="value"></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{ //} var color = 'green'; if (v.cp < 0) { color = 'red'; } name += vt + "<br>"; value += '<span style="color:' + color + '">' + v.cp + " %" + "</span><br>"; document.getElementById('name').innerHTML = name; document.getElementById('value').innerHTML = value; }); setTimeout(stocks, 10000); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <div id="name" style="float:left ; padding-right:10px"></div> <div id="value" style="text-align:right; width:140px"></div> </div>
只需parseFloat如果值v.cp大于零，则应用绿色，否则应用红色。 检查以下示例。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <script> $(document).ready(function stocks() { var value = ""; var name = ""; var color = ""; $.getJSON("https://finance.google.com/finance/info?client=ig&q=NDRO,HM-B,AAPL&callback=?", function(json) { json.forEach(function(v) { if (parseFloat(v.cp) > 0) color = 'green'; else color = 'red'; name += vt + "<br>"; value += "<span style='color:" + color + "'>" + v.cp + " %</span><br>"; document.getElementById('name').innerHTML = name; document.getElementById('value').innerHTML = value; }); setTimeout(stocks, 10000); }); }); </script> </head> <body> <div> <div id="name" style="float:left ; padding-right:10px"> </div> <div id="value" style="text-align:right; width:140px"> </div> </div> </body> </html>
如何使用 JavaScript / jQuery 根据表中的值更改 td 背景颜色？
[英]How can I change td background color depending on value in a table using JavaScript / jQuery?
如何将JavaScript与HTML合并以使表格根据值更改颜色？
[英]How to incorporate javascript with HTML to make table change color depending on value?
如何更改在 javascript 中以.value 结尾的变量的背景颜色
[英]How can I change the background color of a variable that ends in .value in javascript
如何使用Javascript根据元素的颜色更改ID
[英]How to change an ID depending on the color of an element with Javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.