JS中浏览器兼容性问题
来源:互联网 发布:fx5u有什么编程软件 编辑:程序博客网 时间:2024/05/18 00:16
1、浏览器的宽高问题
var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//网页可见区域宽 var winH=document.body.clientHeight||document.docuemntElement.clientHeight;//网页可见区域宽 //以上为不包括边框的宽高,如果是offsetWidth或者offsetHeight的话包括边框 var winWW=document.body.scrollWidth||document.docuemntElement.scrollWidth;//整个网页的宽 var winHH=document.body.scrollHeight||document.docuemntElement.scrollHeight;//整个网页的高 var scrollHeight=document.body.scrollTop||document.docuemntElement.scrollTop;//网页被卷去的高 var scrollLeft=document.body.scrollLeft||document.docuemntElement.scrollLeft;//网页左卷的距离 var screenH=window.screen.height;//屏幕分辨率的高 var screenW=window.screen.width;//屏幕分辨率的宽 var screenX=window.screenLeft;//浏览器窗口相对于屏幕的x坐标(除了FireFox) var screenXX=window.screenX;//FireFox相对于屏幕的X坐标 var screenY=window.screenTop;//浏览器窗口相对于屏幕的y坐标(除了FireFox) var screenYY=window.screenY;//FireFox相对于屏幕的y坐标
2、event事件问题:
document.onclick=function(ev){//谷歌火狐的写法,IE9以上支持,往下不支持; var e=ev; console.log(e); } document.onclick=function(){//谷歌和IE支持,火狐不支持; var e=event; console.log(e); } document.onclick=function(ev){//兼容写法; var e=ev||window.event; var mouseX=e.clientX;//鼠标X轴的坐标 var mouseY=e.clientY;//鼠标Y轴的坐标 }
3、DOM节点相关的问题
//DOM节点相关,主要兼容IE 6 7 8 function nextnode(obj){//获取下一个兄弟节点 if (obj.nextElementSibling) { return obj.nextElementSibling; } else{ return obj.nextSibling; }; } function prenode(obj){//获取上一个兄弟节点 if (obj.previousElementSibling) { return obj.previousElementSibling; } else{ return obj.previousSibling; }; } function firstnode(obj){//获取第一个子节点 if (obj.firstElementChild) { return obj.firstElementChild;//非IE678支持 } else{ return obj.firstChild;//IE678支持 }; } function lastnode(obj){//获取最后一个子节点 if (obj.lastElementChild) { return obj.lastElementChild;//非IE678支持 } else{ return obj.lastChild;//IE678支持 }; }
4、获取元素的非行间样式值
function getStyle(object,oCss) { if (object.currentStyle) { return object.currentStyle[oCss];//IE }else{ return getComputedStyle(object,null)[oCss];//除了IE } }
5、设置事件监听
function addEvent(obj,type,fn){//添加事件监听,三个参数分别为 对象、事件类型、事件处理函数,默认为false if (obj.addEventListener) { obj.addEventListener(type,fn,false);//非IE } else{ obj.attachEvent('on'+type,fn);//ie,这里已经加上on,传参的时候注意不要重复加了 }; } function removeEvent(obj,type,fn){//删除事件监听 if (obj.removeEventListener) { obj.removeEventListener(type,fn,false);//非IE } else{ obj.detachEvent('on'+type,fn);//ie,这里已经加上on,传参的时候注意不要重复加了 }; }
6、元素到浏览器边缘的距离
function offsetTL(obj){//获取元素内容距离浏览器边框的距离(含边框) var ofL=0,ofT=0; while(obj){ ofL+=obj.offsetLeft+obj.clientLeft; ofT+=obj.offsetTop+obj.clientTop; obj=obj.offsetParent; } return{left:ofL,top:ofT}; }
7、阻止事件传播
function offsetTL(obj){//获取元素内容距离浏览器边框的距离(含边框) var ofL=0,ofT=0; while(obj){ ofL+=obj.offsetLeft+obj.clientLeft; ofT+=obj.offsetTop+obj.clientTop; obj=obj.offsetParent; } return{left:ofL,top:ofT}; }
8、阻止默认事件
document.onclick=function(e){ var e=e||window.event; if (e.preventDefault) { e.preventDefault();//W3C标准 }else{ e.returnValue='false';//IE.. } }
9、EVENT中的target事件
document.onmouseover=function(e){ var e=e||window.event; var Target=e.target||e.srcElement;//获取target的兼容写法,后面的为IE var from=e.relatedTarget||e.formElement;//鼠标来的地方,同样后面的为IE... var to=e.relatedTarget||e.toElement;//鼠标去的地方 }
10、鼠标的滚动事件
//火狐中的滚轮事件 document.addEventListener("DOMMouseScroll",function(event){ alert(event.detail);//若前滚的话为 -3,后滚的话为 3 },false) //非火狐中的滚轮事件 document.onmousewheel=function(event){ alert(event.detail);//前滚:120,后滚:-120 }
阅读全文
0 0
- JS中浏览器兼容性问题
- js浏览器兼容性问题
- 浏览器兼容性问题-JS&DOM
- 浏览器兼容性问题-JS&DOM
- js浏览器兼容性问题
- 浏览器兼容性问题-JS&DOM
- JS浏览器兼容性问题
- 浏览器兼容性问题css+js
- js 浏览器兼容性问题
- JS浏览器兼容性问题
- js浏览器兼容性问题
- JS 浏览器兼容性问题汇总
- JS浏览器兼容性问题
- JS浏览器兼容性问题汇总
- CSS中浏览器兼容性问题
- js 在不同浏览器中一些常见的兼容性问题
- js 在不同浏览器中一些常见的兼容性问题
- 浏览器兼容性问题-JS&DOM(转)
- 这段时间一直在看马士兵老师的视频,收藏这篇关于学习java的文章
- PHP中 sprintf()格式化输出详解
- 《Spring设计思想》AOP设计基本原理
- Django 1.11 json接口编写以及测试
- ReactNative学习第二天
- JS中浏览器兼容性问题
- Android拍照适配方案
- SpringBoot 使用Scheduled 定时任务入门
- 计算机网络的物理层
- 集成Fabric的Crashlytics(崩溃统计)
- Struts防止表单重复提交
- Mysql常用30种SQL查询语句优化方法
- Mysql启动失败
- zxing实现二维码生成和解析