用JS实现一个页面多个css样式实现
更新时间：2008年05月29日 22:53:03 作者：
在Hello,Yang中看见的一篇文章，感觉很有用，转来这里……
第一步：在连接样式表的元素里定义一个id,例如
<link href="1.css" rel="stylesheet" type="text/css" id="css">，
我定义的id是css。
第二步：写一个js函数，代码如下：
<script type="text/javascript">
function change(a){
var css=document.getElementById("css");
if (a==1)
css.setAttribute("href","1.css");
if (a==2)
css.setAttribute("href","2.css");
}
</script>
这个函数的code可以放在页面的任何地方。
第三步：为改变页面的样式表的连接添加一个函数的触发事件，代码如下：
<a href="#" onClick="change(1)">1.css</a>
<a href="#" onClick="change(2)">2.css</a>
该效果在IE和FF下均测试通过，相信大家看完后因该非常明了，利用这个方法我们可以让浏览者自己选择需要显示的样式表，比如年老者可以选择一个字体较大的样式表。这里需要注意的两点是：
一、在这个例子中函数名function后面的名字不能为links或者link，如果为links或者link，样式表将不被改变，具体什么原因我也不大清楚，可能是javascript的保留字符。
二、另外如果是改变整个页面的样式，你需要在样式表文件里定义body的高度为100%
复制代码 代码如下:
<link href="1.css" rel="stylesheet" type="text/css" id="css">，
我定义的id是css。
第二步：写一个js函数，代码如下：
复制代码 代码如下:
<script type="text/javascript">
function change(a){
var css=document.getElementById("css");
if (a==1)
css.setAttribute("href","1.css");
if (a==2)
css.setAttribute("href","2.css");
}
</script>
这个函数的code可以放在页面的任何地方。
第三步：为改变页面的样式表的连接添加一个函数的触发事件，代码如下：
复制代码 代码如下:
<a href="#" onClick="change(1)">1.css</a>
<a href="#" onClick="change(2)">2.css</a>
该效果在IE和FF下均测试通过，相信大家看完后因该非常明了，利用这个方法我们可以让浏览者自己选择需要显示的样式表，比如年老者可以选择一个字体较大的样式表。这里需要注意的两点是：
一、在这个例子中函数名function后面的名字不能为links或者link，如果为links或者link，样式表将不被改变，具体什么原因我也不大清楚，可能是javascript的保留字符。
二、另外如果是改变整个页面的样式，你需要在样式表文件里定义body的高度为100%
相关文章
ES6为js新增了很多方法,包括遍历、查询、替换等等,下面这篇文章主要给大家介绍了关于ES6字符串和数值新增方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
最近项目经理我个项目练练手，其项目需求是要实现翻书效果，看到这个需求后，我真是懵了，这咋整，我可是java出身的啊，这个问题真是难住我了，后来有同事的指导，问题顺利解决，下面小编把学习心得分享，感兴趣的朋友可以参考下2016-06-06
自己写了个JS+CSS的小东西，用来看提升用户体验的。 Name：WindowsTextShow；2008-12-12
这篇文章主要介绍了JavaScript实现拖动对话框效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-10
下面小编就为大家带来一篇JS区分Object与Aarry的六种方法总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
用 javascript 获取当页面上鼠标（光标）位置 和 触发事件的对象 的方法2009-12-12
event.currentTarget与event.target的区别介绍
event.currentTarget与event.target的区别想大家在使用的时候不是很在意，本文以测试代码来讲解它门之间的不同2012-12-12
数组对象是使用单独的变量名来存储一系列的值，数组非常常用，数组是具有连续存储位置的相似类型元素的同质集合。数组是用户定义的数据类型。数组是一种数据结构,我们在其中存储相似数据类型的元素2022-09-09
这篇文章主要为大家详细介绍了js仿京东放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要介绍了javascript实现瀑布流的两种布局方式，一是绝对式布局、二是列式布局，详细介绍了这两种布局方式的原理，本文重点介绍列式布局，感兴趣的小伙伴们可以参考一下2016-01-01
最新评论