刷新页面更换CSS样式表-对网上document.write方式的修正

最新推荐文章于 2024-04-27 10:05:11 发布

liangklfang

最新推荐文章于 2024-04-27 10:05:11 发布

阅读量3.6k

点赞数

分类专栏： javascript 前端开发

本文链接：https://blog.csdn.net/liangklfang/article/details/50540870

版权

前端开发同时被 2 个专栏收录

50 篇文章 0 订阅

订阅专栏

javascript

41 篇文章 0 订阅

订阅专栏

无意中看到了这样一篇博客刷新页面更换CSS样式表，所以想动手试试能不能满足结果，结果可想而知

<head>
<script type="text/javascript">
var cssname=Math.floor(Math.random()*2+1);
document.write("<link rel='stylesheet' type='text/css' href='"+cssname+"'.css/>");
</script>
……
</head>

该博客的问题在于运用了document.write,而该方法会重写整个页面，而不仅仅是head中的css，所以原来页面中的内容全部消失了，所以这种方法显然是不对的。而且这种切换的方式不能保证每一次刷新都获取不同的css，所以看我下面的实现。

 function ChangeCss(n)
	  {
                var num=n+"";
		   //轮训的背景图片的个数
		  if(window.name==""){ 
				window.name = "0"; 
			}
			else{ 
				//只有1.css和2.css两个文件，所以我需要对window.name进行控制
				if(window.name===num)
					  window.name="1";
				else
				{
					window.name = parseInt(window.name) + 1; 
				 }
				var link=document.createElement("link");
				link.type="text/css";
				link.rel="stylesheet";
				link.href=window.name+".css";
				document.getElementsByTagName('head')[0].appendChild(link);
		} 
	}

在这个函数中，我使用了window.name来保存数据，因为window.name的值是可以防止刷新的，也就是说页面刷新后是依然存在的。同时，我没有用document.write的方法，而是用动态创建link标签然后加载css的方式，所以就可以防止修改整个页面。

问题:这里采用了appendChild的方法，那么每一次修改了css文件后是否会重复添加很多同样的css文件?

解答：虽然上一次添加了1.css，后面可能又会添加css，但是通过测试发现没有重复添加同一个文件到head中。也就是说页面中始终只有一个css文件。在FF，chrome中都测试成功了。不过话又说回来，即使存在重复添加的情况，那么也是可以在添加之前移除的!(这种方式需要命名方式符合一定的规定)

在解答这个问题的同时，看到了这一篇博客介绍：cssrefresh.js-CSS文件自动刷新。cssrefresh.js可以实现如下的功能：当你CSS文件修改的时候，无需刷新页面，页面自动呈现新样式。我想一定用得着