浏览器兼容性
关于CSS、JS效果的兼容性学习笔记
拾一·
个人学习笔记
展开
-
常用的浏览器兼容问题,包含滚动条、获取事件对象、获取非行内样式、获取鼠标编码值、事件监听等
1、滚动条//1.滚动条到顶端的距离(滚动高度)var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//2.滚动条到左端的距离var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;2、获取非行内样式//获取非行内样式兼容 IE:currentStyle 标准:getC原创 2021-10-09 10:46:58 · 139 阅读 · 0 评论 -
滚动条隐藏处理:兼容火狐和其他浏览器
滚动条隐藏处理:兼容火狐和其他浏览器,一般使用于同一容器内有双滚动条的场景原创 2023-07-28 11:02:21 · 651 阅读 · 0 评论 -
创建一个AJAX对象的兼容性写法(针对IE高低版本的兼容)
// IE9及以上const xhr = new XMLHttpRequest()// IE9以下const xhr = new ActiveXObject('Microsoft.XMLHTTP;')//兼容写法if(window.XMLHttpRequest){ var xhr=new XMLHttpRequest();}else{ // IE5 IE6 var xhr=new ActiveXObject("Microsoft.XMLHTTP;");};...原创 2021-07-27 23:12:31 · 176 阅读 · 0 评论 -
javaScript阻止默认行为——e.preventDefault 和 e.returnValue = false(</a>标签的默认跳转、鼠标右键默认行为、表单默认自动提交)
在新版本浏览器中,e.preventDefault 和 e.returnValue = false都能够阻止默认行为 在老版本浏览器中,就需要区分IE浏览器和非IE浏览器了。e.preventDefault 用于非IE浏览器;e.returnValue = false用于IE浏览器。e.returnValue = false在IE8及以下版本,可以实现阻止默认行为;在IE8以上版本的IE则没有效果,不能阻止默认行为。<form action="#"> ...原创 2021-07-08 12:59:00 · 1217 阅读 · 0 评论 -
javaScript:实现事件委托时,target属性的兼容性(针对老版本IE浏览器)
e.target||e.srcElement //e.srcElement用于老版本IE浏览器通过菜单栏案例来演示事件委托效果事件委托原理形象化理解:子元素li将事件委托给父元素ul 操作:给父元素ul绑定点击事件,当我们点击每个li时,能够得出对应li里面的内容代码如下:<h1>动画片</h1> <ul> <li>火影忍者</li> <li>喜羊羊</li&...原创 2021-07-08 11:26:14 · 452 阅读 · 0 评论 -
javaScript获取键盘按键码的兼容性(针对火狐和其他浏览器)
狐火2.0版本不支持e.keyCode方式,用e.which来实现兼容e.keyCode || e.which给文档对象绑定点击事件document.onclick=function(e){vare=e||window.eventconsole.log(e.button)...原创 2021-07-08 09:46:06 · 215 阅读 · 0 评论 -
javaScript事件监听addEventListener和attachEvent的兼容性和区别
if(div1.attachEvent){//在IE7 8 执行div1.attachEvent("onclick",fn1) div1.attachEvent("onclick",fn2) div1.attachEvent("onclick",fn3)//注:输出结果是fn1 fn2 fn3}else{//在非IE7 8 执行div1.addEventListen...原创 2021-07-07 17:40:15 · 220 阅读 · 0 评论 -
javaScript事件对象的兼容性(针对新老版本浏览器)
div1.onclick=function(e){vare=e||window.eventconsole.log(e)}关于事件对象的关键点:在声明式函数中,如果直接使用函数名来调用该函数时,函数中是没有事件对象的 必须要有事件源,事件类型以后,才会在当前事件的处理函数中出现事件对象 在新老版本的浏览器中存在事件对象的兼容:e||window.event...原创 2021-07-07 16:11:04 · 109 阅读 · 0 评论 -
javaScript:获取非行间样式的属性值(获取div1对象的top属性的值,距离顶部的距离)
if(div1.currentStyle){//IE低版本vartop1=div1.currentStyle.top}else{//非IE低版本使用的方式vartop1=window.getComputedStyle(div1).top}...原创 2021-07-07 14:13:32 · 236 阅读 · 0 评论 -
javaScript:获取页面滚动距离的元素.scrollTop和元素.scrollLeft获取的兼容性处理(IE、Chrome 、 FireFox、Safari)
注:火狐用window.pageYoffset<button>点击</button><script>vartop1window.onscroll=function(){//获取滚动距离:兼容top1=document.documentElement.scrollTop||document.body.scrollTopconsole...原创 2021-07-07 14:01:00 · 335 阅读 · 0 评论