今天研究了一下JS的用setAttribute方法实现一个页面两份样式表的效果,具体方法如下:
第一步:在连接样式表的元素里定义一个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下均测试通过,相信大家看完后因该非常明了,利用这个方法我们可以让浏览者自己选择需要显示的样式表,比如年老者可以选择一个字体较大的样式表。这里需要注意的两点是:(梦苑工作室 http://www.friend365.cn/)
1、在这个例子中函数名function后面的名字不能为links或者link,如果为links或者link,样式表将不被改变,具体什么原因我也不大清楚,可能是javascript的保留字符。
2、另外如果是改变整个页面的样式,你需要在样式表文件里定义body的高度为100%
分享到:
相关推荐
6_1.htm 用JavaScript实现一个页面两份样式表。 6_2.htm 用JavaScript动态更换图像元素中的图像。 6_3.htm 利用搜索引擎引用来高亮页面关键字。 6_4.htm 使用匿名函数为定时器传递参数。 6_5.htm Web页面...
6_1.htm 用JavaScript实现一个页面两份样式表。 6_2.htm 用JavaScript动态更换图像元素中的图像。 6_3.htm 利用搜索引擎引用来高亮页面关键字。 6_4.htm 使用匿名函数为定时器传递参数。 6_5.htm Web页面...
替换页面中的样式表。 个人不建议使用后两种方法,几乎所有的功能都可以通过前两种方式实现,并且代码更加清晰、易理解。 后面还会说说如何获取元素的真实样式和一个表单中的注意事项。 1、修改节点style(内联样式...
javascript+CSS实现的圆角提示框可,可表更改样式。
1.1连接两个或多个字符串 1.2连接字符串和另一种数据类型 1.3条件比较字符串 1.4在字符串中查找子字符串 1.5从一个字符串提取子字符串 1.6检查一个存在的、非空的字符串 1.7将一个关键字字符串分解为...
CSS就是Cascading Style Sheets,中文翻译...W3C把DHTML(Dynamic HTML)分为三个部分来实现:脚本语言(包括JavaScript、Vbscript等)、支持动态效果的浏览器(包括Internet Explorer、Netscape Navigator等)和CSS样式表。
3.8 控制两个文本框只输其一 3.9 判断编辑器中是否包含特殊字符 3.10 判断文本中回车的数量 3.11 判断字符串中有多少汉字 3.12 去除字符串的前后空格 3.13 刷新时清空所有文本框 3.14 随意改变大小的文本框 3.15 ...
只需在页面引入正确的js文件,即可实现轮换广告。样式表文件根据需要修改。
示例描述:介绍JavaScript与样式表。 12.1.html 外部定义样式的优先级。 12.2.html 百分比单位的使用。 12.3.html 在当前页面中嵌入CSS样式文件。 12.4.html JavaScript实现动态更改元素的CSS样式。...
其中,有21个png图片,20个svg图标,10个js脚本,8个vue组件,6个css样式表,3个json数据文件,2个html页面,2个webp图像以及1个gitignore配置文件和1个Markdown文档。项目旨在通过Vue框架和JavaScript编程语言,...
3.8 控制两个文本框只输其一 3.9 判断编辑器中是否包含特殊字符 3.10 判断文本中回车的数量 3.11 判断字符串中有多少汉字 3.12 去除字符串的前后空格 3.13 刷新时清空所有文本框 3.14 随意改变大小的文本框 3.15 ...
本项目是一个基于Javascript的对战五子棋游戏,包含27个文件,主要文件类型包括图片、音频、JavaScript脚本、CSS样式表、HTML页面、Git忽略文件、LICENSE文件、Markdown文档和图标文件。系统设计旨在为用户提供一个...
14.3.2 使用JwaScript和CSS实现页面多种风格的实时替换 14.4 总结 第15章 数据存储的脚本化 15.1 什么是cookie 15.1.1 浏览器和客户端cookie 15.1.2 cookie的属性 15.2 cookie的客户端存取...
本项目是基于Vue框架开发的JavaScript企业级研发项目管理系统,包含2430个文件,主要文件类型包括Vue组件、JavaScript脚本、CSS样式表、HTML页面、PNG图片、SVG图形、JPG图片、GIF动画、SCSS样式表、Markdown文档和...
14.11.2 JavaScript如何操作样式表 14.11.3 style对象 14.11.4 className属性 14.11.5 下拉菜单和提示框 14.12 应知应会 练习 第15章 W3C DOM与JavaScript 15.1 W3C DOM ...
第16章介绍了处理CSS样式和样式表的W3C DOM标准。第17章介绍了用于处理事件(以及实现这些任务的遗留技术和特定于IE的技术)的W3C DOM标准。第18章介绍了和HTML表单元素交互的DOM。第22章介绍了如何脚本化一个HTML...
- 前端:大量运用JavaScript实现动态交互效果,辅以CSS进行页面样式设计; - 后端:采用Java编写业务逻辑,利用Spring框架进行项目管理,SpringMVC处理请求映射,MyBatis作为数据持久化层; - 配置文件:使用XML进行...
这段代码是一份HTML、CSS和JavaScript的代码,用于创建一个名为“一百种语言的Love”的网页。...同时,使用CSS样式表和JavaScript代码来实现动态加载内容也可以提高用户体验,并使网页更具交互性。
此存储库包含 4 个名为的子文件夹:- 图片文件夹CSS文件夹JavaScript 文件夹HTML页面图像文件夹包含网页的背景图像。 css 文件夹包含“style.css”文件,其中包含用于样式设置和改进演示和内容的 css 代码。 js ...
如果在加载default.css后,再加载其中某一样式表,则会覆盖默认风格,展示新风格; 每次随机加载skin1.css、skin2.css、skin3.css,或者使用默认风格。需要注意的一点是,随机加载也有可能使这一次和上一次的样式...