Tengo problemas para cambiar el css en javascript. Esto es lo que intenté hacer:
<style id="1"> body { background-color: pink; } </style> <script> var myVar = document.getElementById("1").style.backgroundColor = "brown"; </script>El css funciona, hace que el fondo sea rosa, pero el javascript no cambia el color de fondo del css a marrón.
Está intentando establecer el color de fondo de la etiqueta <style> . Asi no es como funciona esto. En lugar de configurar el estilo de la etiqueta <style> , debe configurar el estilo del propio cuerpo. Este artículo de W3Schools brinda una explicación si la necesita.
<head> <style> body { background-color: pink; } </style> </head> <body id="1"> <script> document.getElementById("1").style.backgroundColor = "brown"; </script> </body>También vale la pena señalar que no necesita asignar el elemento a una variable a menos que lo vaya a usar más adelante.
Puedes probar esto:
var myVar = document.getElementById("1").style.backgroundColor = "brown"; body { background-color: pink; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body id="1"> </body> </html>Utilice document.body.style.backgroundColor = "brown"; , no puede poner identificadores o clases en elementos que no sean. Prueba esto;
var myVar = document.body.style.backgroundColor = "brown"; body { background-color: pink; } Esto selecciona el elemento del cuerpo, también podría poner id = "1" en el elemento del cuerpo.