一. element.setAttribute 与 element.className

我们通过Js脚本对DOM 节点进行修改其样式class的时候,有几种方式进行操作:

1.element.setAttribute('className','xxxClass');//仅对IE有效

2.element.setAttribute('class','xxxClass');//仅对FF有效

3.element.className = 'xxxClass';//兼容IE与FF

当然我们可以通过判断浏览器来实现兼容如:

if(document.all) {
    element.setAttrbute('className', 'xxxClass');
} else {
    element.setAttrbute('class', 'xxxClass');
}

推荐第3种写法。

二.event事件

如果我们需要用到一个兼容IE和FF的JS事件,我们可以利用下面这段代码,这在很多需要做事件处理的JS代码中非常有用。

代码

//格式化事件
function getEvent(){
     //同时兼容ie和ff的写法
     if(document.all)    return window.event;
     func=getEvent.caller;
     while(func!=null){
         var arg0=func.arguments[0];
         if(arg0){
             if((arg0.constructor==Event || arg0.constructor ==MouseEvent)
                || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){
                return arg0;
              }
         }
          func=func.caller;
        }
        return null;
}

你可以用var event=getEvent();来获得一个兼容IE与FF的事件,比如如下这段兼容IE与FF的拖拽代码中可以用到它:

代码

//拖拽
//对“拖动点”定义:onMousedown="StartDrag(this)" onMouseup="StopDrag(this)" onMousemove="Drag(this)"即可
var move=false,_X,_Y;
function StartDrag(obj,winId){  //定义准备拖拽的函数
    var event=getEvent();
    //同时兼容ie和ff的写法
    if (!window.captureEvents) {
        obj.setCapture(); //对当前对象的鼠标动作进行跟踪
    }else {
        window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    }
    move=true;
    //获取鼠标相对内容层坐标
    var pos=jQuery('#'+winId).position();
    jQuery('#'+winId).fadeTo(0,0.8);

_X=pos.left-event.clientX;
    _Y=pos.top-event.clientY;
}
function DragWin(obj,winId){        //定义拖拽函数
    var event=getEvent();
    if(move){
        var parentwin=jQuery('#'+winId);
        var left_x;
        var top_y;
        if(event.clientX+_X < 0) {
            left_x = 0;
        } else if (event.clientX+_X > document.documentElement.clientWidth-$("#"+winId).width()) {
            left_x = document.documentElement.clientWidth-$("#"+winId).width();
        } else {
            left_x = event.clientX+_X;
        }
        if(event.clientY+_Y < document.documentElement.scrollTop) {
            top_y = document.documentElement.scrollTop;
        } else if (event.clientY+_Y > document.documentElement.scrollTop+document.documentElement.clientHeight-$("#"+winId).height()) {
            top_y = document.documentElement.scrollTop+document.documentElement.clientHeight-$("#"+winId).height();
        } else {
            top_y = event.clientY+_Y;
        }
        parentwin.css("left",left_x);
        parentwin.css("top",top_y);
    }
}
function StopDrag(obj,winId){   //定义停止拖拽函数
    //同时兼容ie和ff的写法
    if (!window.captureEvents) {
        obj.releaseCapture(); //停止对当前对象的鼠标跟踪
    }else {
        window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    }
    jQuery('#'+winId).fadeTo(0,1);
    move=false;
}

先留篇文档,便于更新记录日常工作中解决的浏览器兼容问题。

转载于:https://www.cnblogs.com/arix04/archive/2010/09/21/1832648.html

