将类名存储在变量中答案

【问题标题】：Storing class names in variable将类名存储在变量中
【发布时间】：2021-04-16 10:10:16
【问题描述】：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta washere="fgras">
    <title>Mesure de Distance - Page 1</title>
    <style type="text/css">
        
        
        <!-- ****************** Table ****************** -->
        
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }

        th, td {
            padding: 5px;
            text-align: center;
        }

        tr:nth-child(even) {
            background-color: #ccc;
        }

        tr:nth-child(odd) {
            background-color: #fff;
        }

        th {
            background-color: darkslategray;
            color: white;
        }
        
        
        body{
            font-family:arial;
        }
        
        .valHP {
            background-color: #A0A0A0;
                }

        .valError {
            background-color: #FF00FF;
                }

        .valInsideGood {
            color: #00A000;
            }

        .valInsideBad {
            color: #FF0000;
        }
        
    </style>
    <script type="text/javascript">
        var requestNumber=0;
        var value1Node = null;
        var value2Node = null;
        
        function onData(e, xhr){
            try{
                console.log("onData.event =",e);
                console.log("onData.xhr =",xhr);
                var data = xhr.responseText;
                console.log("data =",data);
                data = data.split("|");
                
                var value1 = Number(data[1]);
                var value2 = Number(data[2]);
                
                value1Node.textContent = value1;
                value2Node.textContent = value2;

                if(value1==0){
                    value1Node.className="valHP";
                    value1Node.textContent="--";
                }else if(value1>=26 && value1<=28){
                    value1Node.className="valInsideBad";
                }else if(value1>28 && value1<=34){
                    value1Node.className="valInsideGood";
                }else{
                    value1Node.className="valError";
                    value1Node.textContent="err";
                }
                
                
            }finally{
                setTimeout(refreshData,200);
            }
        }
        
        function refreshData(){
            requestNumber++;
            var xhr = new XMLHttpRequest();
            xhr.addEventListener("load", (function(e){return onData(e, xhr);}));
            xhr.open("GET", "data.html?t="+requestNumber); //t pour un nom de page unique et éviter le cache
            xhr.send();
        }
        function onPageLoad(){
            value1Node = document.getElementById("val1");

            
            refreshData();
        }
        
    </script>
</head>
<body onload="onPageLoad()">


<div class="table100-body js-pscroll"> 
    <table style="width:50%">
        <thead>
        <tr class="row100 head">
            <th class="cell100 column1">Colonne1</th>
            <th class="cell100 column2">Colonne2</th>
            <th class="cell100 column3">Colonne3</th>
            <th class="cell100 column4">Colonne4</th>
            <th class="cell100 column5">Colonne5</th>
        </tr>
        </thead>
        <tbody>
        <tr class="row100-body">
            <td class="cellColumn"> <span id="val1"></span></td>
            <td class="cellColumn"> Capteur 1= </td>
            <td class="cellColumn"> Distance_Capt_1</td>
            <td class="cellColumn"> Distance_Capt_1</td>
            <td class="cellColumn"> Distance_Capt_1</td>
        </tr>
        

        </tbody>
    </table>
</div> 
    
</body>

我正在尝试在表格的网页上显示我从硬件接收到的数据。根据我收到的数据的范围，我需要用红色和绿色显示它们。

我已经使用 CSS 定义了 4 个类。

在我的 html 部分中，在一个表中，我想将类分配给 td 块，但我的类存储在一个变量中 (value1Node.className) 我试过td class=value1Node.className，但它不起作用。我还将value1Node.className 放在“”和“”中，但没有用。我怎样才能做到这一点？（代码的所有其他部分都可以正常工作）

数据存储在 value1 中，我在 javascript 中有 3 个 if：

if (value1 == 0) {
  value1Node.className = "valHP";
  value1Node.textContent = "Out of Range";
} else if (value1 >= 26 && value1 <= 28) {
  value1Node.className = "valInsideBad";
} else if (value1 > 28 && value1 <= 34) {
  value1Node.className = "valInsideGood";
} else {
  value1Node.className = "valError";
  value1Node.textContent = "err";
}

.valHP {
  background-color: #A0A0A0;
}

.valError {
  background-color: #FF00FF;
}

.valInsideGood {
  color: #00A000;
}

.valInsideBad {
  color: #FF0000;
}

【问题讨论】：

请展示你如何构建你的td元素
请使用工具<>创建一个完整且有效的sn-p
什么是value2Node？span>
为什么每 200 毫秒更新一次 - 这对服务器来说可能太快了
value2Node 用于我尚未开始编码的第二个数据。我知道 200 毫秒太快了，但是数据变化太快了，这个网页将用于监视。我正在使用硬件

标签： javascript html css class

【解决方案1】：

HTML5 custom-data 属性就是为此目的而设计的。

代替：

class="valHP"
class="valError"
class="valInsideGood"
class="valInsideBad"

你可以拥有：

data-my-value="HP"
data-my-value="Error"
data-my-value="InsideGood"
data-my-value="InsideBad"

然后在你的 CSS 中你可以拥有：

[data-my-value="HP"] {
  background-color: #A0A0A0;
}

[data-my-value="Error"] {
  background-color: #FF00FF;
}

[data-my-value="InsideGood"] {
  color: #00A000;
}

[data-my-value="InsideBad"] {
  color: #FF0000;
}

那么，在你的javascript中，你可以有：

if (value1 === 0) {
  value1Node.setAttribute('data-my-value', 'valHP');
  value1Node.textContent = "Out of Range";
} else if (value1 >= 26 && value1 <= 28) {
  value1Node.setAttribute('data-my-value', 'InsideBad');
} else if (value1 > 28 && value1 <= 34) {
  value1Node.setAttribute('data-my-value', 'InsideGood');
} else {
  value1Node.setAttribute('data-my-value', 'Error');
  value1Node.textContent = "err";
}

如果您想查询data-value 的值，可以使用dataset：

value1Node.dataset.myValue  // returns data-my-value

您也可以通过dataset直接设置每个值：

value1Node.dataset.myValue = 'InsideGood'; // Now: data-my-value="InsideGood"

知道了这一点，您现在可以编写以下脚本：

if (value1 === 0) {
  value1Node.data.myValue = 'valHP';
  value1Node.textContent = "Out of Range";
} else if (value1 >= 26 && value1 <= 28) {
  value1Node.data.myValue = 'InsideBad';
} else if (value1 > 28 && value1 <= 34) {
  value1Node.data.myValue = 'InsideGood';
} else {
  value1Node.data.myValue = 'Error';
  value1Node.textContent = "err";
}

进一步阅读：

【讨论】：

谢谢。问题是，我不知道：data-my-value = ?因为数据是实时的，它会发生变化，我需要代码本身自动定义 td 类。
您能看一下我添加的完整代码片段吗？