“Cómo cambiar el estilo CSS al hacer clic” Código de respuesta

Cómo cambiar el estilo CSS al hacer clic

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>
ST111

JS OnClick Change CSS

<div id="foo">hello world!</div>
<img src="zoom.png" id="image" />
<script>
  $('#image').click(function() {
    $('#foo').css({
        'background-color': 'red',
        'color': 'white',
        'font-size': '44px'
    });
});
  </script>
Undefined

Cómo mantener el estilo después de hacer clic

#activate-div{display:none}    

.my-div{background-color:#FFF} 

#activate-div:checked ~ label 
.my-div{background-color:#000}
Better Butterfly

Respuestas similares a “Cómo cambiar el estilo CSS al hacer clic”

Preguntas similares a “Cómo cambiar el estilo CSS al hacer clic”

Más respuestas relacionadas con “Cómo cambiar el estilo CSS al hacer clic” en JavaScript

Explore las respuestas de código populares por idioma

Explorar otros lenguajes de código