commonJS — DOM操作(for DOM)

for DOM

github: https://github.com/laixiangran/commonJS/blob/master/src/forDOM.js

代码

/*** Created by laixiangran on 2016/1/24* homepage:http://www.cnblogs.com/laixiangran/* for DOM*/(function(undefined) {var com = window.COM = window.COM || {};com.$D = {// 根据id查找byId: function(id, context) {var ctx = context || document;return ctx.getElementById(id);},// 根据类名查找byClassName: function(className, context) {var ctx = context || document;return ctx.getElementsByClassName(className);},// 根据标签名查找byTagName: function(tagName, context) {var ctx = context || document;return ctx.getElementsByTagName(tagName);},// 在文档中添加样式addSheet: function() {var doc, cssCode;if (arguments.length == 1) {doc = document;cssCode = arguments[0];}else if (arguments.length == 2) {doc = arguments[0];cssCode = arguments[1];}else {alert("addSheet函数最多接受两个参数!");}var headElement = doc.getElementsByTagName("head")[0];var styleElements = headElement.getElementsByTagName("style");if(styleElements.length == 0){ // 如果不存在style元素则创建if (! "\v1") {    // iedoc.createStyleSheet();}else {var tempStyleElement = doc.createElement("style"); //w3ctempStyleElement.setAttribute("type", "text/css");headElement.appendChild(tempStyleElement);}}var  styleElement = styleElements[0];var media = styleElement.getAttribute("media");if (media != null && !/screen/.test(media.toLowerCase())) {styleElement.setAttribute("media", "screen");}if (! "\v1") {    // iestyleElement.styleSheet.cssText  = cssCode;}else if (/a/[-1] == "a") {styleElement.innerHTML  = cssCode; // 火狐支持直接innerHTML添加样式表字串}else{styleElement.appendChild(doc.createTextNode(cssCode))}},/** iframe高度自适应* @param id iframe的id* @param endTime 计算的时间* */adjustIframe: function(id, endTime) {var iframe = this.byId(id),time = 0,end = endTime || 30,intervalID;if (iframe) {function callback() {time = time   1;if (time == end) {clearInterval(intervalID)}var idoc = iframe.contentWindow && iframe.contentWindow.document || iframe.contentDocument;var iheight = Math.max(idoc.body.scrollHeight, idoc.documentElement.scrollHeight);iframe.style.height = iheight   "px";}intervalID = setInterval(callback, 50)}},/** 拖拽元素* @param elem 拖拽的元素* @param callback 拖拽结束之后的回调函数* */drag: function(elem, callback) {callback = callback || function() {};var $D = this;var params = {left: 0,top: 0,currentX: 0,currentY: 0,flag: false};if ($D.getStyle(elem, "left") !== "auto") {params.left = $D.getStyle(elem, "left");}if ($D.getStyle(elem, "top") !== "auto") {params.top = $D.getStyle(elem, "top");}elem.onmousedown = function(event) {params.flag = true;event = event || window.event;params.currentX = event.clientX;params.currentY = event.clientY;};document.onmousemove = function(event) {event = event || window.event;if (params.flag) {var nowX = event.clientX,nowY = event.clientY;var disX = nowX - params.currentX,disY = nowY - params.currentY;elem.style.left = parseInt(params.left)   disX   "px";elem.style.top = parseInt(params.top)   disY   "px";}};document.onmouseup = function() {params.flag = false;if ($D.getStyle(elem, "left") !== "auto") {params.left = $D.getStyle(elem, "left");}if ($D.getStyle(elem, "top") !== "auto") {params.top = $D.getStyle(elem, "top");}callback(elem);};},// 获取元素被窗口卷去的上部分高度getScrollTop: function(elem) {var doc = elem ? elem.ownerDocument : document;return doc.documentElement.scrollTop || doc.body.scrollTop;},// 获取元素被窗口卷去的左部分宽度getScrollLeft: function(elem) {var doc = elem ? elem.ownerDocument : document;return doc.documentElement.scrollLeft || doc.body.scrollLeft;},// 获取元素的左偏移量getElementLeft: function(elem) {var actualLeft = elem.offsetLeft;var current = elem.offsetParent;while (current !== null) {actualLeft  = current.offsetLeft;current = current.offsetParent;}return actualLeft;},// 获取元素的上偏移量getElementTop: function(elem) {var actualTop = elem.offsetTop;var current = elem.offsetParent;while (current !== null) {actualTop  = current. offsetTop;current = current.offsetParent;}return actualTop;},// 获取元素的范围(包括窗口不可见的部分)rect: function(elem) {var left = 0,top = 0,right = 0,bottom = 0;if (!elem.getBoundingClientRect) {left = this.getElementLeft(elem);top = this.getElementTop(elem);right = left   elem.offsetWidth;bottom = top   elem.offsetHeight;} else {var rect = elem.getBoundingClientRect();left = right = this.getScrollLeft(elem);top = bottom = this.getScrollTop(elem);left  = rect.left;right  = rect.right;top  = rect.top;bottom  = rect.bottom;}return {"left": left,"top": top,"right": right,"bottom": bottom};},// 获取元素在窗口可见的范围clientRect: function(elem) {var rect = this.rect(elem),sLeft = this.getScrollLeft(elem),sTop = this.getScrollTop(elem);rect.left -= sLeft;rect.right -= sLeft;rect.top -= sTop;rect.bottom -= sTop;return rect;},// 获取浏览器视口大小getViewport: function() {if (document.compatMode == "BackCompat") { // 判断是否运行在混杂模式return {"width": document.body.clientWidth,"height": document.body.clientHeight};} else {return {"width": document.documentElement.clientWidth,"height": document.documentElement.clientHeight};}},/** 元素是否包含某元素* @parma elemA 包含元素* @param elemB 被包含元素* */contains: function(elemA, elemB) {if (typeof elemA.contains == "function" && (!COM.$B.engine.webkit || COM.$B.engine.webkit >= 522)) {return elemA.contains(elemB);} else if (typeof elemA.compareDocumentPosition == "function") {return !!(elemA.compareDocumentPosition(elemB) & 16);} else {var node = elemB.parentNode;do {if (node === elemA) {return true;} else {node = node.parentNode;}} while (node !== null);return false;}},// 获取所有css属性curStyle: function(elem) {if (document.defaultView && typeof document.defaultView.getComputedStyle == "function") {return document.defaultView.getComputedStyle(elem, null);} else {return elem.currentStyle;}},/** 获取元素指定的css属性的值* @param elem 当前元素* @parma name css属性名* */getStyle: function(elem, name) {var style = null;if (document.defaultView && typeof document.defaultView.getComputedStyle == "function") {style = document.defaultView.getComputedStyle(elem, null);return name in style ? style[name] : style.getPropertyValue(name);} else {var curStyle = elem.currentStyle;style = elem.style;if (name == "opacity") {if (/alpha\(opacity=(.*)\)/i.test(curStyle.filter)) {var opacity = parseFloat(RegExp.$1);return opacity ? opacity / 100 : 0;}return 1;}if (name == "float") {name = "styleFloat";}var ret = curStyle[name] || curStyle[com.$S.camelize(name)];// 单位转换if (!/^-?\d (?:px)?$/i.test(ret) && /^\-?\d/.test(ret)) {var left = style.left,rtStyle = elem.runtimeStyle,rsLeft = rtStyle.left;rtStyle.left = curStyle.left;style.left = ret || 0;ret = style.pixelLeft   "px";style.left = left;rtStyle.left = rsLeft;}return ret;}},/** 设置元素指定的css属性的值* @param elem 当前元素* @parma style css属性名* @param value css属性的指* */setStyle: function(elems, style, value) {if (!elems.length) {elems = [elems];}if (typeof style == "string") {var s = style;style = {};style[s] = value;}com.$A.forEach(elems, function(elem) {for (var name in style) {if (style.hasOwnProperty(name)) {var value = style[name];if (name == "opacity" && com.$B.browser.ie) {elem.style.filter = (elem.currentStyle && elem.currentStyle.filter || "").replace( /alpha\([^)]*\)/, "" )   " alpha(opacity="   (value * 100 | 0)   ")";} else if (name == "float") {elem.style[com.$B.browser.ie ? "styleFloat" : "cssFloat" ] = value;} else {elem.style[com.$S.camelize(name)] = value;}}}});},// 获取元素大小getSize: function(elem) {var width = elem.offsetWidth,height = elem.offsetHeight;if (!width && !height) {var repair = this.contains(document.body, elem),parent;if (!repair) { // 元素不在body上parent = elem.parentNode;document.body.insertBefore(elem, document.body.childNodes[0]);}var style = elem.style,cssShow = {position: "absolute",visibility: "hidden",display: "block",left: "-9999px",top: "-9999px"},cssBack = {position: style.position,visibility: style.visibility,display: style.display,left: style.left,top: style.top};this.setStyle(elem, cssShow);width = elem.offsetWidth;height = elem.offsetHeight;this.setStyle(elem, cssBack);if (!repair) {parent ? parent.appendChild(elem) : document.body.removeChild(elem);}}return {"width": width,"height": height};}};
}());

参考

http://www.cnblogs.com/cloudgamer/


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362720.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

deMeer5_Attacker

SoccerCommand Player::deMeer5_Attacker(){SoccerCommand soc(CMD_ILLEGAL);if (WM->isBeforeKickOff()){if (formations->getFormation() ! FT_INITIAL || //不在开球的阵型 WM->getAgentGlobalPosition().getDistanceTo(WM->getStrategicPosition()) > 2.…

【Flutter】解决依赖版本冲突

为什么会存在版本依赖问题 我们在开发flutter项目中&#xff0c;常常会依赖第三方库。flutter依赖项越多&#xff0c;就越有可能出现依赖版本冲突。 Because new_trend depends on build_runner >0.9.0 which requires SDK version >2.0.0-dev.61 <3.0.0, version sol…

安装vue-cli时报错

今天用npm安装vue-cli时一直报错&#xff0c;后面百度说用cnpm重装&#xff0c;结果还是报错&#xff0c;后面找到一个博主的&#xff0c;说是vue升级的原因&#xff0c;vue init webpack hello-world 已经替换为 vue create hello-world npm install -g vue/cli-init # vue…

从JPA到Hibernate的旧版和增强型标识符生成器

JPA标识符生成器 JPA定义了以下标识符策略&#xff1a; 战略 描述 汽车 持久性提供程序选择基础数据库支持的最合适的标识符策略 身份 标识符由数据库IDENTITY列分配 序列 持久性提供程序使用数据库序列来生成标识符 表 持久性提供程序使用单独的数据库表来模拟序列对…

快速了解AngularJs HTTP响应拦截器

任何时候&#xff0c;如果我们想要为请求添加全局功能&#xff0c;例如身份认证、错误处理等&#xff0c;在请求发送给服务器之前或服务器返回时对其进行拦截&#xff0c;是比较好的实现手段。 angularJs通过拦截器提供了一个从全局层面进行处理的途径。 四种拦截器 实现 req…

U盘专杀工具,U盘防御软件,U盘病毒防火墙--UDiskSyS

近来闲聊无事&#xff0c;写了一款专门针对U盘的防御软件&#xff0c;U盘插入后自动扫描并清除病毒并还原被感染的文件。是常见的文件夹伪装病毒&#xff0c;死亡应答病毒&#xff0c;exe感染型病毒的克星。UDiskSyS不像那些所谓的正规杀毒软件遇到搞不定的病毒统统删除之&…

CenterNet算法笔记(目标检测论文)

论文名称&#xff1a;CenterNet: Keypoint Triplets for Object Detectiontection 论文链接&#xff1a;https://arxiv.org/abs/1904.08189 代码链接&#xff1a;https://github.com/Duankaiwen/CenterNet 简介 该论文是由中科院&#xff0c;牛津大学以及华为诺亚方舟实验室联合…

git提交代码时报错:nothing added to commit but untracked files present

原因&#xff1a; git没有把提交的文件加载进来&#xff0c;报红色的是需要提交的文件&#xff0c; 解决步骤&#xff1a; 用git add XXX(文件名) 把提示报红色的文件加上git commit -m “xx”git push -u origin master重新提交就可以了

VSS使用手册

1 VSS概述 版本控制是工作组软件开发中的重要方面&#xff0c;它能防止意外的文件丢失、允许反追踪到早期版本、并能对版本进行分支、合并和管理。在软件开发和您需要比较两种版本的文件或找回早期版本的文件时&#xff0c;源代码的控制是非常有用的。Visual SourceSafe 是一种…

语句和函数

1.for-in语句&#xff1a;是一种精准的迭代语句&#xff0c;可以用来枚举对象的属性。 2.label语句&#xff1a;在代码中添加标签&#xff0c;以便将来使用&#xff0c;由break和continue语句调用。3.with语句&#xff1a;将代码的作用域设置到一个特定的对象中。一般不建议过多…

服务器与客户端渲染(AngularJS与服务器端MVC)

关于服务器与客户端应用程序渲染的讨论很多。 虽然没有“一刀切”的解决方案&#xff0c;但我将尝试从不同的角度主张客户端&#xff08;特别是AngularJS&#xff09;。 首先是建筑。 建筑 做得好的架构已经明确定义了关注点分离&#xff08;SoS&#xff09; 。 在大多数情况下…

MySQL 数据类型简介 创建数据表及其字段约束

数据类型介绍 MySQL 数据类型分类 整型浮点型字符类型(char与varchar)日期类型枚举与集合具体数据类型见这篇博客 MySQL表操作中的约束 primary key 主键约束 非空唯一unique key 唯一约束not null 非空约束foreign key 外键约束创建表的的语法 CREATE TABLE[IF NOT EXISTS] tb…

elementUI的container布局设置全屏宽度

进用element UI的 container 布局&#xff0c;发现不能全屏铺满 添加了一行代码&#xff1a; .el-container{height:100%;padding:0;margin:0;width:100%;}发现高度占满全屏&#xff0c;但是宽度还没有 继续给 html,body加了 width&#xff1a;100%&#xff1b;还是没有任何…

【转】首次敏捷项目开发实践

首次采用敏捷方式进行开发&#xff0c;我想把我们的做法与大家分享下&#xff0c;同时希望大家指出我们的不足和需要改进的地方&#xff0c;让我们的项目进行的更顺利&#xff0c;目前项目已过三分之一&#xff0c;客户比较满意&#xff0c;还算顺利。项目简介&#xff1a;一个…

CSS border-radius边框圆角

在CSS3中提供了对边框进行圆角设定的支持&#xff0c;可对边框1~4个角进行圆角样式设置。 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 1. 介绍 1.1 圆角属性 CSS3提供了5种圆角属性 border-radius &#xff1a;同时设置4个边框的…

element实现动态路由+面包屑

要掌握&#xff1a;localStorage&#xff0c;组件封装 ​​​​ emm&#xff0c;第一次上传视频转gif的图片&#xff0c;效果不咋好。。。 视频转gif 的软件连接 http://www.zxt2007.com/downloads.html 找到一个可以截取部分视频制作gif图的软件https://soft.onlinedo.cn/gif…

Matlab——矩阵运算 矩阵基本变换操作

矩阵运算 加 - 减 .* 乘 ./ 左除 .\ 右除 .^ 次方 . 转置 除了加减符号&#xff0c;其余的运算符必须加“.” >> a 1:5a 1 2 3 4 5>> a-2 %减法ans -1 0 1 2 3 >> 2.*a-1 %乘法 减法ans 1 3 5 7 9 >&g…

Oracle最新的Java 8更新破坏了您的工具-它是如何发生的?

如果您最近一直在关注Java世界的消息&#xff0c;那么您可能听说过Oracle发布的最新Java 8构建&#xff0c;Java 8u11&#xff08;和Java 7u65&#xff09;引入了错误并破坏了一些流行的第三方工具&#xff0c;例如ZeroTurnaround的JRebel&#xff0c;Javassist&#xff0c;Goo…

为什么选择Dojo - 记Dojo中文博客正式开张

公告栏里写到&#xff1a;Dojo的高门槛一旦跨过&#xff0c;必将别无所求。含义有二&#xff1a;第一&#xff0c;Dojo难学&#xff1b;第二&#xff0c;Dojo很强大。 这也揭示了本博客的目标&#xff1a;帮助大家用好Dojo这个优秀的Ajax框架。 在回答为什么选择Dojo之前&#…

ExtJS 4.2 第一个程序

本篇介绍如何创建一个ExtJS应用程序。并通过创建目录、导入文件、编写代码及分析代码等步骤来解释第一个ExtJS程序。 目录 1. 创建程序 1.1 创建目录建议 1.2 实际目录 1.3 index.html 1.4 运行图 2. 代码分析 2.1 Ext.onReady() 2.2 Ext.create() 1. 创建程序 1.1 创建目录…