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一点特殊用法
May 28 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
Aug 16 Javascript
jQuery结合HTML5制作的爱心树表白动画
Feb 01 Javascript
详解Webwork中Action 调用的方法
Feb 02 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
js实现3D图片展示效果
Mar 09 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
May 08 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
Nov 12 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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
thinkphp实现like模糊查询实例
2014/10/29 PHP
PHP基于phpqrcode生成带LOGO图像的二维码实例
2015/07/10 PHP
浅谈PHP中的
2016/04/23 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
2011/07/28 Javascript
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
javascript解三阶幻方(九宫格)
2015/04/22 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
深入理解vue中的$set
2017/06/01 Javascript
自定义PC微信扫码登录样式写法
2017/12/12 Javascript
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
详解Python列表赋值复制深拷贝及5种浅拷贝
2019/05/15 Python
对python中的装包与解包实例详解
2019/08/24 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
python 实现 hive中类似 lateral view explode的功能示例
2020/05/18 Python
详细分析Python collections工具库
2020/07/16 Python
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
美国一家主打母婴用品的团购网站:zulily
2017/09/19 全球购物
入党积极分子思想汇报
2014/01/02 职场文书
《青山处处埋忠骨》教学反思
2014/04/22 职场文书
庆元旦演讲稿
2014/09/15 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
运动会广播稿200字
2015/08/19 职场文书
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle