动态切换css

方法一:给link一个id,直接获取该DOM操作href

<link rel="stylesheet"  id="stylelink" type="text/css"/>

<a href="#" οnclick='javascript:document.getElementById("stylelink").href = "blue.css";return false;'>1111</a>
<a href="#" οnclick='javascript:document.getElementById("stylelink").href = "red.css";return false;'>1111</a>

方法二:

 <!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" >
<title>无标题 1</title>
<link rel="alternate stylesheet" href="red.css" type="text/css" title="red" media="screen, projection"/>
<link rel="alternate stylesheet" href="blue.css" type="text/css" title="blue" media="screen, projection"/><script type="text/javascript">function setActiveStyleSheet(title) {var i, a, main;if (title) {for (i = 0; (a = document.getElementsByTagName('link')[i]); i++) {if (a.getAttribute('rel').indexOf('style') != -1 && a.getAttribute('title')) {a.disabled = true;if (a.getAttribute('title') == title) a.disabled = false;}}}}
</script>
</head><body>
<a href="#" onclick="setActiveStyleSheet('red'); return false;" >red</a>
<a href="#" onclick="setActiveStyleSheet('blue'); return false;" >blue</a>
<a href="#" onclick="setActiveStyleSheet('none'); return false;">none</a>
</body>
</html>

 

转载于:https://www.cnblogs.com/FlyCat/archive/2012/07/02/2573749.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/274738.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用 GTD 优化自己的工作和生活

大家好&#xff0c;我是若川。持续组织了8个月源码共读活动&#xff0c;感兴趣的可以点此加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

模仿不再受宠若惊

If you haven’t heard of the Jio-Zoom plagiarism clash, you’re probably living under a rock (which may not be a bad idea given the state of the world right now). The turf war between Jio Meet and Zoom began when the Indian telecom giant ripped off the Chi…

一个计算机爱好者的不完整回忆(二十八)关于计算机书籍

我只在大学阶段在图书馆看了很多计算机方面的书&#xff0c;无论已经老得都残破了还是最新出版的。前两天又看到论坛中有关于计算机书籍特别是国内人士编写或翻译的计算机书籍的评论的文章&#xff0c;谭浩强老先生又毫无悬念的被牵连了进来。也发表一下自己的一些观点吧。   …

Vue2剥丝抽茧-响应式系统 系列

大家好&#xff0c;我是若川。持续组织了8个月源码共读活动&#xff0c;感兴趣的可以点此加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

word文本样式代码样式_使用文本样式表达创建真相来源

word文本样式代码样式As of After Effects 17.0, you can use expressions to edit text styles in After Effects. Here’s why this would transform your workflow:从After Effects 17.0开始&#xff0c;您可以使用表达式在After Effects中编辑文本样式。 这就是这将改变您的…

mvn备忘

创建web工程 mvn archetype:generate -DgroupIdcom.malangmedia -DartifactIdautoDeployToJetty -DarchetypeArtifactIdmaven-archetype-webapp -Dversion1.0 添加jetty插件 <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.or…

前端框架源码解读之Vite

前端工具链十年盘点&#xff1a;https://mp.weixin.qq.com/s/FBxVpcdVobgJ9rGxRC2zfgWebpack、Rollup 、Esbuild、Vite ?webpack: 基于 JavaScript 开发的前端打包构建框架&#xff0c;通过依赖收集&#xff0c;模块解析&#xff0c;生成 chunk&#xff0c;最终输出生成的打包…

hp-ux_UX中的格式塔-或-为什么设计师如此讨厌间距

hp-uxI’ve been lucky so far in my design career to have worked with engineers that seem genuinely interested in learning about design. Perhaps, as mentioned in the title, it’s more about them trying to figure out why it matters so much to us that there i…

很多人都不知道,其实博客园给我们博客开了二级域名

如题。一直都在邮件签名里写自己的博客地址为&#xff1a; http://www.cnblogs.com/datacool&#xff1b;直到有天突然发现使用&#xff1a;http://datacool.cnblogs.com也可以访问。不知道的赶紧测试&#xff0c;后者明显要酷很多啊。该不是我是最后一个知道的吧&#xff0c;知…

JavaScript 数组新增 4 个非破坏性方法!

大家好&#xff0c;我是若川。持续组织了8个月源码共读活动&#xff0c;感兴趣的可以点此加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

自行车改装电动车怎么样_电动车听起来应该是什么样?

自行车改装电动车怎么样The sound of an all-electric car accelerating doesn’t have to sound like a standard combustion engine, It could sound like anything.全电动汽车加速的声音不必听起来像是标准的内燃机&#xff0c;它可以听起来像任何东西。 These were the wor…

C++中的三种继承public,protected,private(转)

三种访问权限 public:可以被任意实体访问 protected:只允许子类及本类的成员函数访问 private:只允许本类的成员函数访问 三种继承方式 public 继承 protect 继承 private 继承 组合结果 基类中 继承方式 子类中 public &#xff06; public继承 > public public &#xff0…

如何碎片化时间学前端,了解前沿趋势

我很开心在前端行业认识了一批优秀且乐于分享的朋友&#xff0c;他们的技术分享与职业观点让我获益良多&#xff0c;推荐给大家一起关注。程序员成长指北Node.js 前端工程化 低代码考拉小姐姐&#xff0c;一个有趣且乐于分享的人&#xff01;目前就职于某知名外企&#xff0c;负…

谷歌pay破解_Google Pay缺少Google闻名的一件事-UX案例研究

谷歌pay破解Disclaimer: The views expressed in the blog post is purely based on personal experience. It was not influenced by any external factor.When Google launched Tez (now Google Pay) in India during 2017, their primary goal was to design a simple payme…

进阶高级前端,这位大前端架构师一定不能错过

今天给大家介绍一位好朋友&#xff1a;这波能反杀&#xff1a;一位拥有十年工作经验&#xff0c;对学习方法有独到理解的资深大前端架构师。一、博客早在 2017 年初&#xff0c;波神在简书平台以《前端基础进阶》为名&#xff0c;更新了一系列优质文章&#xff0c;获得大量认可…

memcached应用策略(转)

memcached应用策略&#xff08;转&#xff09;(2012-04-05 11:10:02) 转载▼标签&#xff1a; memcached 应用策略 it分类&#xff1a; linux_c memcached应用策略memcached 主要的作用是为减轻大访问量对数据库的冲击&#xff0c;所以一般的逻辑是首先从memcached中读取数据&a…

突然讨厌做前端,讨厌代码_为什么用户讨厌重新设计

突然讨厌做前端,讨厌代码重点 (Top highlight)The core of design thinking is to only design something that will bring value and fill the gap in consumer needs. Right? Why else would one design something that no one asked for? While that may be true to some …

那些年我面过的「六年经验」的初级工程师

大家好&#xff0c;我是若川。持续组织了8个月源码共读活动&#xff0c;感兴趣的可以 点此加我微信ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

sql反模式分析2

第八章 多列属性目标&#xff1a;存储多值属性 为一个bug设置多个标签反模式&#xff1a;创建多个列&#xff0c;为bugs创建tag1&#xff0c;tag2&#xff0c;tag3几个列保存标签。标签必须放于其中一个。1.查询数据&#xff0c;比如搜索这三列&#xff0c;可以使用in语句2.添…

更多信息请关注微信公众号_为什么我们更多地关注表面异常?

更多信息请关注微信公众号Don’t you feel lucky to find a single seasoned curly fry in your bunch of plain old boring french fries? Do you remember highlighting important texts of your study materials before the exams? Both situations might seem irrelevant…