javascript深入之动态添加样式规则
2013-06-19 00:27
525 查看
添加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 动态添加样式规则 W3C校检
- 再谈javascript 动态添加样式规则 W3C校检
- javascript动态添加样式(行内式/嵌入式/外链式等规则)
- JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
- javascript 动态样式添加的简单实现
- 动态添加样式规则
- JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
- 谈动态添加样式规则
- 再谈动态添加样式规则的方法
- JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(推荐七)
- Javascript中给动态生成的表格添加样式,JavaScript里setAttribute的问题
- Javascript中给动态生成的表格添加样式,JavaScript里setAttribute的问题
- 再谈动态添加样式规则
- 使用JavaScript动态添加CSS样式规则
- 动态添加javascript并判断是否加载完成
- JavaScript动态操作表格,添加,删除行、列及单元格
- 使用JavaScript动态添加复选框Checkbox
- JavaScript为字符串添加样式
- Javascript基础——深入了解Javascript(函数返回值return、函数传参arguments、兼容各浏览器的单一行间样式、元素的插入删除split/shift/sort/pop)