JS中的一些基础知识的浏览器兼容性写法

最新推荐文章于 2024-04-21 22:42:05 发布

目前是小白

最新推荐文章于 2024-04-21 22:42:05 发布

阅读量564

点赞数

分类专栏： JS相关问题

本文链接：https://blog.csdn.net/g_hold/article/details/81263216

版权

JS相关问题专栏收录该内容

13 篇文章 1 订阅

订阅专栏

1.兄弟节点

.nextElementSibling谷歌、火狐、IE9以上等其它浏览器认识的

.nextSibling是IE6，7，8认识的

var li = one.nextElementSibling || one.nextSibling;

2.scrollTop和scrollLeft

谷歌和没有声明<!DOCTYPE>的认识document.body.scrollTop

火狐和其他浏览器认识document.documentElement.scrollTop

IE9和最新浏览器认识window.pageYOffset

function scrollTop() {
		if(window.pageYOffset != null) {// IE9及以上和其它高版本的浏览器
			return {
				left:window.pageXOffset,
				top:window.pageYOffset
			}
		} else if(document.compatMode == "CSS1Compat") {
		// 检测是否是怪异模式的浏览器，怪异模式也就是没有声明<!DOCTYPE html>的，如果进入到该循环，说明是声明了<!DOCTYPE html>
			return {
				left:document.body.scrollLeft,
				top:document.body.scrollTop
			}
		}
		return {// 剩下的肯定是怪异模式
			left:document.documentElement.scrollLeft,
			top:document.documentElement.scrollTop
		}
	}

3.检测屏幕宽度（可视区）

IE9及以上版本：window.innerWidth

标准：document.documentElement.clientWidth

怪异模式（没有声明<!DOCTYPE>）：document.body.clientWidth

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
		}
	}

4.寻找点击事件的id值

IE6，7，8 event.srcElement.id

其它： event.target.id

event.target ? event.target.id : event.srcElement.id;

5.获得用户选择内容

标准浏览器：window.getSelection()

IE: document.selection.createRange().text;

目前是小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS中的一些基础知识的浏览器兼容性写法

1.兄弟节点 .nextElementSibling谷歌、火狐、IE9以上等其它浏览器认识的.nextSibling是IE6，7，8认识的var li = one.nextElementSibling || one.nextSibling;2.scrollTop和scrollLeft谷歌和没有声明&lt;!DOCTYPE&gt;的认识document.body.scrollT...
复制链接

扫一扫