zl程序教程

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

当前栏目

javascript克隆元素样式的实现代码

JavaScript代码 实现 元素 样式 克隆
2023-06-13 09:14:31 时间
复制代码代码如下:

/**
*克隆元素样式
*@param{HTMLElement}被克隆的元素
*@param{Boolean}是否启用缓存(默认true)
*@return{String}css类名
*/
varcloneStyle=(function(doc){
varrstyle=/^(number|string)$/,
cloneName="${cloneName}",
sData={},
addHeadStyle=function(content){
varstyle=sData[doc];
if(!style){
style=sData[doc]=doc.createElement("style");
doc.getElementsByTagName("head")[0].appendChild(style);
};
style.styleSheet&&(style.styleSheet.cssText+=content)||style.appendChild(doc.createTextNode(content));
},
getStyle="getComputedStyle"inwindow?function(elem,name){
returngetComputedStyle(elem,null)[name];
}:function(elem,name){
returnelem.currentStyle[name];
};
returnfunction(source,cache){
if(!cache&&source[cloneName])returnsource[cloneName];
varclassName,name,
cssText=[],
sStyle=source.style;
for(nameinsStyle){
val=getStyle(source,name);
if(val!==""&&rstyle.test(typeofval)){
name=name.replace(/([A-Z])/g,"-$1").toLowerCase();
cssText.push(name);
cssText.push(":");
cssText.push(val);
cssText.push(";");
};
};
cssText=cssText.join("");
source[cloneName]=className="clone"+(newDate).getTime();
addHeadStyle("."+className+"{"+cssText+"}");
returnclassName;
};
}(document));

演示:

cloneStyle 克隆div的最终样式到span 我是DIV标签
我是SPAN标签