谈谈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 相关文章推荐
js中cookie的添加、取值、删除示例代码
Oct 21 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
JS实现的5级联动Select下拉选择框实例
Aug 17 Javascript
整理Javascript函数学习笔记
Dec 01 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
Jul 23 Javascript
了解前端理论:rscss和rsjs
May 23 Javascript
vue遍历对象中的数组取值示例
Nov 07 Javascript
JavaScript布尔运算符原理使用解析
May 06 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
Sep 01 Javascript
分享8个JavaScript库可更好地处理本地存储
Oct 12 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
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
PHP获取当前url的具体方法全面解析
2013/11/26 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
jquery 事件对象属性小结
2010/04/27 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
JS动态修改iframe内嵌网页地址的方法
2015/04/01 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
2015/11/24 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
2020/11/12 Javascript
webpack4从0搭建组件库的实现
2020/11/29 Javascript
微信小程序自定义支持图片的弹窗
2020/12/21 Javascript
[42:11]TNC vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
[原创]教女朋友学Python3(二)简单的输入输出及内置函数查看
2017/11/30 Python
Python 实现使用dict 创建二维数据、DataFrame
2018/04/13 Python
Python学习笔记之open()函数打开文件路径报错问题
2018/04/28 Python
利用Python实现kNN算法的代码
2019/08/16 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
广州迈达威.net面试题目
2012/03/10 面试题
质量整改通知单
2015/04/21 职场文书
爱心捐款活动总结
2015/05/09 职场文书
大学入学感言
2015/08/01 职场文书
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android
浅谈MySQL表空间回收的正确姿势
2021/10/05 MySQL
Win11显卡控制面板打开显卡设置方法
2022/04/20 数码科技
Python 中面向接口编程
2022/05/20 Python