用js动态改变css样式表
用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下均测试通过,相信大家看完后因该非常明了,利用这个方法我们可以让浏览者自己选择需要显示的样式表,比如年老者可以选择一个字体较大的样式表。这里需要注意的两点是:
在这个例子中函数名function后面的名字不能为links或者link,如果为links或者link,样式表将不被改变,具体什么原因我也不大清楚,可能是javascript的保留字符。
另外如果是改变整个页面的样式,你需要在样式表文件里定义body的高度为100%
还有一种方法:
<script language="javascript">
var b_v = navigator.appVersion;
var IE6 = b_v.search(/MSIE 6/i) != -1;
var IE7 = b_v.search(/MSIE 7/i) != -1;
if (IE6) {
document.write("<link href=""css/neiye_ie6.css"" rel=""stylesheet"" type=""text/css"" id=""cssStyle"" />");
}else{
document.write("<link href=""css/neiye.css"" rel=""stylesheet"" type=""text/css"" id=""cssStyle"" />");
}
</script>
相关推荐
...
...
调用方法: 如果改变className,则事先在样式表中申明类,但调用时不要再跟style,像document.getElementById(‘obj’).style.className=”…”的写法是错误的!只能写成:document.getElementById(‘obj’)....
JavaScript允许你即时的改变CSS样式,这样就可以将用户的眼球吸引到你想他们关注的地方上,并且提供较好的交互体验给力 。 JavaScript修改CSS有4种方法: 修改节点style(内联样式); 改变节点class或id; 写入新的...
在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用、效果、以及缺陷。 1、使用obj.className来修改样式表的类名。 2、使用obj.style.cssTest来修改嵌入式的css。 3、使用obj.className来修改样式表的...
看过我写的《用JavaScript动态建立或增加CSS样式表的实现方法》之后,你就很容易想明白如何修改CSS样式表了。 正好今天在论坛碰到一位朋友问这样的一个问题: <style> .ls{width=120px;} </style> ...
有时会使用一些改变心情方面的想法,比如JS函数实现动态添加CSS样式表文件,这样就可以做到随机加载心情文件,需要的朋友可以了解下
下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性… <style type=”text/css”> .orig { display: none; } </style> 你想要改变把他的display属性由none改为inline。 ...
内容索引:脚本资源,jQuery,无刷新风格切换 jQuery 无刷新切换网站风格,如果你想在你的网站中加入这项功能,这个实例最适合您了,它使用了jQuery插件,用起来更稳定、省心,你需要准备好多份CSS样式表文件,这和...
使用JavaScript可以动态改变style属性,从而改变标签的样式,也就是改变标签的显示方式 style属性-语法: <element>.style.<sheettype>=<value> element 需要改变样式的标签对象 style 标签对象的style属性 sheet...
调用方法: 如果改变className,则事先在样式表中申明类,但调用时不要再跟style,像document.getElementById(‘obj’).style.className=”…”的写法是错误的!只能写成:document.getElementById(‘obj’)....
JavaScript 样式表 - JS3 它不是将编程放在 CSS 中,而是将 CSS 放在编程语言中。 介绍 随着越来越多的发展向客户端移动,不同的机会正在开放,传统的做事方式正在发生巨大的变化。 CSS 定义就是这样一种情况。 ...
CSS2中文手册 样式表滤镜中文手册 Windows 脚本技术 JS&VBS 网页设计配色常识
用JS修改标签的 class 属性值: class 属性是在标签上引用样式表的方法之一,它的值是一个样式表的选择符,如果改变了 class 属性的值,标签所引用的样式表也就更换了,所以这属于第一种修改方法。 更改一个标签的 ...
在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。<link>标签在(文档的)头部: <head><link rel=”stylesheet” type=”text/...
1321过渡应用CSS3创建过渡的步骤: 1、在原始样式表中:声明元素的初始状态样式 2、声明过渡元素最终状态样式,比如悬停状态:hover 3、在原始样式表中:通过过渡属性transition添加过渡属性1过渡应用过渡效果应用在...
在DHTML你通过直接修改页面上的特定元素来改变样式,而这里的代码修改的是样式表。在这里查看W3C DOM-CSS的兼容性列表。定义 一个页面总是包含一个或者几个样式表,一个样式表里面包含一条或者几条规则,一条规则里...
调用方法: 如果改变className,则事先在样式表中申明类,但调用时不要再跟style,像document.getElementById(‘obj’).style.className=”…”的写法是错误的!只能写成:document.getElementById(‘obj’)....
.任务概述(任务说明,相关数据结构描述,用自己的语言) 利用HTML,CSS,Java,XML知识写网页,学习CSS样式表,链接的使用,以及基本的网页背景文字框架的设计,学会使用...使用CSS样式表实现字体颜色大小的批量改变。