javascript – CSS Style not working after refreshing the div-ThrowExceptions

Exception or error:

I’m trying to refresh a div using jQuery, but after refreshing my CSS doesn’t work.

FYI : I dynamically set CSS,

document.getElementById("sai").style.color = "green";



window.setInterval('refresh()', 1000);  
      function refresh() {
        $('#nav-tabContent').load(' #nav-tabContent')

      }

After refreshing the div, green is not used.

How to solve:

When you add color like this:

document.getElementById("sai").style.color = "green";

you add it as an inline style.

When you rerender the div again, the inline styles that you add dynamically disappears. You should add the color again after this action like below:

window.setInterval('refresh()', 1000);  
      function refresh() {
        $('#nav-tabContent').load(' #nav-tabContent');
        document.getElementById("sai").style.color = "green";
      }

###

You should apply the CSS style again after the refresh as it is dynamically applied. When you refresh the div, the browser will render it again with the code it contains statically and that is why the dynamically added css will not be applied.

###

It should be written this way. The link for the working code is here.

window.setInterval('refresh()', 1000);  
      function refresh() {
        $('#nav-tabContent').load(' #nav-tabContent')
      }
document.getElementById("sai").style.color = "green";

Leave a Reply

Your email address will not be published. Required fields are marked *