JavaScript，IE与非IE之间的差别（未完待续）

最新推荐文章于 2023-08-14 08:56:30 发布

原创最新推荐文章于 2023-08-14 08:56:30 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #IE #非IE #浏览器 #兼容性

javascript 同时被 2 个专栏收录

28 篇文章

订阅专栏

css

7 篇文章

订阅专栏

本文介绍了一种处理Internet Explorer（IE）浏览器与其他现代浏览器兼容性的方法。通过判断当前浏览器是否为IE，分别实现了float布局设置、计算元素样式、获取光标位置等功能，并展示了如何注册事件监听器及获取DOM加载完成状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var isIE = navigator.userAgent.toLowerCase().indexOf("msie") > -1 ? true : false;
var isIE9 = /msie\s+9/i.test(navigator.userAgent);

//1.float
if(isIE){
	document.getElementById("block").style.styleFloat = "right";
}else{
	document.getElementById("block").style.cssFloat = "right";
}

//2.计算出的样式
if(isIE){
	var currentStyle = document.getElementById("block").currentStyle.backgroundColor;
	console.log(currentStyle);
}else{
	var dom = document.getElementById("block");
	var currentStyle = document.defaultView.getComputedStyle(dom,null).backgroundColor;
	console.log(currentStyle);
}

//3.获取光标位置
if(isIE){
	var dom = document.getElementById("block");
	dom.onmouseover = function(event){
      if(isIE9){
				console.log(event.pageX);
				return;
			}
			event = event || window.event;
			console.log(event.clientX);
	}
}else{
	var dom = document.getElementById("block");
	dom.onmouseover = function(event){
		console.log(event.pageX);
	}
}

//4.获取视窗或浏览器窗口的尺寸
if(isIE){
	var browerSize = {};
	browerSize.screenX = document.documentElement.clientWidth;
	browerSize['screenY'] = document.documentElement.clientHeight;
	console.log(browerSize);
}else{
	var browerSize = {};
	browerSize.screenX = window.innerHeight;
	browerSize['screenY'] = window.innerWidth;
}

//5.注册事件
if(isIE){
	var elem = document.getElementById("hit");
	elem.attachEvent("onclick",function(event){
		event = event || window.event;
		//事件源
		console.log(event.srcElement);
		//事件传播
		event.cancelBubble = true;
		//阻止默认行为
		event.returnValue = false;
	});
}else{
	var elem = document.getElementById("hit");
	elem.addEventListener("click",function(event){
		//事件源
		console.log(event.target && event.srcElement);
		//事件传播
		event.stopPropagation();
		//阻止默认行为
		event.preventDefault();
	},false);
}

//6.获取对象层次中的父对象,IE:parentElement
var parent = function(elem){
  elem = document.getElementById(elem);
	return elem.parentElement && elem.parentNode;
}

//7.获取作为指定对象直接后代的 HTML 元素和TextNode对象的集合
var getChildren = function(elem){
	elem = document.getElementById(elem);
	return elem.childNodes && elem.children;
}

//8.DOM加载完毕
if(isIE){
	document.attachEvent("onreadystatechange",function(){
		console.log("IE DOM ready");
	})
}else{
	document.addEventListener("DOMContentLoaded",function(){
		console.log("Webkit DOM ready");
	},false);
}