当前位置：文江博客话题详情

javascript+css无刷新实现页面样式的更换

发布于 2022-09-04 02:23:37 字数 1583 浏览 6 评论 0

在ASP.NET自带功能中，如果要更换页面的主题，只能是放在Page_PreInit事件里，而这个事件一般都要经过刷新才会执行，所以这就导致效率下降，用户体验也会跟着下降。
下面我将介绍一下关于Javascript+CSS的解决办法：

首先建立一个html文件，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无刷新更改页面样式</title>
<link id="theme" href="red.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<div>这是页面的文字</div>
<input id="btnChangeRedTheme" type="button" value="red" />
<input id="btnChangeBlueTheme" type="button" value="blue" />
</body>
</html>

复制代码接下来就是通过button的单击事件来更改link标签中的href属性了，以下是jQuery代码，用Javascript实现也很简单。

<script type="text/javascript">
$(document).ready(function(){
$('#btnChangeRedTheme').click(function(event){$('#theme').attr('href','red.css');});
$('#btnChangeBlueTheme').click(function(event){$('#theme').attr('href','blue.css');});
});
</script>

复制代码这样就OK了。