提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

JavaScript嵌入式规则 添加 动态 样式 链式 行内
2023-06-13 09:15:02 时间
添加CSS的方式有行内式、嵌入式、外链式、导入式
a)动态引入样式表文件：
复制代码代码如下:

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

b)嵌入式：
复制代码代码如下:

functioninsertStyles(){
vardoc,cssCode=[],cssText;
varlen=arguments.length;
varhead,style,firstStyle;
if(len==1){
doc=document;
cssCode.push(arguments[0])
}elseif(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
vartempStyle=doc.createElement("style");
tempStyle.setAttibute("type","text/css");
head.appendChild(tempStyle);
}
}
firstStyle=styles[0];
cssText=cssCode.join("\n");
if(!+"\v1"){//opacity兼容
varstr=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;
}elseif(doc.getBoxObjectFor){
firstStyle.innerHTML+=cssText;
}else{
firstStyle.appendChild(doc.createTextNode(cssText));
}
}

c)行内式：
复制代码代码如下:
varaddStyle=function(ele,str){
vars=ele.getAttribute("style"),styles;
if(str&&typeofstr==="string"){
if(!s){
ele.style.cssText=str;
}else{
if(s=="[object]"){//IE6/7e.getAttribute("style")返回[object]
s=ele.style.cssText;
}
styles=trim(s).split(";");
for(vari=0,len=styles.length;i<len;i++){
varstyle_i=trim(styles[i]);
varattr=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类相关的方法：
复制代码代码如下:
varhasClass=function(ele,value){
varrclass=/[\n\t\r]/g,
value=""+value+"";
return(ele.nodeType==1)&&(""+ele.className+"").replace(rclass,"").indexOf(value)>-1;
}
vartrim=function(val){
returnval.replace(/(^\s+)|(\s+$)/g,"");
}
varaddClass=function(ele,value){
varrspace=/\s+/,classNames,getClass;
if(value&&typeofvalue==="string"){
classNames=value.split(rspace);
if(ele.nodeType===1){
if(!ele.className&&classNames.length==1){
ele.className=value;
}else{
getClass=""+ele.className+"";
for(vari=0,len=classNames.length;i<len;i++){
varcname=classNames[i];
if(!hasClass(ele,cname)){
getClass+=cname+"";
}
}
ele.className=trim(getClass);
}
}
}
}
varremoveClass=function(ele,value){
varrclass=/[\n\t\r]/g,classNames,getClass;
if((value&&typeofvalue==="string")||value===undefined){
classNames=(value||"").split(rspace);
if(ele.nodeType===1&&ele.className){
if(value){//存在查找要移除的类
getClass=""+ele.className+"".replace(rclass,"");//左右空格，为了使类中各类间均等，方便后面替换
for(vari=0,len=classNames.length;i<len;i++){
getClass=getClass.replace(""+classNames[i]+"","")
}
ele.className=trim(getClass);
}else{//不存在移除所有类
ele.className="";
}
}
}
}
vartoggleClass=function(ele,value){
if(typeofvalue==="string"){
if(hasClass(ele,value)){
removeClass(ele,value);
}else{
addClass(ele,value);
}
}
}

相关文章