javascript动态添加样式(行内式/嵌入式/外链式等规则)


Posted in Javascript onJune 24, 2013

添加CSS的方式有行内式、嵌入式、外链式、导入式
a)动态引入样式表文件:

function loadLink(url){ 
var link = document.createElement("link"); 
link.type = "text/css"; 
link.rel = "stylesheet"; 
link.href = url; 
var head = document.getElmentsByTagName("head")[0]; 
head.appendChild(link); 
}

b)嵌入式:
function insertStyles(){ 
var doc,cssCode=[],cssText; 
var len = arguments.length; 
var head,style,firstStyle; 
if(len == 1){ 
doc = document; 
cssCode.push(arguments[0]) 
}else if(len == 2){ 
doc = arguments[0]; 
cssCode.push(arguments[1]); 
}else{ 
alert("函数最多接收两个参数!"); 
} 
head = doc.getElementsByTagName("head")[0]; 
styles= head.getElementsByTagName("style"); 
if(styles.length == 0){ 
if(doc.createStyleSheet){//ie 
doc.createStyleSheet(); 
}else{//FF 
var tempStyle = doc.createElement("style"); 
tempStyle.setAttibute("type","text/css"); 
head.appendChild(tempStyle); 
} 
} 
firstStyle = styles[0]; 
cssText=cssCode.join("\n"); 
if(!+"\v1"){//opacity兼容 
var str = cssText.match(/opacity:(\d?\.\d+);/); 
if(str!=null){ 
cssText = cssText.replace(str[0],"filter:alpha(opacity="+pareFloat(str[1])*100+")"); 
} 
} 
if(firstStyle.styleSheet){ 
firstStyle.styleSheee.cssText += cssText; 
}else if(doc.getBoxObjectFor){ 
firstStyle.innerHTML += cssText; 
}else{ 
firstStyle.appendChild(doc.createTextNode(cssText)); 
} 
}

c)行内式:
var addStyle=function (ele,str){ 
var s = ele.getAttribute("style"),styles; 
if(str && typeof str === "string"){ 
if(!s){ 
ele.style.cssText = str; 
}else{ 
if(s == '[object]'){//IE6/7 e.getAttribute("style")返回[object] 
s=ele.style.cssText; 
} 
styles= trim(s).split(";"); 
for (var i=0,len=styles.length; i<len; i++){ 
var style_i=trim(styles[i]); 
var attr=style_i.split(":")[0]; 
if(str.indexOf(attr)>-1){ 
styles[i]=""; 
}else{ 
styles[i]=style_i; 
} 
} 
ele.style.cssText= styles.join("")+";"+str; 
} 
} 
}

d)导入式:
import "index.css";
操作CSS 类相关的方法:
var hasClass=function(ele,value){ 
var rclass = /[\n\t\r]/g, 
value=" "+value+" "; 
return (ele.nodeType==1)&&(" "+ele.className+" ").replace(rclass," ").indexOf(value)>-1; 
} 
var trim=function (val){ 
return val.replace(/(^\s+)|(\s+$)/g,""); 
} 
var addClass=function(ele,value){ 
var rspace = /\s+/,classNames,getClass; 
if(value&&typeof value === "string"){ 
classNames = value.split(rspace); 
if(ele.nodeType === 1){ 
if(!ele.className && classNames.length == 1){ 
ele.className = value; 
}else{ 
getClass = " "+ele.className+" "; 
for(var i=0,len=classNames.length; i<len ;i++){ 
var cname=classNames[i]; 
if(!hasClass(ele,cname)){ 
getClass += cname+" "; 
} 
} 
ele.className = trim(getClass); 
} 
} 
} 
} 
var removeClass=function(ele,value){ 
var rclass = /[\n\t\r]/g,classNames,getClass; 
if((value&&typeof value === "string")||value === undefined){ 
classNames = (value||"").split(rspace); 
if(ele.nodeType === 1 && ele.className){ 
if(value){//存在查找要移除的类 
getClass = " "+ele.className+" ".replace(rclass," ");//左右空格,为了使类中各类间均等,方便后面替换 
for(var i=0,len=classNames.length; i<len; i++){ 
getClass = getClass.replace(" "+classNames[i]+" "," ") 
} 
ele.className=trim(getClass); 
}else{//不存在移除所有类 
ele.className = ""; 
} 
} 
} 
} 
var toggleClass=function(ele,value){ 
if(typeof value === "string"){ 
if(hasClass(ele,value)){ 
removeClass(ele,value); 
}else{ 
addClass(ele,value); 
} 
} 
}
Javascript 相关文章推荐
javascript Prototype 对象扩展
May 15 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
Apr 11 Javascript
js继承的实现代码
Aug 05 Javascript
工作中常用到的JS表单验证代码(包括例子)
Nov 11 Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
vue loadmore 组件滑动加载更多源码解析
Jul 19 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
D3.js实现简洁实用的动态仪表盘的示例
Apr 04 Javascript
9102了,你还不会移动端真机调试吗
Mar 25 Javascript
深入理解令牌认证机制(token)
Aug 22 Javascript
微信小程序实现文件预览
Oct 22 Javascript
JS实现的省份级联实例代码
Jun 24 #Javascript
javascript中的绑定与解绑函数应用示例
Jun 24 #Javascript
用jquery生成二级菜单的实例代码
Jun 24 #Javascript
自动刷新网页,自动刷新当前页面,JS调用
Jun 24 #Javascript
jquery中的事件处理详细介绍
Jun 24 #Javascript
模拟电子签章盖章效果的jQuery插件源码
Jun 24 #Javascript
Js注册协议倒计时的小例子
Jun 24 #Javascript
You might like
PHP自定义函数收代码
2010/08/01 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
PHP高并发和大流量解决方案整理
2021/03/09 PHP
VBScript版代码高亮
2006/06/26 Javascript
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
jQuery oLoader实现的加载图片和页面效果
2015/03/14 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
将JSON字符串转换成Map对象的方法
2016/11/30 Javascript
vue2.0多条件搜索组件使用详解
2020/03/26 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
Python简单调用MySQL存储过程并获得返回值的方法
2015/07/20 Python
浅谈python 里面的单下划线与双下划线的区别
2017/12/01 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
PyTorch中的Variable变量详解
2020/01/07 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
软件测试笔试题
2012/10/25 面试题
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
2014年建筑工程工作总结
2014/12/03 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
先进个人材料怎么写
2014/12/30 职场文书
办公室主任岗位职责
2015/01/31 职场文书
商务信函英语问候语
2015/11/10 职场文书
浅谈Golang 嵌套 interface 的赋值问题
2021/04/29 Golang
Python 如何安装Selenium
2021/05/06 Python
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android
Android studio 简单计算器的编写
2022/05/20 Java/Android