HTML网页中无刷新的更换CSS样式

系统以前更换CSS模板的方式总是让人诟病，需要刷新页面来完成更新，这无疑给用户带来了不便。对于用户体验的重视，让我下定决心改进这一功能。经过深思熟虑，我发现其实这个问题并不难解决，只需稍作调整即可。现在我们的系统已经实现了无需刷新页面的模板更换功能，这无疑极大地提升了用户体验。接下来，我想分享一些关于狼蚁网站SEO优化的经验。

对于一个拥有多个页面的网站来说，仅仅在一个页面中调用更换CSS功能来更新页面头部的CSS链接地址是远远不够的。因为这样做无法保证用户在点击其他页面后，新的样式能够应用到新打开的页面中。我们必须有一个全局性的变量来记录这一变化。我选择使用SESSION作为这个全局变量。

当用户点击侧边模板下拉框中的模板时，会触发下拉框的ONCHANGE事件。随后执行一段AJAX程序，该程序将用户选中的模板信息发送给服务器。服务器接收新的模板信息后，会更新代表模板的SESSION值，并向客户端返回成功信息。客户端在接收到成功信息后，会根据这些信息来改变页面样式。

值得注意的是，我在页面头部使用的CSS链接信息是这样的：

这里的css.aspx是一个ASP页面，它的作用是根据SESSION中的当前CSS模板信息来转向相应的CSS样式表文件。这样一来，当客户端接收到服务器端成功更新SESSION的信息后，只需简单地执行以下代码：

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

虽然这看似只是将cssLink的href重新设置为相同的值，但实际上这会触发CSS.ASPX页面重新加载，从而转向新更新的CSS样式表。由于网站的其他页面也采用了这种链接方式，因此在每个页面加载时都会应用更新的样式表。这样，我们就实现了网站的无刷新全局更新样式表功能！

我要提到的是，网站的整体渲染和呈现也是至关重要的。通过使用cambrian.render('body')这段代码，我们可以确保网站的内容以最佳的方式呈现在用户面前，进一步提升用户体验。