Intentando cambiar el estilo css de un elemento a través de Javascript (.setAttribute). Funciona normalmente, aunque al implementar esto en mi sitio web no funciona. La función se activa cuando la pantalla cambia de tamaño pero la acción .setAttribute no funciona, se niega a cambiar el elemento pero envía alertas que me dicen que se está llamando a la función. Sin embargo, tengo una alerta que me pasa el elemento que estoy tratando de editar y diferentes valores de estilo de ese elemento. A pesar de no poder cambiar el estilo, el elemento se encuentra cuando se activa la función; Establecí la opacidad del elemento en 0 y recibí una alerta que me pasó la siguiente opacidad y se registró como 0 (registrando el cambio) aunque físicamente no le hace nada al elemento a través de HTML. Intenté ver si podía ver el elemento cambiar brevemente en la consola cromada cuando la función se activa y no se resalta/cambia en absoluto.
<!DOCTYPE html> <html> <body> <button id="my_button" onclick="paddingr_resize()">Try it</button> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> function paddingr_resize(){ var w = window.innerWidth; alert(w) if (w >= 1){ alert("perfect") let main_details1 = "grid-template-columns:100%;" document.getElementById("my_button").setAttribute("style", (main_details1)); }else if(w <= 1225 && w >= 1036){ alert("2") } } var globalResizeTimer = null; $(window).resize(function() { if(globalResizeTimer != null) window.clearTimeout(globalResizeTimer); globalResizeTimer = window.setTimeout(function() { paddingr_resize(); }, 200); }); </script> </body> </html>