谈谈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 调整select 位置的函数
Feb 21 Javascript
JavaScript 无符号右移赋值操作
Apr 17 Javascript
js对象关系图 方便dom操作
Mar 18 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
Sep 25 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 Javascript
Node.js制作简单聊天室
Jan 12 Javascript
详解webpack异步加载业务模块
Jun 23 Javascript
微信小程序dom操作的替代思路实例分析
Dec 06 Javascript
微信小程序实现侧边分类栏
Oct 21 Javascript
vantUI 获得piker选中值的自定义ID操作
Nov 04 Javascript
原生Javascript+HTML5一步步实现拖拽排序
Jun 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
用PHP实现验证码功能
2006/10/09 PHP
解析ajax事件的调用顺序
2013/06/17 PHP
PHP中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
PHP启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
JS localStorage实现本地缓存的方法
2013/06/22 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
不到30行JS代码实现Excel表格的方法
2014/11/15 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
JavaScript实现随机点名小程序
2020/10/29 Javascript
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
Python函数的周期性执行实现方法
2016/08/13 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
深入理解Python中的super()方法
2017/11/20 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
python剪切视频与合并视频的实现
2020/03/03 Python
Python json转字典字符方法实例解析
2020/04/13 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
缓解脚、腿和背部疼痛:Z-CoiL鞋
2019/03/12 全球购物
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
化学教师教学反思
2014/01/17 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
绿色环保口号
2014/06/12 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
中学综治宣传月活动总结
2015/05/07 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书
十个Python自动化常用操作,即拿即用
2021/05/10 Python
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript