讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > js教程 > 正文

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

php中文网
发布： 2016-05-16 18:00:22
原创
1795人浏览过
复制代码 代码如下:

/**
* 克隆元素样式
* @param {HTMLElement} 被克隆的元素
* @param {Boolean} 是否启用缓存（默认true）
* @return {String} css类名
*/
var cloneStyle = (function (doc) {
var rstyle = /^(number|string)$/,
cloneName = '${cloneName}',
sData = {},
addHeadStyle = function (content) {
var style = 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' in window ? function (elem, name) {
return getComputedStyle(elem, null)[name];
} : function (elem, name) {
return elem.currentStyle[name];
};
return function (source, cache) {
if (!cache && source[cloneName]) return source[cloneName];
var className, name,
cssText = [],
sStyle = source.style;
for (name in sStyle) {
val = getStyle(source, name);
if (val !== '' && rstyle.test(typeof val)) {
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' + (new Date).getTime();
addHeadStyle('.' + className + '{' + cssText + '}');
return className;
};
}(document));

演示：

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：firefox下input type="file"的size是多大_javascript技巧 下一篇：jquery.fileEveryWhere.js 一个跨浏览器的file显示插件_jquery
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
javascript的memoization是什么_它如何缓存结果？ Memoization是通过缓存“输入→输出”映射来避免重复计算的优化技术，需函数纯、参数可序列化，缓存需手动管理，非JavaScript内置但可手写或借助工具实现。
2025-12-15 21:10:02
761
javascript的currying是什么_它如何实现部分应用？ 柯里化是将多参数函数转换为单参数函数链的机制，通过闭包记忆已传参数，直至参数总数满足才执行；它强制分步调用，而部分应用更灵活，可一次预填任意数量参数。
2025-12-15 21:05:22
480
JavaScript中的性能监控是什么_如何测量和优化关键渲染路径？ JavaScript性能监控核心是优化关键渲染路径（CRP），即HTML→DOM→CSSOM→渲染树→布局→绘制→合成流程；通过DevTools分析长任务、FCP阻塞资源及NavigationTiming，内联关键CSS、defer/async脚本、压缩资源、避免强制重排，并用web-vitals持续验证CoreWebVitals指标。
2025-12-15 20:51:06
693
怎样实现javascript函数缓存_它如何加速计算过程？ JavaScript函数缓存通过存储输入与输出映射实现重复调用直接返回结果，仅适用于纯函数；需注意键的正确性、参数序列化限制及内存管理，可将指数级计算降为线性并避免重复I/O或渲染。
2025-12-15 20:49:33
745
如何使用javascript修改CSS样式_有哪些方法？ 直接操作style属性适合动态设置少量样式；切换className或classList更易维护且支持动画；动态插入CSS规则适用于主题切换等场景；getComputedStyle用于读取最终计算样式。
2025-12-15 20:48:46
214
javascript中的Web Workers是什么_如何用它实现多线程 WebWorkers是浏览器提供的后台线程机制，用于执行耗时任务而不阻塞主线程；每个Worker独立运行、无DOM访问权限，通过postMessage通信，支持fetch等API但不可操作DOM。
2025-12-15 20:48:06
905
如何用javascript实现动画效果_有哪些技术可选？ JavaScript实现动画的核心是按时间规律更新元素视觉属性并触发重绘；推荐requestAnimationFrame打底，CSStransitions处理基础交互，WebAnimationsAPI用于精细控制，复杂场景选用GSAP等库，并优先使用transform/opacity避免重排。
2025-12-15 20:47:17
825
JavaScript中的字符串方法有哪些？ JavaScript字符串常用核心方法约十几种，分为基础操作（length、charAt等）、查找判断（indexOf、includes等）、截取替换（slice、replace等）和格式转换（toLowerCase、trim等）四类，日常开发中includes、split、slice、replace、trim及大小写转换最常用。
2025-12-15 20:45:07
650
JavaScript数据类型有哪些_如何检测它们？ JavaScript有8种数据类型：7种原始类型（string、number、boolean、null、undefined、symbol、bigint）和1种引用类型（object）；检测时应优先用typeof判断原始类型（需单独处理null），复杂类型统一用Object.prototype.toString.call()确保准确。
2025-12-15 20:43:02
657
JavaScript解构赋值如何操作_能用于哪些数据结构？ JavaScript解构赋值是高频实用特性，支持数组（按位置）和对象（按属性名）直接解构，可延伸至字符串、Map、Set及函数返回值，但不支持null、undefined等原始类型。
2025-12-15 20:28:31
677
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部