Javascript 在变量中存储类名

距离测量-第1页
表，th，td{
边框：1px纯黑；
边界塌陷：塌陷；
}
th，td{
填充物：5px；
文本对齐：居中；
}
tr:n个孩子（偶数）{
背景色：#ccc；
}
tr:n个孩子（奇数）{
背景色：#fff；
}
th{
背景色：深灰色；
颜色：白色；
}
身体{
字体系列：arial；
}
瓦尔普先生{
背景色：#A0；
}
瓦莱罗先生{
背景色：#FF00FF；
}
瓦林斯德古德先生{
颜色：#00A000；
}
瓦林西德巴德先生{
颜色：#FF0000；
}
var requestNumber=0；
var value1Node=null；
var value2Node=null；
函数onData（e，xhr）{
试一试{
console.log（“onData.event=，e）；
console.log（“onData.xhr=，xhr”）；
var data=xhr.responseText；
console.log（“data=”，data）；
data=data.split（“|”）；
var value1=数量（数据[1]）；
var value2=数量（数据[2]）；
value1Node.textContent=value1；
value2Node.textContent=value2；
如果（值1==0）{
value1Node.className=“valHP”；
value1Node.textContent=“--”；
}否则，如果（value1>=26&&value128&&value1HTML5自定义数据属性是为此而设计的

而不是：


class=“valHP”
class=“valeror”
class=“valInsideGood”
class=“valInsideBad”

你可以有：

[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;
}

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 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;
}

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";
}

然后在javascript中，您可以：

[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;
}

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";
}

您还可以通过
数据集
直接设置每个值：

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

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";
}

if（值1==0）{
value1Node.data.myValue='valHP'；
value1Node.textContent=“超出范围”；
}否则如果（value1>=26&&value1 28&&value1请说明如何构建
td
元素请使用工具创建一个完整且有效的代码段
什么是value2Node？为什么每200毫秒更新一次？这对于服务器value2Node来说可能太快了，而对于我还没有开始编码的第二个数据来说。我知道200毫秒太快了但是数据变化如此之快，这个网页将用于监视。我正在使用硬件测试。问题是，我不知道：数据我的值=？因为数据是实时的，它会变化，我需要td类由代码本身自动定义。你能看看我添加的完整snipet代码吗？