谈谈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 相关文章推荐
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
May 23 Javascript
jQuery的slideToggle方法实例
May 07 Javascript
jQuery判断对象是否存在的方法
Feb 05 Javascript
JS+CSS实现带小三角指引的滑动门效果
Sep 22 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 Javascript
AngularJS HTML DOM详解及示例代码
Aug 17 Javascript
Jquery删除css属性的简单方法
Dec 04 Javascript
JS实现的简易拖放效果示例
Dec 29 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
js中数组常用方法总结(推荐)
Apr 09 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 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中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
Array对象方法参考
2006/10/03 Javascript
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
2014/12/16 Javascript
JS基于VML技术实现的五角星礼花效果代码
2015/10/26 Javascript
JavaScript标准对象_动力节点Java学院整理
2017/06/27 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
在Python中使用HTMLParser解析HTML的教程
2015/04/29 Python
python开发之函数定义实例分析
2015/11/12 Python
5种Python单例模式的实现方式
2016/01/14 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
关于pytorch中网络loss传播和参数更新的理解
2019/08/20 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
python encrypt 实现AES加密的实例详解
2020/02/20 Python
升级keras解决load_weights()中的未定义skip_mismatch关键字问题
2020/06/12 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
Nike挪威官网:Nike.com (NO)
2018/11/26 全球购物
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
小学生期末评语大全
2014/04/21 职场文书
计划生育宣传标语
2014/06/21 职场文书
国际贸易毕业生自荐书
2014/06/22 职场文书
高效课堂标语
2014/06/26 职场文书
环卫工作个人总结
2015/03/04 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
讲座开场白台词和结束语
2015/05/29 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
redis 存储对象的方法对比分析
2021/08/02 Redis
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL