脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript中浏览器兼容

谈谈JavaScript中浏览器兼容问题的写法小议

 更新时间：2016年12月17日 16:20:01   作者：策码扬鞭  
本篇文章主要介绍了JavaScript中浏览器兼容问题的写法小议，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。

前言

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);
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 详解uniapp页面跳转URL传参大坑

    详解uniapp页面跳转URL传参大坑

    本文主要介绍了详解uniapp页面跳转URL传参大坑，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 深度解析JavaScript中的filter()方法

    深度解析JavaScript中的filter()方法

    在JavaScript中,filter()是一个数组方法,用于从数组中过滤出符合特定条件的元素,并返回一个新数组,本文将带大家深度解析JavaScript中的filter()方法,需要的朋友可以参考下
    2023-09-09
  • 记录微信小程序 height: calc(xx - xx)；无效问题

    记录微信小程序 height: calc(xx - xx)；无效问题

    这篇文章主要介绍了微信小程序 - height: calc(xx - xx)；无效 问题，文中给大家扩展介绍下jquery点击添加样式，再次点击移除样式的实例代码,需要的朋友可以参考下
    2019-12-12
  • uniapp监听页面滚动2种常用方法

    uniapp监听页面滚动2种常用方法

    在uni-app中,监听页面滚动可以使用onPageScroll生命周期函数或@scroll事件监听器,onPageScroll适用于监听整个页面的滚动事件,而@scroll事件监听器适用于监听特定组件如scroll-view的滚动,这两种方法的选择取决于监听需求的不同,需要的朋友可以参考下
    2024-09-09
  • 关于微信小程序map组件z-index的层级问题分析

    关于微信小程序map组件z-index的层级问题分析

    这篇文章主要给大家介绍了关于微信小程序map组件z-index的层级问题的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-07-07
  • Select下拉框模糊查询功能实现代码

    Select下拉框模糊查询功能实现代码

    这篇文章主要介绍了Select下拉框模糊查询功能实现代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-07-07
  • js正则表达式中exec用法实例

    js正则表达式中exec用法实例

    这篇文章主要介绍了js正则表达式中exec用法,实例分析了javascript中使用exec执行正则表达式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • JS实现深拷贝的几种方法介绍

    JS实现深拷贝的几种方法介绍

    这篇文章介绍了JS实现深拷贝的几种方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-06-06
  • JS+CSS实现仿新浪微博搜索框的方法

    JS+CSS实现仿新浪微博搜索框的方法

    这篇文章主要介绍了JS+CSS实现仿新浪微博搜索框的方法,实例分析了javascript针对搜索框样式的控制技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • layer.open属性详解及layer.open弹出框使用post方法举例

    layer.open属性详解及layer.open弹出框使用post方法举例

    这篇文章主要给大家介绍了关于layer.open属性详解及layer.open弹出框使用post方法的相关资料,最近接触到layer弹窗,感觉弹窗功能异常强大,真的很方便,所以记录下来,需要的朋友可以参考下
    2023-12-12

最新评论