How to Change CSS styles without refreshing in the static HTM page

 

 

On the static HTM page, you can change the CSS style without refreshing it!

The original CSS template of the system needs to be refreshed again. I have been very dissatisfied with this function, and 95% of the functions are implemented without refreshing AJAX, is it disgusting for users to change the CSS template on this small page? Therefore, the implementation of this function was taken into consideration last night. It turns out that it is not difficult to implement it. If you just change it, it will be OK. Now, you do not need to refresh the page to replace the template on the system, obviously, it feels much better than the original one. Let's talk about the experience below:

For a multi-page website, changing CSS cannot simply call the change CSS function in one page to update the CSS address of the link on this page, because it cannot guarantee that the new style should be added to the new page after another page is clicked, it must have a global variable to record it, I chose SESSION. When the user clicks the template in the side Template drop-down box, the ONCHANGE event in the drop-down box is triggered and an AJAX program is executed, the function of the program is to send the template information selected by the user to the server. After receiving the new template information, the server updates the SESSION value of the template and returns the successful information to the client, the client changes the page style based on the returned success Information. Note: The CSS link information I wrote in the page header is like this:

Program code
<LINK id = cssLink href = "css. aspx" type = text/css rel = stylesheet>

Css. aspx is an ASP.net page. Its function is to switch to the expected CSS style table file based on the current CSS template information in the SESSION! In this case, after receiving the successful SESSION update information from the server, the client does not need to consider other things:

      Document. getElementById ("cssLink"). href = document. getElementById ("cssLink"). href;

Write the href of cssLink again. Although it is the same sub-value, it will stimulate CSS. read the ASPX page again. on the ASPX page, you can go to the newly updated CSS style sheet! Because the link information of style sheets on other pages of the website is written in this way, the latest style sheets will be applied during each page loading, the global update style sheet of the website is no longer refreshed !!