Agregar estilo JavaScript
// Bad:
element.setAttribute("style", "background-color: red;");
// Good:
element.style.backgroundColor = "red";
Dizzy Dog
// Bad:
element.setAttribute("style", "background-color: red;");
// Good:
element.style.backgroundColor = "red";
const elem = document.getElementById('elem-id');
// Now that we got the element we needed,
// there are 3 ways that we can style it when it's clicked
// method 1: .onclick
elem.onclick = () => {
elem.style.backgroundColor = 'red';
}
// method 2: .addEventListener
elem.addEventListener('click', function(){
elem.style.backgroundColor = 'red';
})
// method 3: function
function funcName(){
elem.style.backgroundColor = 'red';
}
// now that we declared the function we need to call it on click,
// we can use both method 1 & 2, replace the code and call the function there
// or we can call it on the html attribute 'onclick'
// <div id="elem-id" onclick="funcName"></div>var elem = document.querySelector('#some-element');
// Set color to purple
elem.style.color = 'purple';
// Set the background color to a light gray
elem.style.backgroundColor = '#e5e5e5';
// Set the height to 150px
elem.style.height = '150px';
// Getting the element first
var myElement = document.querySelector("#myElement");
// examples for updating styles
myElement.style.color = "blue";
myElement.style.backgroundColor = "red";firstName = "John";
lastName = "Doe";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);element.style.backgroundColor = "red"; // set the background color of an element to red