谈谈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 相关文章推荐
利用json获取字符出现次数的代码
Mar 22 Javascript
JavaScript自动设置IFrame高度的小例子
Jun 08 Javascript
JavaScript及jquey实现多个数组的合并操作
Sep 06 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
Jun 15 Javascript
jQuery树形下拉菜单特效代码分享
Aug 15 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
关于JavaScript中forEach和each用法浅析
Jul 27 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
Sep 15 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
利用JS响应式修改vue实现页面的input值
Sep 02 Javascript
layui table数据修改的回显方法
Sep 04 Javascript
微信小程序实现多行文字滚动
Nov 18 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
学习使用curl采集curl使用方法
2012/01/11 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
php use和include区别总结
2019/10/13 PHP
JavaScript 继承的实现
2009/07/09 Javascript
jquery isType() 类型判断代码
2011/02/14 Javascript
js实现倒计时(距离结束还有)示例代码
2013/07/24 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
js中作用域的实例解析
2017/03/16 Javascript
js评分组件使用详解
2017/06/06 Javascript
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
vue中实现先请求数据再渲染dom分享
2018/03/17 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python中optionParser模块的使用方法实例教程
2014/08/29 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
Python for i in range ()用法详解
2020/09/18 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
python关于变量名的基础知识点
2020/03/03 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
医学专业毕业生求职信
2014/06/20 职场文书
个人授权委托书样本
2014/09/13 职场文书
运动会广播稿200字
2014/10/18 职场文书
就业证明函
2015/06/17 职场文书
银行安全保卫工作总结
2015/08/10 职场文书
护理自荐信
2019/05/14 职场文书
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL