引用大佬的文章 : https://blog.csdn.net/zfangls/article/details/53908063
javascript :
1.HTML对象获取问题
FireFox:document.getElementById(“idName”);
ie:document.idname或者document.getElementById(“idName”).
解决办法:统一使用document.getElementById(“idName”);
2.const问题
说明:Firefox下,可以使用const关键字或var关键字来定义常量;
IE下,只能使用var关键字来定义常量.
解决方法:统一使用var关键字来定义常量.
3.event.x与event.y问题
说明:IE下,event对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
解决方法:使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.
4.window.location.href问题
说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;
Firefox1.5.x下,只能使用window.location.
解决方法:使用window.location来代替window.location.href.
5.firefox与IE的父元素(parentElement)的区别
IE:obj.parentElement
firefox:obj.parentNode
解决方法: 因为firefox与IE都支持DOM,因此使用obj.parentNode是不错选择.
6.集合类对象问题
问题说明:IE下,可以使用 () 或 [] 获取集合类对象;Firefox下,只能使用 [ ]获取集合类对象。
解决方法:统一使用 [] 获取集合类对象。
7.自定义属性问题
问题说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute() 获取自定义属性;Firefox下,只能使用getAttribute() 获取自定义属性。
解决方法:统一通过getAttribute() 获取自定义属性。
8.input.type属性问题
问题说明:IE下input.type属性为只读;但是Firefox下input.type属性为读写。
解决办法:不修改input.type属性。如果必须要修改,可以先隐藏原来的input,然后在同样的位置再插入一个新的input元素。
9.event.srcElement问题
问题说明:IE下,even对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性。
解决方法:使用srcObj = event.srcElement ?event.srcElement : event.target;
10.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轴的坐标
}
.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支持
};
}
11.document.getElementsByClassName问题
window.onload = function() {
// 封装自己的类名
function getClass(classname)
{
//判断支持否
if(document.getElementsByClassName)
{
return document.getElementsByClassName(classname);
}
var arr = []; //用于返回 数组
var dom = document.getElementsByTagName("*");
for(var i=0;i<dom.length;i++) // 遍历所有的 盒子
{
var txtarr = dom[i].className.split(" "); // 分割类名 并且 转换为数组
// ["demo","test"];
for(var j=0;j<txtarr.length;j++) // 遍历 通过类名分割的数组
{
if(txtarr[j] == classname)
{
arr.push(dom[i]); // 我们要的是 div
}
}
}
return arr;
}
}
12.获取元素的非行间样式值:
function getStyle(obj,attr) { // 谁的属性
if(obj.currentStyle) // ie 等
{
return obj.currentStyle[attr]; // 返回传递过来的某个属性
}
else
{
return window.getComputedStyle(obj,null)[attr]; // w3c 浏览器
}
}
13.阻止事件传播:
<script>
var btn = document.getElementById("btn");
document.onclick = function() {
alert("点击了空白处")
}
btn.onclick = function(event) {
alert("点击了按钮")
var event = event || window.event;
if(event && event.stopPropagation)
{
event.stopPropagation(); // w3c 标准
}
else
{
event.cancelBubble = true; // ie 678 ie浏览器
}
}
</script>
14.js阻止默认事件
document.onclick=function(e){
var e=e||window.event;
if (e.preventDefault) {
e.preventDefault();//W3C标准
}else{
e.returnValue='false';//IE..
}
}
15.鼠标滚轮事件
//火狐中的滚轮事件
document.addEventListener("DOMMouseScroll",function(event){
alert(event.detail);//若前滚的话为 -3,后滚的话为 3
},false)
//非火狐中的滚轮事件
document.onmousewheel=function(event){
alert(event.detail);//前滚:120,后滚:-120
}
16.设置监听事件
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,传参的时候注意不要重复加了
};
}
IE中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
FireFox中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
Opera中:
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
没有定义W3C的标准,则
IE为:
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为:
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
Opera为:
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
<script>
function client() {
if(window.innerWidth != null) // ie9 + 最新浏览器
{
return {
width: window.innerWidth,
height: window.innerHeight
}
}
else if(document.compatMode === "CSS1Compat") // 标准浏览器
{
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
return { // 怪异浏览器
width: document.body.clientWidth,
height: document.body.clientHeight
}
}
document.write(client().width);