用JS实现一个页面多个css样式实现
2023-06-13 09:14:00 时间
第一步:在连接样式表的元素里定义一个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%
相关文章
- css怎么改鼠标样式,如何利用CSS改变鼠标的样式
- html js 全局 变量,JS定义全局变量
- 在html中加入外部css样式,如何引入CSS样式表?
- JS获取当前年份_js获取当前时间年月日
- js 数组去除重复数据-当WPS开始像支持VBA一样支持JS语言时,微软又该何去何从?
- 【JS 逆向百例】猿人学系列 web 比赛第五题:js 混淆 - 乱码增强,详细剖析
- 使用JS实现Redis数据读取(js读取redis)
- 利用 JS 实现 Redis 的连接(js连接redis)
- 使用 JS 操作 Redis:实现强大数据存储.(js调用redis)
- JS+CSS模拟IP输入框
- IE和FireFox(FF)中js和css的不同
- IE6下js通过css隐藏select的一个bug
- DIV+CSS+JS不间断横向滚动实现代码
- JS实现标签页效果(配合css)
- js+css实现增加表单可用性之提示文字
- js+css实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
- js获取当前地址JS获取当前URL的示例代码
- php实现压缩多个CSS与JS文件的方法
- ThinkPHP模版中导入CSS和JS文件的方法
- Windows下使用apache模块实现合并多个js、css提高网页加载速度
- asp.net后台动态添加JS文件和css文件的引用实现方法
- php,js,css字符串截取的办法集锦