如果active = true，则将其在javascript中涂成红色

Question

我需要检查是否active = true，而不是将文本涂成红色，但是我做不到。

var products = [
	{name: 'Коля', active: true},
	{name: 'Вася', active: true},
	{name: 'Петя', active: false},
];

var ul = document.createElement("ul");

for( var i = 0; i < products.length; i++ ){
    
    var li = document.createElement("li");
    li.innerHTML =  products[i].name + " " + products[i].active;
    if( products[i].active == true ){
    	products[i].name.style.color = "red";
    } 
    ul.appendChild(li);
    document.body.appendChild(ul);
}

Answer 1

您需要设置创建的li元素的style属性而不是products[i].name

li.style.color = "red";

代替

products[i].name.style.color = "red";

var products = [
	{name: 'Коля', active: true},
	{name: 'Вася', active: true},
	{name: 'Петя', active: false},
];

var ul = document.createElement("ul");

for( var i = 0; i < products.length; i++ ){
    
    var li = document.createElement("li");
    li.innerHTML =  products[i].name + " " + products[i].active;
    if( products[i].active == true ){
    	li.style.color = "red";
    } 
    ul.appendChild(li);
    document.body.appendChild(ul);
}

Answer 2

将products[i].name.style.color = "red";替换为li.style.color = "red";

var products = [{
    name: 'Коля',
    active: true
  },
  {
    name: 'Вася',
    active: true
  },
  {
    name: 'Петя',
    active: false
  },
];

var ul = document.createElement("ul");

for (var i = 0; i < products.length; i++) {

  var li = document.createElement("li");
  li.innerHTML = products[i].name + " " + products[i].active;
  if (products[i].active == true) {
    li.style.color = "red";
  }
  ul.appendChild(li);
  document.body.appendChild(ul);
}

一种替代方法是在内联样式上使用类

var products = [{
    name: 'Коля',
    active: true
  },
  {
    name: 'Вася',
    active: true
  },
  {
    name: 'Петя',
    active: false
  },
];

var ul = document.createElement("ul");

for (var i = 0; i < products.length; i++) {

  var li = document.createElement("li");
  li.innerHTML = products[i].name + " " + products[i].active;
  if (products[i].active === true) {
    li.classList.add("red");
  }
  ul.appendChild(li);
  document.body.appendChild(ul);
}

.red {
  color: red;
}

Answer 3

您需要设置li的样式，而不是数据的样式，并在末尾仅附加一个ul。

var products = [
        { name: 'Коля', active: true },
        { name: 'Вася', active: true },
        { name: 'Петя', active: false },
    ],
    ul = document.createElement("ul"),
    li, i;

for (i = 0; i < products.length; i++) {
    li = document.createElement("li");
    li.innerHTML =  products[i].name + " " + products[i].active;
    if( products[i].active) {   // no need for checking a boolean for true
        li.style.color = "red"; // add to element
    } 
    ul.appendChild(li);
}

document.body.appendChild(ul); // only once

Answer 4

products[i].name不是HTML元素。因此，您无法为此设置style。要将style设置为li，请更改：

products[i].name.style.color = "red";

收件人

li.style.color = "red";

请注意： if(products[i].active == true)等同于if(products[i].active)。您无需将布尔值与true或false进行显式比较：

var products = [
  {name: 'Коля', active: true},
  {name: 'Вася', active: true},
  {name: 'Петя', active: false},
];

var ul = document.createElement("ul");

for( var i = 0; i < products.length; i++ ){ 
  var li = document.createElement("li");
  li.innerHTML =  products[i].name + " " + products[i].active;
  if( products[i].active ){
    li.style.color = "red";
  } 
  ul.appendChild(li);
  document.body.appendChild(ul);
}

Answer 5

您的情况下的style.color是什么？ 我的猜测是您想将DOM节点完全涂成红色。 尝试使用li元素代替产品对象

var products = [
	{name: 'Коля', active: true},
	{name: 'Вася', active: true},
	{name: 'Петя', active: false},
];

var ul = document.createElement("ul");

for( var i = 0; i < products.length; i++ ){
    
    var li = document.createElement("li");
    li.innerHTML =  products[i].name + " " + products[i].active;
    if( products[i].active == true ){
    	li.style.color = "red";
    } 
    ul.appendChild(li);
    document.body.appendChild(ul);
}

Answer 6

使用li代替products element

li.style.color = "red";

var products = [{
    name: 'Коля',
    active: true
  },
  {
    name: 'Вася',
    active: true
  },
  {
    name: 'Петя',
    active: false
  },
];

var ul = document.createElement("ul");

for (var i = 0; i < products.length; i++) {

  var li = document.createElement("li");
  li.innerHTML = products[i].name + " " + products[i].active;
  if (products[i].active == true) {
    //products[i].name.style.color = "red";
    li.style.color = "red";
  }
  ul.appendChild(li);
  document.body.appendChild(ul);
}