• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

150
Views
¿Cómo cambiar el color de fondo usando .getElementsByClassName en JavaScript?

No importa cómo lo intento, no puedo hacer que funcione. Si uso .getElementById , funciona... pero necesito apuntar a varios divs , así que necesito usar .getElementsByClassName .

Esto es lo que tengo hasta ahora:

 function changeBgColor(color){ document.getElementById("background1").style.background = color; } function changeBackground(color){ document.getElementsByClassName("pls-work").style.background = color; }
 #background1{ background: #c0c0c0; padding: 50px; color: #fafafa; } .background2{ background: #ff7f50; padding: 20px; } .background3{ background: #555; padding: 20px; }
 <h4>First example</h4> <div id="background1"><p>My background color will change.</p></div> <button onclick="changeBgColor('#222');">This function will work, no problem</button> <br><br> <h4>Second example</h4> <div class="background3 pls-work"><p>My background color and my sibling's won't.</p></div> <div class="background2 pls-work"><p>I am the sibling</p></div> <button onclick="changeBackground('#222');">This will not work</button>

He estado buscando en todas partes, pero no puedo encontrar uno en el que usen class en lugar de id .

Agradecería cualquier sugerencia sobre lo que estoy haciendo mal con esto.

almost 3 years ago · Juan Pablo Isaza
3 answers
Answer question

0

getElementsByClassName devuelve un "objeto tipo matriz" de elementos sobre los que debe iterar, a diferencia de getElementById , que devuelve un solo elemento.

Mira esto:

 const changeBgColor = () => { const elements = document.getElementsByClassName('color-me'); const color = document.querySelector('input').value; for (let i = 0; i < elements.length; i++) { elements[i].style.backgroundColor = color; } };
 <p class='color-me'>Color me!</p> <p>Can't change me..</p> <p class='color-me'>Me too!</p> <input type=color /> <button onclick=changeBgColor()>Click Me</button>

almost 3 years ago · Juan Pablo Isaza Report

0

La llamada a document.getElementsByClassName("pls-work") devuelve una HTMLCollection de elementos, no un solo elemento. Debe iterar sobre la colección y establecer la propiedad de estilo en cada elemento.

Ver JS: iterando sobre el resultado de getElementsByClassName usando Array.forEach

almost 3 years ago · Juan Pablo Isaza Report

0

El método getElementsByClassName devuelve un objeto de colección (NodeList), consulte los documentos aquí . Para hacer lo que quieres hacer, tendrás que hacer lo siguiente:

 function changeBackground(color) { let elements = document.getElementsByClassName("pls-work") for (let i = 0; i < elements.length; i++) { elements.item(i).style.background = color } }

Consulte los documentos enumerados anteriormente para obtener más información sobre cómo iterar sobre esta colección.

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error