前言

Javaｓｃｒｉｐｔ中有很多漏洞，浏览器兼容性也是个问题。本文简要总结了一些浏览器兼容性问题的例子，旨在便于查找。如果读者有一些好的建议，请留言和交流，谢谢。



窗口的大小

1。在IE9 +，Chrome，Firefox，Opera，Safari浏览器



Window.innerHeight会在浏览器窗口内的高度



Window.innerWidth会在浏览器窗口内宽




var msg =窗口宽度： window.innerheight + +窗口高度：+ window.innerwidth；
警报（MSG）；



2。在IE5 / 6 / 7 / 8（通过Chrome和Firefox也支持）



document.documentelement.clientheight



document.documentelement.clientwidth




var msg =窗口宽度： document.documentelement.clientwidth + +窗口高度：+ document.documentelement.clientheight；
警报（MSG）；


三.兼容写作（它可以覆盖所有浏览器）



这是前两个的书写。




无功W = window.innerwidth document.documentelement.clientwidth | |；
var H = window.innerheight document.documentelement.clientheight | |；
警报（）窗口宽度：窗口高度：+ H；


得到一个内部样式表和外部样式表

1。IE浏览器对：对象。currentstyle {属性名}



2。其他浏览器：window.getcomputedstyle（对象，null）{属性名}



注意：在外部样式表中的样式表，内部属性只能得到无需修改。如果你想修改行间样式表，行间样式表具有最高的优先级，和内部样式表和外部样式表将被覆盖。



为了简化浏览器的编写和兼容性，通常封装一个方法。







无功1 = document.getelementbyid（1）；
/ /警报（1。currentstyle {宽度}）； / /只支持IE浏览器
/ /警报（window.getcomputedstyle（1，null）{高度}）； / /其他浏览器支持浏览器外的
警报（getstyle（1，底色））；
*
为了简化浏览器的编写和兼容性，一般的封装方法
* /
功能getstyle（对象，属性）{
如果（obj。currentstyle）{ / /如果有物体在IE浏览器
返回的对象。currentstyle {属性}；
}其他浏览器
返回window.getcomputedstyle（obj，null）{属性}；
}
}





onscroll事件



window.onscroll =函数（）{
console.log（开始）；
获取跨浏览器滚动距离
console.log（document.documentelement.scrolltop document.body.scrolltop |）；
}



事件对象


box.onclick =函数（事件）{
事件=事件window.event | |；
console.log（offsetx：+ event.offsetx +offsety：+事件。offsety）；
console.log（用ScreenX：+ +event.screenx Screeny：+事件。Screeny）；
console.log（ClientX：+ event.clientx +clienty：+事件。clienty）；
console.log（pagex：+ event.pagex +pagey：+事件。pagey）；
}


以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。