js兼容性的汇总

js兼容问题大多是在ie浏览器低版本以及ie浏览器和不同普通浏览器的差异

事件对象

document.onclick=function(ev){//谷歌火狐的写法,IE9以上支持,往下不支持;var e=ev;console.log(e);}document.onclick=function(){//谷歌和IE支持,火狐不支持;var e=event;console.log(e);}document.onclick=function(ev){//兼容写法;var e=ev||window.event;var mouseX=e.clientX;//鼠标X轴的坐标var mouseY=e.clientY;//鼠标Y轴的坐标}

DOM节点

//DOM节点相关,主要兼容IE 6 7 8function nextnode(obj){//获取下一个兄弟节点if (obj.nextElementSibling) {return obj.nextElementSibling;} else{return obj.nextSibling;};}function prenode(obj){//获取上一个兄弟节点if (obj.previousElementSibling) {return obj.previousElementSibling;} else{return obj.previousSibling;};}function firstnode(obj){//获取第一个子节点if (obj.firstElementChild) {return obj.firstElementChild;//非IE678支持} else{return obj.firstChild;//IE678支持};}function lastnode(obj){//获取最后一个子节点if (obj.lastElementChild) {return obj.lastElementChild;//非IE678支持} else{return obj.lastChild;//IE678支持};}

document.getElementsByClassName

//通过类名获取元素document.getElementsByClassName('');//IE 6 7 8不支持;//这里可以定义一个函数来解决兼容问题//第一个为全局获取类名,第二个为局部获取类名function byClass1(oClass){//全局获取,oClass为你想要查找的类名,没有“.”var tags=document.all?document.all:document.getElementsByTagName('*');var arr=[];for (var i = 0; i < tags.length; i++) {var reg=new RegExp('\\b'+oClass+'\\b','g');if (reg.test(tags[i].className)) {arr.push(tags[i]);};};return arr;//注意返回的也是数组,包含你传入的class所有元素;}function byClass2(parentID,oClass){//局部获取类名,parentID为你传入的父级IDvar parent=document.getElementById(parentID);var tags=parent.all?parent.all:parent.getElementsByTagName('*');var arr=[];for (var i = 0; i < tags.length; i++) {var reg=new RegExp('\\b'+oClass+'\\b','g');if (reg.test(tags[i].className)) {arr.push(tags[i]);};};return arr;//注意返回的也是数组,包含你传入的class所有元素;}

获取元素的非行间样式值

//获取元素的非行间样式值function getStyle(object,oCss) {if (object.currentStyle) {return object.currentStyle[oCss];//IE}else{return getComputedStyle(object,null)[oCss];//除了IE}}

设置监听事件

//设置监听事件function addEvent(obj,type,fn){//添加事件监听,三个参数分别为 对象、事件类型、事件处理函数,默认为falseif (obj.addEventListener) {obj.addEventListener(type,fn,false);//非IE} else{obj.attachEvent('on'+type,fn);//ie,这里已经加上on,传参的时候注意不要重复加了};}function removeEvent(obj,type,fn){//删除事件监听if (obj.removeEventListener) {obj.removeEventListener(type,fn,false);//非IE} else{obj.detachEvent('on'+type,fn);//ie,这里已经加上on,传参的时候注意不要重复加了};}

元素到浏览器边缘的距离

//在这里加个元素到浏览器边缘的距离,很实用function offsetTL(obj){//获取元素内容距离浏览器边框的距离(含边框)var ofL=0,ofT=0;while(obj){ofL+=obj.offsetLeft+obj.clientLeft;ofT+=obj.offsetTop+obj.clientTop;obj=obj.offsetParent;}return{left:ofL,top:ofT};}

阻止事件传播

//js阻止事件传播,这里使用click事件为例document.onclick=function(e){var e=e||window.event;if (e.stopPropagation) {e.stopPropagation();//W3C标准}else{e.cancelBubble=true;//IE....}}

阻止默认事件

//js阻止默认事件document.onclick=function(e){var e=e||window.event;if (e.preventDefault) {e.preventDefault();//W3C标准}else{e.returnValue='false';//IE..}}

关于event事件中的target

//关于event事件中的targetdocument.onmouseover=function(e){var e=e||window.event;var Target=e.target||e.srcElement;//获取target的兼容写法,后面的为IEvar from=e.relatedTarget||e.formElement;//鼠标来的地方,同样后面的为IE...var to=e.relatedTarget||e.toElement;//鼠标去的地方}

鼠标滚轮滚动事件

//鼠标滚轮事件//火狐中的滚轮事件document.addEventListener("DOMMouseScroll",function(event){alert(event.detail);//若前滚的话为 -3,后滚的话为 3},false)//非火狐中的滚轮事件document.onmousewheel=function(event){alert(event.detail);//前滚:120,后滚:-120}

节点加载

//火狐下特有的节点加载事件,就是节点加载完才执行,和onload不同
//感觉用到的不多,直接把js代码放在页面结构后面一样能实现。。
document.addEventListener('DOMContentLoaded',function ( ){},false);//DOM加载完成。好像除IE6-8都可以.

键盘事件

//键盘检测兼容
function KeyC(eve){var e = eve || window.event;var keyc = e.keyCode || e.which;return keyc;
}

关于用 “索引” 获取字符串每一项出现的兼容性问题

 var str="abcde";aletr(str[1]);//但是低版本的浏览器 IE6,7 不兼容//兼容方法:str.charAt (i)    // 全部浏览器都兼容var str="abcde";for(var i=0;i<str.length;i++){alert (str.charAt (i));   // 放回字符串中的每一项}

窗口大小的兼容写法

IE,Chrome: document.body.scrollTop
FF: document.documentElement.scrollTop
// 浏览器窗口可视区域大小(不包括工具栏和滚动条等边线)
// 1600 * 525
var client_w = document.documentElement.clientWidth || document.body.clientWidth;
var client_h = document.documentElement.clientHeight || document.body.clientHeight;// 网页内容实际宽高(包括工具栏和滚动条等边线)
// 1600 * 8
var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;
var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;// 网页内容实际宽高 (不包括工具栏和滚动条等边线)
// 1600 * 8
var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth;
var offset_h = document.documentElement.offsetHeight || document.body.offsetHeight;// 滚动的高度
var scroll_Top = document.documentElement.scrollTop||document.body.scrollTop;

创建ajax对象

var xhr = new XMLHttpRequest()     ||    new ActiveXObject("Microsoft,XMLHTTP");

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

7.1 为什么要用函数

主要内容&#xff1a; 这段文字主要讲述了为什么要使用函数来进行程序设计&#xff0c;以及函数在程序设计中的重要性和作用。以下是这段文字的主要内容和要点&#xff1a; ### 1. **简化和清晰度** - 当程序规模较大&#xff0c;功能较多时&#xff0c;如果所有代码都写在主…

04-Zookeeper集群详解

上一篇&#xff1a;03-Zookeeper客户端使用 Zookeeper 集群模式一共有三种类型的角色 Leader: 处理所有的事务请求&#xff08;写请求&#xff09;&#xff0c;可以处理读请求&#xff0c;集群中只能有一个LeaderFollower&#xff1a;只能处理读请求&#xff0c;同时作为 Le…

【数据库——MySQL】(6)查询(1)

目录 1. 数据库查询1.1 输出项为列名1.2 输出项为表达式1.3 输出内容变换1.4 消除输出项的重复行1.5 聚合函数 2. 查询条件&#xff1a;逻辑条件2.1 比较运算2.2 模式匹配2.3 范围限定2.4 空值判断 3. 分组3.1 基本分组3.2 分组汇总 4. 分组后筛选5. 输出行排序5.1 ORDER BY5.2…

Anchors

这是源代码定义的anchors概念&#xff1a; 实现过程&#xff1a; 假如有一张500500的图片&#xff0c;那么经过第一步深度卷积网络之后&#xff08;4次池化&#xff09;&#xff0c;最终就会变成一个3232的特征&#xff1a; 在开源代码实现里面&#xff1a; 所以经过卷积完之后…

leetCode 62.不同路径 动态规划 + 空间复杂度优化

62. 不同路径 - 力扣&#xff08;LeetCode&#xff09; 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &#xf…

基于SpringBoot的酒店客房管理系统

基于SpringBoot的酒店管理系统、酒店客房管理系统 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBoot、Vue、Mybaits Plus、ELementUI工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 首页 管理员界面 用户界面 代码展示 <temp…

如何使用docker快速部署MinDoc文档系统

MinDoc是非常优秀的知识分享系统&#xff0c;但是很多刚接触的人会一脸懵逼&#xff0c;而且官方文档写的也并不清晰&#xff0c;所以和大家分享一下快速部署MinDoc的方法。 首先docker环境先自行安装好&#xff0c;这里不再赘述。 拉取docker镜像&#xff1a; docker pull …

MybatisPlus自定义SQL用法

1、功能概述&#xff1f; MybatisPlus框架提供了BaseMapper接口供我们使用&#xff0c;大大的方便了我们的基础开发&#xff0c;但是BaseMapper中提供的方法很多情况下不够用&#xff0c;这个时候我们依旧需要自定义SQL,也就是跟mybatis的用法相同&#xff0c;自定义xml映射文…

lv5 嵌入式开发-8 内存映射

目录 1 内存映射基本使用 1.1 内存映射概念 1.2 内存映射的使用 2 共享内存&#xff08;古老的 System V IPC&#xff09; 2.1 基本概念 2.2 共享内存使用步骤 2.3 共享内存使用 掌握&#xff1a;内存映射概念、内存映射使用、内存映射注意事项、了解SYSTEM V 共享内存概…

nodejs+vue中国非物质文化遗产网站设计与实现elementui

前端页面&#xff1a; 导航栏借鉴下面的 1首页&#xff1a;带有一个全屏轮播图和其他的内容 2咨询页&#xff1a;有关中国非物质文化遗产的一些新闻咨询网站对于记录非遗这种无形的、动态的文化资源有着其他技术无可替代的优势。用户可以在该网站浏览、了解和学习非遗文化&…

uni-app:canvas-绘制图形4(获取画布宽高,根据画布宽高进行图形绘制)

效果 代码 var width ; var height ; const query uni.createSelectorQuery(); //获取宽度 query.select(#firstCanvas).fields({ size: true }, (res) > { width res.width; height res.height; }).exec(); console.log(宽度width); console.log(高…

关于Pod的内存使用率一直很高的问题分析

生产环境中在流量高峰期出现pod内存使用率很高&#xff0c;pod批量重启&#xff0c;错误日志中还有OOM相关信息。 查看堆内存的使用值 Pod使用的内存不能直接在pod中通过top命令查看&#xff0c;这种方式看到的是pod所在node的资源使用情况。想查看pod的资源使用情况需要用ku…

SEO的优化教程(百度SEO的介绍和优化)

百度SEO关键字介绍&#xff1a; 百度SEO关键字是指用户在搜索引擎上输入的词语&#xff0c;是搜索引擎了解网站内容和相关性的重要因素。百度SEO关键字可以分为短尾词、中尾词和长尾词&#xff0c;其中长尾词更具有针对性和精准性&#xff0c;更易于获得高质量的流量。蘑菇号-…

【Matplotlib画图】使用Python Matplotlib画三维的子图

文章目录 1. 代码2. 画图效果写在最后 1. 代码 在matlab转过来&#xff0c;之前一直不知道python的写法&#xff0c;以为是像matlab一样返回一个句柄然后在上面添加元素&#xff1b; 其实是应该先创建一个画布&#xff0c;然后再在上面添加子图&#xff0c;然后再使用返回的句…

解决 MyBatis-Plus 中增加修改时,对应时间的更新问题

问题&#xff1a;在添加修改时&#xff0c;对应的 create_time 与 insert_time 不会随着添加修改而自动的更新时间 第一步&#xff1a;首先在对应的属性上&#xff0c;加上以下注解 如果只添加以下注解&#xff0c;在增加或者修改时&#xff0c;可能对应的 LocalDateTime 会出…

基于微信小程序的公交信息在线查询系统小程序设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言系统主要功能&#xff1a;具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计…

支付宝支付模块开发

生成二维码 使用Hutool工具类生成二维码 引入对应的依赖 <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.7.5</version> </dependency><dependency><groupId>com.go…

数码产品数码配件无线键盘等出口欧盟CE-RED认证测试办理

数码产品数码配件无线键盘CE-RED认证测试办理 无线产品CE-RED认证进入东欧市场规定&#xff1a; 在通信终端设备和无线产品在这些/地区合法销售之前&#xff0c;必须按照 RED 指令进行测试&#xff0c;并且还必须提供 CE 标志。无线远程控制产品必须符合 RED 指令的 REDEU 要…

华为云HECS云服务器docker环境下安装nginx

前提&#xff1a;有一台华为云服务器。 华为云HECS云服务器&#xff0c;安装docker环境&#xff0c;查看如下文章。 华为云HECS安装docker-CSDN博客 一、拉取镜像 下载最新版Nginx镜像 (其实此命令就等同于 : docker pull nginx:latest ) docker pull nginx查看镜像 dock…

JS对象数组去重

JS对象数组去重 一、数组去重1.使用 new Set()2.使用 indexOf 去重3.使用 includes 去重4.使用 hasOwnProperty5.使用 filter6.使用递归7.利用 Map 数据结构去重8.使用用 reduce includes9.使用 new Set() 的简化 二、对象数组去重1.使用 new Map() 和 filter2.使用reduce3.使…