¿Cómo cambiar un estilo de pseudoclase a través de JavaScript?

Este ejemplo es, por simplicidad, solo una ilustración de lo que debo hacer. Diga, tengo un elemento, qué estilo se establece en un CSS. El estilo se establece para el elemento y también para una Pseudoclase, por ejemplo elemento: desplazarse. Puedo anular el estilo del elemento con el siguiente JavaScript: element.style.setProperty ('property-name', 'new value', ''). ¿Cómo puedo cambiar el estilo de la pseudoclase a través de JavaScript?¿Cómo cambiar un estilo de pseudoclase a través de JavaScript?

Gracias.

<html> 
<head> 
     <style type='text/css'> 
      #myBtn { 
       background-color: red; 
      } 
      #myBtn:hover { 
       background-color: blue; 
      } 
     </style> 
</head> 
<body> 
     <button id='myBtn'>Colored button</button> 

     <button onclick="ChangeColor();">Script button</button> 

     <script type="application/x-javascript"> 
       function ChangeColor() { 
       var Btn = document.getElementById('myBtn'); 
       Btn.style.setProperty('background-color', 'green', ''); 
       }; 
     </script> 
</body> 
</html>

Fuente

2011-06-19 GreenBear

preguntado antes: http://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript – KooiInc

La culpa es mía. Sin embargo, no apareció. – GreenBear

Mira esto: http://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript – Leo

me gustaría utilizar un conjunto diferente de reglas con una clase adicional

<html> 
<head> 
    <style type='text/css'> 
    #myBtn { 
     background-color: red; 
    } 
    #myBtn:hover { 
     background-color: blue; 
    } 
    #myBtn.changed { 
     background-color: green; 
    } 
    #myBtn.changed:hover { 
     background-color: yellow; /* or whatever you want here */ 
    } 
</head>

Y luego

<script type="application/x-javascript"> 
     function ChangeColor() { 
     var btn = document.getElementById('myBtn'); 
     btn.className = "changed"; 
     }; 
</script>

Por supuesto, esto sólo tiene sentido para uno o un par de diferentes valores que desea tener para tu color.

Fuente

2011-06-19 21:27:11

Estaba considerando la misma ruta, pero esperaba que pudiera haber un enfoque más directo. Gracias por tu ayuda. – GreenBear

CSS pseudo-clases y pseudo-elementos no son parte de la DOM, y por lo tanto no puede modificar sus propiedades de estilo directamente utilizando JavaScript.

Algunas pseudo-clases dinámicas como :hover pueden tener eventos JavaScript similares (onmouseover onmouseout) que puede usar para cambiar estilos, pero esto no significa que exista una correlación real entre los dos.

Fuente

2011-06-19 21:17:00 BoltClock

Bueno, eso no es del todo cierto, JavaScript ciertamente puede crear un nuevo elemento '

¿Cómo cambiar un estilo de pseudoclase a través de JavaScript?

Respuesta