开发者问题收集

未捕获 TypeError：无法设置未定义的属性“background”。将样式添加到类中

2018-06-17
1697
javascript

我尝试添加一些背景样式，效果很好，但是它显示了错误，但我不知道如何使用 for 语句添加样式。 无需逐一执行。

我遇到的另一个问题是，如果我记录我的 amarillos。 类，它会说 undefined 并且 false 因为在 HTML 中我定义了 amarillos 在西班牙语中是黄色的。

所有代码都运行良好，只是我尝试使用 var amarillos 时遇到了麻烦。 谢谢

在此处输入图像描述

代码： 

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Java Script Avanzado</title>
  </head>
  <body>
    <h1>Sesión de Java Script Avanzado</h1>
    <p>Nuestro primer Script en JS Avanzado</p>
    <section id="miSeccion">
      <h1>Listado de texto de los divs</h1>
      <hr>
    </section>
    <div class="miCaja" id="miCaja">
      Hola soy una caja
    </div>
    <div class="rojo">
      Soy el primer div!
    </div>
    <div class="amarillo">
      Soy el segundo div
    </div>
    <div class="amarillo">
      Soy el tercer div
    </div>
    <script type="text/javascript" src="dom.js">
    </script>
  </body>
</html>

'use strict'

//DOM - Document Object Model

function cambiaColor(color) {
  caja.style.background = color;
}

//Conseguir elementos con un ID concreto
//var caja = document.getElementById('miCaja');

var caja = document.querySelector("#miCaja")

caja.innerHTML = "Texto en la caja desde html";
caja.style.background = "red";
caja.style.padding = "20px";
caja.style.color = "white";
caja.className = "hola";
console.log(caja);

// Conseguir elementos por sus etiqueta
var todosLosDivs = document.getElementsByTagName("div");

var div2 = todosLosDivs[2];
div2.innerHTML = "ya no me gusto lo escrito anterior";
div2.style.background = "yellow";


//todosLosDivs.forEach((valor indice)=>{
var seccion = document.querySelector("#miSeccion")
var hr = document.createElement('hr');

  var valor;
  for(valor in todosLosDivs){

    if (typeof todosLosDivs[valor].textContent == 'string' ) {
      console.log(todosLosDivs[valor]);
      var parrafo = document.createElement("p");
      var texto = document.createTextNode(todosLosDivs[valor].textContent);
      parrafo.append(texto);
      seccion.append(parrafo);
    }
}
seccion.append(hr);

//Conseguir elementos por su clase css
  var amarillos = document.getElementsByClassName("amarillo");
  console.log(amarillos);
  console.log(amarillos.className);
  var color;
  for(color in amarillos){
      amarillos[color].style.background = "yellow";
  }
2个回答

那怎么样？它实际上返回一个 HTMLCollection，每个索引处都有您的元素，因此您必须指定要操作的集合的哪个索引。

我希望我帮到了您 O:-)

很棒的循环应该是这个： 

    //Conseguir elementos por su clase css
      var amarillos = document.getElementsByClassName("amarillo");

        for (let amarillo of amarillos)
        {
            amarillo.style.background = "yellow";
        }

      console.log(amarillos);
      console.log(amarillos[0]);
      console.log(amarillos[0].style.background);
      console.log(amarillos[0].className);
Martin Melichar
2018-06-17

像这样编辑从末尾算起的第 7 行：

var amarillos = Array.from(document.getElementsByClassName("amarillo"));

因为 document.getElementsByClassName("amarillo") 返回 HTMLCollection ，它与 Array

不同
2018-06-17