(原创)JS兼容性笔记(更新)相关推荐

  1. Node.js学习笔记 更新完毕 2022 coderwhyWEB前端体系课

    一 Node.js是什么 官方对Node.js的定义: Node.js是一个基于V8 JavaScript引擎的JavaScript运行时环境 Node.js is a JavaScript runt ...

  2. 唤醒手腕 - 前端服务器端开发 Node.Js 学习笔记(学习中,更新中)

    唤醒手腕 - Node.Js 学习笔记 唤醒手腕个人的学习记录,时间在2021年12月13日 ~ 2021年12月14日,学习方式看官方文档和B站视频,如有错误或者代码问题的地方,欢迎C站大佬能够帮忙 ...

  3. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  4. 千锋Node.js学习笔记

    千锋Node.js学习笔记 文章目录 千锋Node.js学习笔记 写在前面 1. 认识Node.js 2. NVM 3. NPM 4. NRM 5. NPX 6. 模块/包与CommonJS 7. 常 ...

  5. html 流程控制,HTML5独家分享:原生JS学习笔记2——程序流程控制

    当当当当 .....楼主又来了!新一期的js学习笔记2--程序流程控制更新了! 想一键获取全部js学习笔记的可以给楼主留言哦! js中的程序控制语句 常见的程序有三种执行结构: 1.顺序结构 2.分支 ...

  6. Vue.js 学习笔记 六 v-model 双向绑定数据

    之前说的v-bind指令,可以绑定数据,但是是单向的,从model向view绑定,下面介绍v-model,可以双向绑定数据 <div id="divApp"><p ...

  7. prototype.js开发笔记(转)

    prototype.js开发笔记 Table of Contents 1. Programming Guide 1.1. Prototype是什么? 1.2. 关联文章 1.3. 通用性方法 1.3. ...

  8. Auto.js学习笔记1:开发需要准备什么工具和编程语言知识?

    什么是Auto.js? 根据官方文档定义:Auto.js是一款无需root权限的JavaScript自动化软件. Auto.js是一款安卓手机的应用主要用webview,和微信一样,安装在手机上: A ...

  9. [原创]Saltstack学习笔记:命令参数详解以及配置文件说明

    很久没有更新saltstack的文章了,今天还是来更新一点,又开始对saltstack复习了一下. 前边写了一点<saltstack入门概述(1)>以及<Saltstack如何安装( ...

最新文章

  1. python与MySQL交互
  2. 《软件工程方法与实践》—— 导读
  3. 第三次学JAVA再学不好就吃翔(part56)--StringBuffer的替换反转和截取功能
  4. 根因分析初探:一种报警聚类算法在业务系统的落地实施 1
  5. 华中师范大学本科生计算机课教师,华中师范大学第八届大学生计算机设计大赛的通知...
  6. 洛谷——P1009 [NOIP1998 普及组] 阶乘之和
  7. NPM — JavaScript 的包管理器
  8. 使用源代码编译安装基于LAMP的网站架构
  9. DevOps: 一例高负载多并发服务器连接池满的异常排解过程
  10. DSP技术-2-DSP的C语言同主机C语言的主要区别在哪里?
  11. Java项目:SSM会议室预约系统
  12. 电脑计算机无法搜索文件,电脑中的文件搜索功能出错怎么办?电脑无法搜索出实际存在的文件如何解决...
  13. u3d occlusion 遮挡剔除
  14. 计算机毕业设计SSM常见病辅助食疗系统【附源码数据库】
  15. 微信公众号工作中如何产生新媒体思维
  16. 天猫精灵开发技能【3】
  17. Zilliqa 的设计构思 第3部分:使共识更有效
  18. supervisor中使用虚拟环境
  19. knn算法,利用numpy简单实现
  20. 系统架构设计师2009-2022历年综合知识、案例分析、论文真题及答案详细解析

热门文章

  1. java 字符串用法_java中字符串的用法
  2. 米兔点读笔点读包_小米米兔点读笔评测:养成教育只要轻松一点
  3. 网络运维基础之IP地址学习
  4. aapt.exe已停止工作 r.java_【转】android错误 aapt.exe已停止工作的解决方法
  5. Windows安装python3.6.x版本
  6. C++向量 vector动态数组
  7. BZOJ3832 [Poi2014]Rally 【拓扑序 + 堆】
  8. Linux下tmp文件夹的文件自动删除的问题(转)
  9. post from open live writer
  10. css制作漂亮彩带导航条菜单