【兼容与封装】
关注
分享
扫一扫
文章平均质量分 69
@Umbrella
纸上得来终觉浅，绝知此事要躬行
展开
-
使用CSS隐藏元素滚动条【兼容主流浏览器】
如何隐藏滚动条，同时仍然可以在任何元素上滚动？首先，如果需要隐藏滚动条并在内容溢出时显示滚动条，只需要设置 overflow：auto 样式即可。想要完全隐藏滚动条只需设置 overflow：hidden 即可，但是这样一来将导致元素内容不可滚动。时至今日，还没有任何一条CSS规则可以使元素可以隐藏滚动条的同时依然可以滚动内容，只能通过针对特定浏览器设置滚动条样式来实现。Firefox浏览器对于 Firefox ，我们可以将滚动条宽度设置为none：scrollbar-width: none; /*原创 2021-02-26 18:05:53 · 34770 阅读 · 0 评论 -
firefox火狐浏览器outline:none去除虚框失效的坑【兼容坑】
问题描述：H5界面在点击按钮时，因为登录按钮获得焦点，按钮上出现了难看的虚框，强迫症患者表示谁也忍受不了…… 解决方案找了很多方法，比如直接在css样式中加这行代码button:focus,button:actived{outline:none;}又比如在js代码中解决$("a,input,button").focus(function(){this.blur()});然而，尝试了无数次，都失败了，为什么呢？因为笔者用的是火狐浏览器……需要用一条火狐浏览器私有的命令，这样b.原创 2020-12-15 09:48:01 · 519 阅读 · 0 评论 -
【javaScript】JavaScript实现监听移动端上下左右滑动事件（封装）
前置知识----事件源定义JS 触摸事件（event）event的类型touchstart: 当手指触摸屏幕时触发（相当于Android中的ACTION_DOWN事件）touchmove: 当手指在屏幕上滑动时连续触发（相当于Android中的ACTION_MOVE事件）— 期间调用touchend: 当手指从屏幕上移开时触发（相当与Android中的ACTION_UP）touchca...原创 2020-03-18 17:08:25 · 2093 阅读 · 0 评论 -
【兼容封装】最全整理浏览器兼容性问题与解决方案（转）
常见浏览器兼容性问题与解决方案所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。在学习浏览器兼容性之前，我想把前端开发人员划分为两类：第一类是精确按照设计图开发的前端开...原创 2020-03-11 22:55:08 · 949 阅读 · 0 评论 -
【javaScript】Object.prototype.toString.call() 、 instanceof 以及 Array.isArray() 区别与优化层面的比较
1. Object.prototype.toString.call()每一个继承 Object 的对象都有 toString 方法，如果 toString 方法没有重写的话，会返回 [Object type]，其中 type 为对象的类型。但当除了 Object 类型的对象外，其他类型直接使用 toString 方法时，会直接返回都是内容的字符串，所以我们需要使用call或者apply方法来改变...原创 2019-10-07 16:15:21 · 659 阅读 · 0 评论 -
【javaScript】JS中的forEach、$.each、map方法差异
forEach 和 $.eachforEach是ECMA5中Array新方法中最基本的一个，就是遍历，循环。例如下面这个例子：[1, 2 ,3, 4].forEach(alert);等同于下面这个for循环var array = [1, 2, 3, 4]; for (var k = 0, length = array.length; k < length; k++) { al...原创 2019-09-19 13:50:18 · 379 阅读 · 0 评论 -
【兼容封装】 -moz-user-select与onselectstart 禁止选择文字（兼容IE）
user-select有两个值：none：用户不能选择文本text：用户可以选择文本需要注意的是：user-select并不是一个W3C的CSS标准属性，浏览器支持的不完整，需要对每种浏览器进行调整代码如下: body{ -moz-user-select: none; /*火狐FF*/ -webkit-user-select: none; /*w...原创 2019-07-25 17:10:13 · 702 阅读 · 0 评论 -
【兼容封装】classList的用法介绍和兼容IE8
前言问题：我怎样可以使用原生js，而不使用element.addClass/removeClass("")给当前element添加class类名呢？答案：可以使用js中的classList,他有几个可调用的方法 >>> add,remove,toggle,contains,replace,item,其中使用add/remve的方法就可以解决你的问题;介绍用法add( S...原创 2019-07-25 17:09:37 · 1605 阅读 · 0 评论 -
【javaScript】如何获取经过encodeURI编码后的URL地址参数param的乱码值（封装）
前言需求：这里解释一下标题的意思，也就是说我们的url地址一般都是经过编码后的，所以不会出现中文这样的字眼，因为它们都是被编码了，像这样（比如我们访问一个地址是这样的http://hotPlace/place.html?topPlace=广州&name=琶洲）：http://hotPlace/place.html?topPlace=%E5%B9%BF%E5%B7%9E&na...原创 2019-08-21 14:25:00 · 2287 阅读 · 0 评论 -
【兼容封装】IE6、IE7兼容querySelectorAll和querySelector方法-最终版本
IE6、IE7兼容querySelectorAll和querySelector方法-最终版本querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范，便捷定位文档中指定元素。目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Oper...原创 2019-08-05 15:18:32 · 1206 阅读 · 0 评论 -
【兼容封装】写一个可拓展的日期格式化 new Date().format("yyyy-MM-dd HH:mm:ss 自定")方法
写一个可拓展的日期格式化 new Date().format(“yyyy-MM-dd HH:mm:ss 自定”)方法在Date原型上写format方法，接收fmt的参数为时间输出的文本格式Date.prototype.format = function (fmt) { var pattern = { "M+": this.getMonth() + 1, //月份...原创 2019-08-03 12:44:02 · 670 阅读 · 0 评论 -
【兼容封装】通用选择器的简单写法(顺便兼容一下getElementsByClassName)
简单封装一下选择器HTML代码：<body> <div class="box"> <div class="first">11111</div> <div class="second">aaaaa</div> <div class="second">bbbb...原创 2019-07-25 17:12:43 · 245 阅读 · 0 评论 -
【兼容封装】选择器getElementById || getElementsByClassName（兼容IE） || getElementsByTagName
封装 – 原生js选择器 /* 封装一个选择器 */ function seletor(param, obj) { obj = obj || document; //根据id名查找元素 if (param[0] === "#") // console.log("param",param.charAt(0)) ...原创 2019-07-25 17:08:55 · 348 阅读 · 0 评论 -
【兼容封装】对pageX/pageY || scrollLeft/scrollTop兼容处理
对pageX/pageY || scrollLeft/scrollTop兼容处理e.clientX/e.clientY 鼠标在可视区域中的位置e.pageX/e.pageY 鼠标在页面中的位置 有兼容性问题 从IE9以后才支持scrollLeft/scrollTop中存在两种情况 document.body.scrollTop//360 谷歌等标准模式 || document.docume...原创 2019-07-25 17:04:46 · 366 阅读 · 0 评论 -
【javaScript】addEventListener第三个参数的使用和事件冒泡和捕获机制
前言续上一章将的addEventListener和attachEvent比较的第四个不同点续讲…事件冒泡概念：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。（注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件 也不会有什么表现 但事件确实传递了。）这就话怎么理解 >>> 看代码var ...原创 2019-07-25 16:48:08 · 1186 阅读 · 0 评论 -
【兼容封装】addEventListener()和attachEvent()跨浏览器的兼容性处理
addEventListener()和attachEvent()相同点和不同点相同点：① 它们都是dom对象的方法，可以实现一种事件绑定多个事件处理函数；② 相对于普通的DOM事件处理element.event = fun();的写法来说,使用attachEvent和addEventListener时则可以实现多个事件处理函数的调用；不同点：① attachEvent是IE有的方法，它不...原创 2019-07-25 16:46:09 · 1156 阅读 · 0 评论