谈谈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 相关文章推荐
for 循环性能比较 提高for循环的效率
Mar 19 Javascript
struts2+jquery+json实现异步加载数据(自写)
Jun 24 Javascript
javascript中的self和this用法小结
Feb 08 Javascript
关于Javascript 对象(object)的prototype
May 09 Javascript
jquery实现预览提交的表单代码分享
May 21 Javascript
Node.js文件操作详解
Aug 16 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
Jan 04 Javascript
详解AngularJS中ng-src指令的使用
Sep 07 Javascript
JS实现简单短信验证码界面
Aug 07 Javascript
详解angular路由高亮之RouterLinkActive
Apr 28 Javascript
JavaScript设计模式之观察者模式实例详解
Jan 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应用程序来获取Web服务器的状态信息
2006/10/09 PHP
帖几个PHP的无限分类实现想法~
2007/01/02 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
js验证表单大全
2006/11/25 Javascript
动态刷新 dorado树的js代码
2009/06/12 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
Jquery uploadify上传插件使用详解
2016/01/13 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
解决前端跨域问题方案汇总
2016/11/20 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
2017/02/08 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
Angular获取手机验证码实现移动端登录注册功能
2017/05/17 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
微信小程序如何调用图片接口API并居中显示
2019/06/29 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
原生JS运动实现轮播图
2021/01/02 Javascript
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
在Python中操作字符串之rstrip()方法的使用
2015/05/19 Python
在CentOS6上安装Python2.7的解决方法
2018/01/09 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
python 处理string到hex脚本的方法
2018/10/26 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
利用Python计算KS的实例详解
2020/03/03 Python
tensorflow模型转ncnn的操作方式
2020/05/25 Python
Python命名空间namespace及作用域原理解析
2020/06/05 Python
业务助理岗位职责
2013/11/18 职场文书
九年级物理教学反思
2014/01/29 职场文书
保护动物倡议书
2014/04/15 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript