How to change CSS styling of HTML element through Javascript?

Question

Attempting to change css styling of an element through Javascript (.setAttribute). It works normally though when implementing this into my website it does not work. The function triggers when the screen resizes but the .setAttribute action does not function, it refuses to change the element but sends alerts telling me the function is being called. Nevertheless, I have an alert passing me the element I am trying to edit and different style values of that element. Despite failing to be able to change the styling, the element is found when the function triggers; I set the opacity of the element to 0 and had an alert pass me the opacity following and it registered as 0 (registering the change) though it does not physically do anything to the element through HTML. I attempted to see if I could see the element change briefly in the chrome console when the function triggers and it does not highlight/change at all.

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

Your example works for me on CodePen, I changed main_details to the opacity example and it seemed to work as expected. — BankBuilder, Jul 22 '22 at 22:40
It works in the snippet here as well. What do you expect to happen when you set `grid-template-columns: 100%`? Sidenote: look into [`matchMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) to detect screen sizes. It's more performant than listening to the `resize` event. — Emiel Zuurbier, Jul 22 '22 at 22:42
Nothing, this just doesnt seem to work on my website; The function is called, I am able to target and send an alert of the element I am attempting to change but when the .setAttribute line is called and changes are expected nothing happens — countdookoo, Jul 22 '22 at 22:45
For some reason I am unable to change the element although I am able to "find" it — countdookoo, Jul 22 '22 at 22:46
Does this answer your question? [How to change CSS property using JavaScript](https://stackoverflow.com/questions/15241915/how-to-change-css-property-using-javascript) — Dexygen, Jul 22 '22 at 22:46
It does not, there is something blocking me from making any changes to the element I am targeting in my function. — countdookoo, Jul 22 '22 at 22:47

How to change CSS styling of HTML element through Javascript?

0 Answers0