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

0

154
Views
Haga clic en un div para cambiar el color de la sombra, vuelva a hacer clic para volver a cambiar

¿Es posible hacer esto sin usar JQuery?

Me gustaría que un div cambiara el color de su sombra una vez que hice clic en él, y cuando vuelva a hacer clic en él, volverá a cambiar a su color original. Aquí está el código: http://jsfiddle.net/kqv7x5f8/5/

 var btn = document.getElementById("btn"); function toShadow() { document.getElementById("btn").style.boxShadow = "5px 5px red" }
 #btn { height: 20px; border: 2px solid black; box-shadow: 5px 5px black; }
 <div id="btn" onclick="toShadow"> click to change shadow; click again to change back </div>

¡Gracias!

about 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

En este caso, es mejor alternar una clase usando classList.toggle()

 const button = document.getElementById('btn'); button.addEventListener('click', e => e.currentTarget.classList.toggle('shadow'));
 #btn { height: 20px; border: 2px solid black; } .shadow { box-shadow: 5px 5px black; }
 <div id="btn"> click to change shadow; click again to change back </div>

about 3 years ago · Juan Pablo Isaza Report

0

Puede hacer uso de un booleano con una declaración if/else para este problema

 var btn = document.getElementById("btn"); var isRed = false; function toShadow(){ if(isRed){ btn.style.boxShadow ="5px 5px black" isRed = false; } else { btn.style.boxShadow ="5px 5px red" isRed = true; } }
about 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