如何根據對象值在javascript中更改顏色

我有一個問題，我不知道如何解決。以下腳本顯示股票及其當前價值。我想添加的一件事是，如果股票具有正值，則爲綠色;如果股票具有負值，則爲紅色。如何根據對象值在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 + "<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>

來源

2017-04-19 jaikl

什麼顏色值？你的意思是'myElement.style.color ='＃ccc''？ – evolutionxbox

帶有if語句，以及evolutionxbox所說的內容。 –

將'.innerHTML = ...'部件移出'.forEach（）'「loop」。如果只有最後一個元素後面的'name' /'value'的值是相關的，那麼不需要爲每個元素更改DOM。 – Andreas

的

您可以定義可變顏色並將該值包含在一個範圍中並根據值設置範圍顏色

請參閱cod Ë婁

$(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 + "<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>

來源

2017-04-19 08:50:04 Chiller

你可以調用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 + "<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>

來源

2017-04-19 08:39:48 Weedoze

這不起作用。您需要逐個設置每個元素的樣式。 – Pugazh

嘗試將https：//finance.google.com/finance/info？client = ig＆q = TSLA，HM-B，AAPL＆callback =？改爲https://finance.google.com/finance/info?client= ig＆q = NDRO，HM-B，AAPL＆callback =？'即使正數也會變成紅色 – Pugazh

您可以通過使用這種結構改變頁面上的元素的背景樣式：

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;

而是改變「背景」屬性，你可以隨意更改任何其他（顏色，寬度等）

來源

2017-04-19 08:45:06

只是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 += v.t + "<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>

來源

2017-04-19 08:51:12 Pugazh

如何根據對象值在javascript中更改顏色

回答

相關問題