82个常规的前端JavaScript方法封装(11~20)
发表于:2021-12-05 10:04:46浏览:1613次
本篇文章主要介绍的是一些常用的前端JavaScript方法封装,判断元素有没有子元素,一个元素插入到另一个元素的后面,返回当前的时间(年月日时分秒),获得滚动条的滚动距离,获得视口的尺寸,获取任一元素的任意属性等多个方法,自己收集整理以便后期使用,需要的朋友可以阅读收藏。
11、判断元素有没有子元素
function hasChildren(e) { var children = e.childNodes, len = children.length; for (var i = 0; i < len; i++) { if (children[i].nodeType === 1) { return true; } } return false; }
12、我一个元素插入到另一个元素的后面
Element.prototype.insertAfter = function (target, elen) { var nextElen = elen.nextElenmentSibling; if (nextElen == null) { this.appendChild(target); } else { this.insertBefore(target, nextElen); } }
13、返回当前的时间(年月日时分秒)
function getDateTime() { var date = new Date(), year = date.getFullYear(), month = date.getMonth() + 1, day = date.getDate(), hour = date.getHours() + 1, minute = date.getMinutes(), second = date.getSeconds(); month = checkTime(month); day = checkTime(day); hour = checkTime(hour); minute = checkTime(minute); second = checkTime(second); function checkTime(i) { if (i < 10) { i = "0" + i; } return i; } return "" + year + "年" + month + "月" + day + "日" + hour + "时" + minute + "分" + second + "秒" }
14、获得滚动条的滚动距离
function getScrollOffset() { if (window.pageXOffset) { return { x: window.pageXOffset, y: window.pageYOffset } } else { return { x: document.body.scrollLeft + document.documentElement.scrollLeft, y: document.body.scrollTop + document.documentElement.scrollTop } } }
15、获得视口的尺寸
function getViewportOffset() { if (window.innerWidth) { return { w: window.innerWidth, h: window.innerHeight } } else { // ie8及其以下 if (document.compatMode === "BackCompat") { // 怪异模式 return { w: document.body.clientWidth, h: document.body.clientHeight } } else { // 标准模式 return { w: document.documentElement.clientWidth, h: document.documentElement.clientHeight } } } }
16、获取任一元素的任意属性
function getStyle(elem, prop) { return window.getComputedStyle ? window.getComputedStyle(elem, null)[prop] : elem.currentStyle[prop] }
17、绑定事件的兼容代码
function addEvent(elem, type, handle) { if (elem.addEventListener) { //非ie和非ie9 elem.addEventListener(type, handle, false); } else if (elem.attachEvent) { //ie6到ie8 elem.attachEvent('on' + type, function () { handle.call(elem); }) } else { elem['on' + type] = handle; } }
18、解绑事件
function removeEvent(elem, type, handle) { if (elem.removeEventListener) { //非ie和非ie9 elem.removeEventListener(type, handle, false); } else if (elem.detachEvent) { //ie6到ie8 elem.detachEvent('on' + type, handle); } else { elem['on' + type] = null; } }
19、取消冒泡的兼容代码
function stopBubble(e) { if (e && e.stopPropagation) { e.stopPropagation(); } else { window.event.cancelBubble = true; } }
20、检验字符串是否是回文
function isPalina(str) { if (Object.prototype.toString.call(str) !== '[object String]') { return false; } var len = str.length; for (var i = 0; i < len / 2; i++) { if (str[i] != str[len - 1 - i]) { return false; } } return true; }
推荐文章
- 前端开发中项目常用的20多个轮子 快速提高开发效率 建议收藏
- Apache2配置ThinkPHP6的运行环境
- phpstudy如何切换设置不同的composer版本及PHP版本
- windows11系统,小乌龟TortoiseGit、TortoiseSvn的红黄绿图标不见了的解决方案
- 开源的OA办公系统 — 勾股OA 4.92.10发布
- 2021年度个税汇算今起开始,3月1日至3月15日需要预约,3月16日至6月30日,无需预约
- 图片变形处理,可设置CSS属性object-fit: cover完美解决
- centos系统,宝塔面板SSL证书文件在哪里?
- 谷歌发布Flutter 3,增加对macOS和Linux 应用的支持
- 宝塔面板查看登录地址、账号密码、运行状态和一键重启等命令