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

网络编程 2024/11/14 佚名

3 2 1

前言

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浏览器兼容,javascript兼容性问题

标签：

javascript浏览器兼容,javascript兼容性问题

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“谈谈JavaScript中浏览器兼容问题的写法小议”

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

暂无“谈谈JavaScript中浏览器兼容问题的写法小议”评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新动态

2024年11月14日

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

javascript浏览器兼容,javascript兼容性问题

Bootstrap CSS组件之按钮组(btn-group)

Bootstrap CSS组件之下拉菜单(dropdown)

评论“谈谈JavaScript中浏览器兼容问题的写法小议”

P70系列延期，华为新旗舰将在下月发布

更新动态

友情链接