原生js的兼容问题，原生各种距离问题

最新推荐文章于 2023-01-03 14:02:52 发布

小雨仔

最新推荐文章于 2023-01-03 14:02:52 发布

阅读量202

点赞数

文章标签：原生js的兼容问题原生各种距离问题

本文链接：https://blog.csdn.net/qq_45675879/article/details/102780996

版权

JS的兼容问题：

1.获取元素的问题上，
通用：
根据ID获取元素：getElementById();
根据标签名获取元素集合：getElementsByTagName();
根据选择器找到一个元素：querySelector();
根据选择器找到一个元素集合：querySelectorAll();
不兼容：
根据name值获取元素集合：getElementsByName();
根据类名获取元素集合：getElementsByClassName();

2.触发事件对象的兼容问题：
e.target ：在高级浏览器中表示触发事件的元素
e.srcElement：在IE浏览器中表示触发事件的元素
获取事件对象：

	var e = e || window.event;
	var t = e.target ||  e.srcElement;

3.事件对象的兼容问题：
clientX，offsetX没有兼容性问题，分别表示鼠标位于视口的距离和鼠标位于元素的距离；
pageX,pageY有兼容问题，IE中没有pageX，pageY，但是可以使用ClientX + scrollTop代替pageX

4.获取计算后样式的兼容问题：
高级浏览器：getComputedStyle(dom);
IE浏览器：dom.currentStyle;
利用能力检测（从对象身上访问属性，无论如何也不会报错，如果成功就是函数，如果失败就是underfined的特点）

	if(window.getComputedStyle){
		cssObj = getComptedStyle(box);
	}else{
		cssObj = box.currentStyle;
	}

5.DOM2级绑定事件和移除事件的方式：
绑定方式：元素.addEventListener(type,handler,boolean)
移除方式：元素.removeEventListener(type,handler,boolean);
IE8以下浏览器不支持addEventListener
IE8以下绑定元素：元素.attachEvent(type,handler);
IE8以下移除元素：元素.detachEvent(type,handler);

6.阻止事件冒泡的兼容问题：
高级浏览器中：e.stopPropagation();
IE浏览器中：e.cancelBubble = true;

document.onclick = function(e){
	var e = e || window.event;
	if(e.stopPropagation){
		e.stopParopagation();
	}else{
		e.cancelBubble = true;
	}
}

7.阻止浏览器默认行为的兼容问题：
只适用于DOM0级：return false;
e.returnValue = false；
通过事件对象addEventListener（使用于DOM2级阻止默认行为）：e.preventDefault();

8.获取元素节点的兼容问题：
具有兼容问题的节点获取方法：
firstChild，lastChild，perviousSibling,nextSibling

9.获取页面卷动值的兼容问题：
有些浏览器，比如火狐，认为这个值应该是HTML的值，所以要通过HTML获取，还有一些浏览器，比如早起的Chrome，认为这个值应该是body的属性，所以要通过body获取。

var scrollTop = document.body.scorllTop || document.docuementElement.scrollTop;

原生各种距离问题

以如下布局来显示各种距离

			<head>
					<meta charset="utf-8">
					<title></title>
					<style>
						*{margin:0;padding:0;}
						.box{
							position: absolute;
							top: 100px;
							left:200px;
							width: 200px;
							height: 100px;
							padding: 20px;
							background: red;
							border: 10px solid #ccc;
						}
					</style>
				</head>
				<body style="height: 5000px;">
					<div class="box" id="box"></div>
				</body>

clientWidth、clientHeight获取元素的宽度,高度,包括padding

	//padding + width 
	console.log(box.clientWidth); //240 
	//padding + height 
	console.log(box.clientHeight); //140

offsetWidth、offsetHeight获取元素的宽度,高度,包括padding + border

	//padding + border + width 
	console.log(box.offsetWidth); //260
	// padding + border + height
	console.log(box.offsetHeight); //160

clientLeft、clientTop获取边框的宽度,高度

	console.log(box.clientLeft);  //10
	console.log(box.clientTop);  //10

获取视口的尺寸(浏览器的可视区域的宽高,不包括滚动条的宽度)

	console.log(document.documentElement.clientWidth);//1349
	console.log(document.documentElement.clientHeight);

获取窗口的尺寸(浏览器窗口的宽高，这里的宽度包括滚动条的宽度)

	console.log(window.innerWidth); //1366
	console.log(window.innerHeight);

offsetLeft、offsetTop获取定位父元素的距离(这个距离都是从自己的边框外到定位父元素的边框内的距离)(IE8除外 IE8是到父元素的边框外)

	console.log(box.offsetLeft); //200
	console.log(box.offsetTop); //100

触发事件时候的距离

		box.onclick = function(e) {
				    var e = e || window.event;
					//这里面的位于视口的距离和位于页面的距离相同
				    //事件触发时,鼠标位于视口的距离
					console.log(event.clientX, event.clientY);
				      
					//事件触发时鼠标位于页面的距离
					//pageX/Y有兼容性问题,在IE中没有的话可以用clientX+scrollTop 代替
					console.log(e.pageX, e.pageY)
					
					//事件触发时,鼠标位于元素的距离(如果鼠标单击在边框上也会触发点击事件，但是这个值为负值)
					console.log(event.offsetX, event.offsetY);
				}

小雨仔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js的兼容问题，原生各种距离问题

JS的兼容问题：| 1.获取元素的问题上 | 2.触发事件对象的兼容问题 | 3.事件对象的兼容问题| 4.获取计算后样式的兼容问题 | 5.DOM2级绑定事件和移除事件的方式|| 7.阻止浏览器默认行为的兼容问题 | 8.获取元素节点的兼容问题|1.获取元素的问题上，通用：根据ID获取元素：getElementById();根据标签名获取元素集合：getElementsByTagN...
复制链接

扫一扫