时间戳

首页 > 解决方案 > 未捕获的类型错误：无法设置未定义的属性“背景”。将样式放在课堂上

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

标签： javascript

解决方案

那个怎么样？它实际上返回一个 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);

推荐阅读