实现CSS更改背景颜色

Question

I'm using a dynamic table ( https://puravidaapps.com/table.php2 ) With the HTML doc, I find how to change the table form from Materializecss.com (stripered or bordered ...) at the line : 我使用的是动态表格（ https://puravidaapps.com/table.php2 ），使用HTML文档，我发现如何在一行中从Materializecss.com（带条纹或带边框的...）更改表格形式：

doc.getElementById("myTable").getElementsByTagName('table')[0].className = "bordered";

But I don't know how to change the differents colors. 但是我不知道如何改变颜色。 Where do I have to write "card-panel teal lighten-2" if I want to change the background color for 1 line over 2 ?(I have a css file with lots of informations but i think it's materialize.css component) 如果我想在2上更改1行的背景颜色，我应该在哪里写“ card-panel teal lighten-2”（我有一个css文件，其中包含很多信息，但我认为它是materialize.css组件）

Thank you! 谢谢！

<!doctype html>
<head>
  <meta name="author" <content="puravidaapps.com">
  <meta charset="utf-8">
  <meta name="viewport" <content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

  <!--Import materialize.css-->
  <link type="text/css" rel="stylesheet" href="materialize.min.css"  media="screen,projection"/>

  <title>Table Layout</title>
</head>

<body>
  <div id="myTable"></div>
  <script>
    // if you have commas inside your text, feel free to use another delimiter, for example |
    var delimiter = ",";

    // get the table to display from the window.AppInventor object and split at new line
    var urlArray = window.AppInventor.getWebViewString().split("\n");
    //var urlArray = location.search.slice(1).split("/n");

    var doc = document;
    var fragment = doc.createDocumentFragment();
    var thead = doc.createElement("thead");
    var tr = doc.createElement("tr");

    // split at delimiter
    var rowArray = urlArray[0].split(delimiter);

    addRow(thead, "th");
    fragment.appendChild(thead);

    var tbody = doc.createElement("tbody");
    for(i=1;iurlArray.length;i++){
      var tr = doc.createElement("tr");

      // split at delimiter
      var rowArray = urlArray[i].split(delimiter);

      tr.addEventListener ("click", function () {
        // return index (add 1 because first row is the header row)
        //window.document.title = this.rowIndex + 1;
        window.AppInventor.setWebViewString(this.rowIndex + 1);
      });

      addRow(tbody, "td");
    }
    fragment.appendChild(tbody);
    var table = doc.createElement("table");
    table.appendChild(fragment);
    doc.getElementById("myTable").appendChild(table);

    // http://stackoverflow.com/a/9236195/1545993
    doc.getElementById("myTable").getElementsByTagName('table')[0].className = "bordered";


    function addRow(dom, tag) {
      for(j=0;jrowArray.length;j++){
        var el = doc.createElement(tag);
        el.innerHTML = rowArray[j];
        tr.appendChild(el);
        dom.appendChild(tr);
      }
    }
  </script>
</body>
</html>

Answer 1

You need to use Sass in order to changes the presets css values of materialize. 您需要使用Sass才能更改实现的预设css值。

In the file [_variables.scss][1] you can modify different kind of parameters, if you want to go deeper in customisation, (adding custom colors etc...) check the component folder and you will get what you want. 在文件[_variables.scss][1]您可以修改其他种类的参数，如果您想进一步进行自定义，（添加自定义颜色等）检查组件文件夹，您将得到所需的内容。

as .scss is not readable by your browser, you need to install sass and compile it into .css using this command line: 由于您的浏览器无法读取.scss ，因此您需要安装sass并使用以下命令行将其编译为.css ：

sass --watch scss/materialize.scss:compiled/test.css

from style folder assuming the following path: 从样式文件夹（假设以下路径）：

app 应用程式
- style 样式
  - scss 脚本
  - compiled 已编译

sass watch explained 无礼的手表解释

实现CSS更改背景颜色

问题描述

1 个解决方案

解决方案1
0 2018-02-15 14:00:49

实现CSS更改背景颜色

问题描述

1 个解决方案

解决方案1 0 2018-02-15 14:00:49

解决方案1
0 2018-02-15 14:00:49