谈谈JavaScript中浏览器兼容问题的写法小议


Posted in Javascript onDecember 17, 2016

前言

JavaScript中很多坑,其中对浏览器的兼容也是一个问题,本文就简略的归纳了部分针对浏览器兼容问题的写法的例子,旨在便于查找。如果读者有什么好的意见建议,请留言交流,谢谢!

window窗口大小

1.在IE9+、Chrome、Firefox、Opera以及Safari中

window.innerHeight获取浏览器窗口的内部高度

window.innerWidth获取浏览器窗口的内部宽度

var msg = "窗口宽度:" + window.innerHeight + "\n窗口高度:" + window.innerWidth;
alert(msg );

2.在IE5/6/7/8(Chrome和Firefox也支持)

document.documentElement.clientHeight

document.documentElement.clientWidth

var msg = "窗口宽度:" + document.documentElement.clientWidth + "\n窗口高度:" + document.documentElement.clientHeight;
alert(msg);

3.兼容写法(可以涵盖所有的浏览器)

就是把前两者的写法相 “或”。

var w = window.innerWidth || document.documentElement.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight;
alert("窗口宽度:" + w + "\n窗口高度:" + h);

获取内部样式表和外部样式表

1.对IE浏览器:对象.currentStyle[“属性名”]

2.其他浏览器:window.getComputedStyle(对象, null)[“属性名”]

注意:内部样式表中的属性和外部样式表中的属性只能获取不能修改。如果想修改需要通过行间样式表修改,行间样式表的优先级最高,会覆盖内部样式表和外部样式表。

为了简化书写和兼容浏览器,一般封装一个方法。如下列。

<body>
  <div id="box1"></div>
  <script type="text/javascript">
    var box1 = document.getElementById("box1");
    // alert(box1.currentStyle["width"]); //只支持IE浏览器
    // alert(window.getComputedStyle(box1, null)["height"]); //支持浏览器外的其他浏览器
    alert(getStyle(box1, "backgroundColor"));
    /*
      为了简化书写和兼容浏览器,一般封装一个方法出来
    */
    function getStyle (obj, attributeName) {  
      if(obj.currentStyle){  //如果存在对象,则是在ie浏览器
        return obj.currentStyle[attributeName];
      }else { //其他浏览器
        return window.getComputedStyle(obj, null)[attributeName];
      }
    }
  </script>
</body>

onscroll事件

<script type="text/javascript">
   window.onscroll = function () {
    console.log("开始滚动...");
    //跨浏览器获得滚动的距离
    console.log(document.documentElement.scrollTop | document.body.scrollTop);
  }
</script>

事件对象

box.onclick = function(event) {
      event = event || window.event;
      console.log("offsetX:" + event.offsetX + " offsetY:" + event.offsetY);
      console.log("screenX:" + event.screenX + " screenY:" + event.screenY);
      console.log("clientX:" + event.clientX + " clientY:" + event.clientY);
      console.log("pageX:" + event.pageX + " pageY: " + event.pageY);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript学习笔记(十)
Jan 17 Javascript
javascript权威指南 学习笔记之null和undefined
Sep 25 Javascript
关于js注册事件的常用方法
Apr 03 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
Jun 24 Javascript
js中符号转意问题示例探讨
Aug 19 Javascript
javascript 原型链维护和继承详解
Nov 26 Javascript
jquery解决客户端跨域访问问题
Jan 06 Javascript
javascript数组克隆简单实现方法
Dec 16 Javascript
JQuery日历插件My97DatePicker日期范围限制
Jan 20 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
Jul 25 Javascript
jquery自定义显示消息数量
Dec 19 jQuery
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
Dec 17 #Javascript
深入理解JS继承和原型链的问题
Dec 17 #Javascript
Bootstrap CSS组件之输入框组
Dec 17 #Javascript
原生js验证简洁注册登录页面
Dec 17 #Javascript
javascript 数组去重复(在线去重工具)
Dec 17 #Javascript
jQuery Validate验证框架详解(推荐)
Dec 17 #Javascript
Bootstrap CSS组件之导航条(navbar)
Dec 17 #Javascript
You might like
也谈php网站在线人数统计
2008/04/09 PHP
phpmailer在服务器上不能正常发送邮件的解决办法
2014/07/08 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
node.js中的fs.closeSync方法使用说明
2014/12/17 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
easyui-datagrid特殊字符不能显示的处理方法
2017/04/12 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
vue中的provide/inject的学习使用
2018/05/09 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
jquery添加div实现消息聊天框
2020/02/08 jQuery
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
Python内置函数的用法实例教程
2014/09/08 Python
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
Python切片知识解析
2016/03/06 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
python3实现单目标粒子群算法
2019/11/14 Python
python分布式爬虫中消息队列知识点详解
2020/11/26 Python
学生自我鉴定
2013/12/18 职场文书
大学毕业生个人自荐信范文
2014/01/08 职场文书
身边的榜样活动方案
2014/08/20 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
感谢信怎么写
2015/01/21 职场文书
学校社团活动总结
2015/05/07 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL
MYSQL如何查看操作日志详解
2022/05/30 MySQL