No refreshed replacement CSS styles in HTML Web pages

Source: Internet
Author: User

The original replacement of the system CSS template is to refresh the child page, I have been very dissatisfied with this function, 95% of the features are not refreshed with Ajax implementation, it is not in this small replacement page CSS template to add some nausea to users? So, yesterday evening to consider the realization of this function, the original found that it is not difficult, small change on the OK, now the template replacement is not to refresh the page to complete, obviously in the sense of a much better than the original, the following talk about experience:

For a multiple-page Web site, the replacement of CSS can not be simply a page in the call to replace the CSS feature on the page to update the link on the CSS address, because it doesn't guarantee that the new style should go to the newly opened page after clicking on another page, so be sure to have a global variable to record it, I chose the session, when the user clicked on the side Template Drop-down box template, triggered the dropdown box onchange event, the implementation of an AJAX program, the function of the program is the user selected template information sent to the server, After the server receives the new template information, it updates the session value that represents the template, and then returns the success message to the client, and the client changes the page style based on the success information returned, noting that the CSS link information I wrote in the header of the page is as follows:

<link id=csslink href= "css.aspx" Type=text/css rel=stylesheet>

Css.aspx is a asp.net page, its role is only a single based on the current CSS template information in the session to the appropriate CSS style sheet file! This is where the client has received the server-side successful update session information just don't have to think about anything else, directly:

document.getElementById ("Csslink"). Href=document.getelementbyid ("Csslink"). href;

Re-write Csslink's href, although it is the same value, but it will stimulate the css.aspx page to read again, so that the css.aspx page can go to the new updated CSS style sheet! Because the style sheet-link information for other pages of the site is written in this way, each page is loaded with the latest updated style sheet, so the Web site has no refreshed global update stylesheet!!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.