如何使用通过 Javascript 检索的 JSON 数据设置 CSS答案

【问题标题】：How to set CSS using JSON data retrieved with Javascript如何使用通过 Javascript 检索的 JSON 数据设置 CSS
【发布时间】：2020-04-30 05:53:18
【问题描述】：

我正在处理一个动态 HTML 文档，该文档必须根据 Google 表格条目更改其样式。到目前为止，它可以很好地加载 JSON 数据。我一直在寻找一种设置 CSS 样式的方法，以便我可以随时更改它。有没有人可以指出我正确的方向？

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Google Sheets</title>
  <style>
  </style>
  <script type="text/javascript">
    var ourRequest = new XMLHttpRequest();
    ourRequest.open('GET', 'https://spreadsheets.google.com/feeds/cells/1d3z-eJz2X_rFhq3a1kQ6TRlxJqHvstLQ/1/public/full?alt=json')
    ourRequest.onload = function () {
      var ourData = JSON.parse(ourRequest.responseText);
      var adTekst = ourData.feed.entry[6].gs$cell.inputValue;
      var achtergrondKleur = ourData.feed.entry[7].gs$cell.inputValue;
      var tekstKleur = ourData.feed.entry[8].gs$cell.inputValue;

      console.log(adTekst);
      console.log(achtergrondKleur);
      console.log(tekstKleur);

      document.getElementById('testoutput').innerHTML = adTekst + " " + achtergrondKleur + " " + tekstKleur;
    };

    ourRequest.send();

  </script>
</head>

<body>
  <div id="testoutput"></div>
</body>

</html>

【问题讨论】：

document.getElementById('testoutput').style.color = tekstKleur; document.getElementById('testoutput').style.backgroundColor = achtergrondKleur;
虽然深入研究 DOM 并基于 JSON 数据切换类可以正常工作，但根据您的项目规模，您可能希望研究某种反应式库，例如 React 或 Vue，或者至少通过将代码提取到函数中来处理项目的特定方面来抽象其中的一部分。
@Gerard 谢谢。这非常有效。现在我正在尝试使用 style.backgroundImage = "url('IMG')" 的图像，其中 'IMG' 是我为我的 URL 设置的变量。它不起作用，但是当我替换它所代表的 URL 的变量时，它会起作用。你能告诉我出了什么问题吗？

标签： javascript html css json

【解决方案1】：

您可以通过使用 javascript 切换类来做到这一点。

document.getElementById('testoutput').classList.toggle('myClass');

其他方法是更改单个 CSS 属性

 document.getElementById('testoutput').style.backgroundColor = 'RED';

【讨论】：

【解决方案2】：

是的，您可以使用 html 标签为所有列提供特定的 css。见下面的sn-p

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Google Sheets</title>

<style>

</style>


<script type="text/javascript">
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'https://spreadsheets.google.com/feeds/cells/1dLbBxSuyGxbG3z-eJz2X_rFhq3a1kQ6TRlxJqHvstLQ/1/public/full?alt=json')
ourRequest.onload = function() {
var ourData = JSON.parse(ourRequest.responseText);
var adTekst = ourData.feed.entry[6].gs$cell.inputValue;
var achtergrondKleur = ourData.feed.entry[7].gs$cell.inputValue;
var tekstKleur = ourData.feed.entry[8].gs$cell.inputValue;

console.log(adTekst);
console.log(achtergrondKleur);
console.log(tekstKleur);

document.getElementById('testoutput').innerHTML ='<span>'+adTekst+'</span>'+ " " + '<span>'+achtergrondKleur+'</span>' + " " + tekstKleur;
};

ourRequest.send();

</script>
</head>

<style>
div#testoutput {    color: red;}
div#testoutput span {    color: blue;}
div#testoutput span:first-child {color: aqua;}
</style>
<body>

<div id="testoutput"></div>

</body>
</html>

您可以根据您的要求提供颜色或设计。

【讨论】：