setAttribute方法实现网页两种样式表

2016-02-20 00:40 19 1 收藏

下面请跟着图老师小编一起来了解下setAttribute方法实现网页两种样式表,精心挑选的内容希望大家喜欢,不要忘记点个赞哦!

【 tulaoshi.com - Web开发 】

今天研究了一下JS的用setAttribute方法实现一个页面两份样式表的效果,具体方法如下:

第一步:在连接样式表的元素里定义一个id,例如

link href="1.css" rel="stylesheet" type="text/css" id="css"

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

我定义的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.tulaoshi.com/webkaifa/)在这个例子中函数名function后面的名字不能为links或者link,如果为links或者link,样式表将不被改变,具体什么原因我也不大清楚,可能是javascript的保留字符。 另外如果是改变整个页面的样式,你需要在样式表文件里定义body的高度为100%

来源:http://www.tulaoshi.com/n/20160220/1632342.html

延伸阅读
标签: Web开发
本文介绍如何在Dreamweaver 中使用层叠样式表 (CSS) 设置页面中的文本格式。您可以使用 CSS 以 HTML 无法提供的方式来设置文本格式和定位文本,从而能更加灵活自如地控制页面的外观。  了解 CSS  层叠样式表 (CSS) 是一系列格式设置规则,它们控制 Web 页面内容的外观。使用 CSS 设置页面格式时,内容与表现形式是相...
标签: Web开发
在中曾提到要给自己的制作多个样式,然后用户每次访问时随机载入样式,让微博在视觉上保持新鲜感。虽然思路与实现都比较简单,但还是想记录下来,与大家分享。 网页加载样式表default.css,会展现默认风格。同时为实现多种风格,制作了skin1.css,skin2.css,skin3.css三种定制样式。如果在加载default.css后,再加载其中某一样式表,则...
标签: Web开发
关于CSS样式表 一.在学习css之前你应该掌握哪些基础知识 1.什么是网页,什么是超文本语言(html)。 2.会使用Dreamweaver等常用的网页编辑器。 Dreamweaver是现今最好的网站编辑工具之一,而Dreamweaver8增加的对CSS的支持更是你容易得来使用CSS,用它来给制作网页的CSS样式表会更简单、更方便。本教程教你如何利用Dre...
标签: Web开发
最近和一程序员合作项目。弄的我头都大了~埋怨我的CSS命名看不懂~得按照他的来。结果我打开他的页面,看了看,从头第一个开始就是contentCommon,下面全部是content****. 我说明了我的理由,过了半会,似乎是接受了,却突然来一句:“不要用H标签嘛!还有不要用UL来定义导航等“。对于很多合作过的程序员,大多都是这样,命名规范大多是自成一派。...
标签: Web开发
当使用了多个样式表,样式表需要争夺特定选择符的控制权。在这些情况下,总会有样式表的规则能获得控制权。以下的特性将决定互相对立的样式表的结果。 正如以前所提及的,网页制作者和读者都有能力去指定样式表。当两者的规则发生冲突,网页制作者的规则会凌驾于读者的其它相同权重的规则。而网页制作者和读者的样式表都超越浏览器的...

经验教程

365

收藏

48
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部