谈谈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控件的相对独立性
Sep 06 Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 Javascript
从零学习node.js之搭建http服务器(二)
Feb 21 Javascript
Angular.JS中的指令引用template与指令当做属性详解
Mar 30 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
Jul 18 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
Nov 28 Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 Javascript
JS轻量级函数式编程实现XDM三
Jun 16 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英文字符串截取代码分享
2014/07/15 PHP
详解cookie验证的php应用的一种SSO解决办法
2017/10/20 PHP
php实现微信公众号创建自定义菜单功能的实例代码
2019/06/11 PHP
laravel利用中间件做防非法登录和权限控制示例
2019/10/21 PHP
获取当前网页document.url location.href区别总结
2008/05/10 Javascript
javascript 学习之旅 (1)
2009/02/05 Javascript
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
JS实现切换标签页效果实例代码
2013/11/01 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
AngularJs concepts详解及示例代码
2016/09/01 Javascript
JS实现简单短信验证码界面
2017/08/07 Javascript
Js利用console计算代码运行时间的方法示例
2017/09/24 Javascript
AngularJS实现注册表单验证功能
2017/10/16 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
python实现文件名批量替换和内容替换
2014/03/20 Python
Python获取远程文件大小的函数代码分享
2014/05/13 Python
Python六大开源框架对比
2015/10/19 Python
Python守护进程和脚本单例运行详解
2017/01/06 Python
如何用itertools解决无序排列组合的问题
2017/05/18 Python
python图像常规操作
2017/11/11 Python
python实现堆排序的实例讲解
2020/02/21 Python
python线程里哪种模块比较适合
2020/08/02 Python
英国在线药房:Express Chemist
2019/03/28 全球购物
煤矿机修工岗位职责
2014/02/07 职场文书
党校学习心得体会范文
2014/09/09 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
幼师必备:幼儿园期末教师评语50条
2019/11/01 职场文书
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android
Android实现图片九宫格
2022/06/28 Java/Android