封装的一些原生js兼容性的写法

获取滚动条的滚动距离

function getScrollOffset(){
if(window.pageXOffset){
return {
x:window.pageXOffset,
y:window.pageYOffset
}
}else{
return {
x:document.body.scrollLeft + document.documentElement.scrollLeft,
y:document.body.scrollTop + document.documentElement.scrollTop
}
}
}

获取浏览器视口尺寸

function getViewportOffset(){
if(window.innerWidth){
return {
w : window.innerWidth,
h : window.innerHeight
}
}else{
if(document.compatMode === “BackCompat”){//怪异盒模型
return {
w : document.body.clientWidth,
h : document.body.clientHeight
}
}else{
return {
w : document.documentElement.clientWidth,
h : document.documentElement.clientHeight
}
}
}
}

获取样式的方法

function getStyle(elem,prop){
if(window.getComputedStyle){
return window.getComputedStyle(elem,null)[prop];
}else{
return elem.currentStyle[prop];
}
}

监听事件的兼容写法

function addEvent(elem,type,handle){
if(elem.addEventListener){
elem.addEventListener(type,handle,false)
}else if(elem.attachEvent){
//兼容ie
elem.attachEvent(‘on’+type,function(){
handle.call(elem)
})
}else{
elem[‘on’+type] = handle;
}
}

取消事件冒泡

function stopBubble(event){
if(event.stopPropagetion){
event.stopPropagetion();
}else{
event.cancelBubble = true
}
}

阻止默认事件

function cancelHandle(event){
if(event.preventDefault){
event.preventDefault()
}else{
event.returnValue = false;
}
}

异步加载文件并调用方法

通过class名和标签名获取css样式对象组
/
function getClassNames(classStr, tagName){
if (document.getElementsByClassName) {
return document.getElementsByClassName(classStr)
} else {
//为了兼容ie8及其以下版本的方法
var nodes = document.getElementsByTagName(tagName), ret = [];
for (i = 0; i < nodes.length; i++) {
if (hasClass(nodes[i], classStr)) {
ret.push(nodes[i]);
}
}
return ret;
}
}
/*
判断节点class存在性
*/
function hasClass(tagStr, classStr){
//这个正则表达式是因为class可以有多个,判断是否包含
var arr = tagStr.className.split(/\s+/);//等同于split(" ")
for ( var i = 0; i < arr.length; i++) {
if (arr[i] == classStr) {
return true;
}
}
return false;
}

在js中,之前我们获取属性大多用的都是ele.style.border这种形式的方法,但是这种方法是有局限性的,该方法只能获取到行内样式,获取不了外部的样式.所以呢下面我就教大家获取外部样式的方法,因为获取外部的样式存在兼容性的问题,所以后面我还会教大家解决兼容性的方法.

style:各大浏览器都兼容,能设置样式和获取样式,但是获取不了外部样式,如果写了行内没有的样式,返回的是空值

写法:ele.style.attr(这样为获取),ele.style.attr=“值”;

currentStyle属性和getComputedStyle属性不能设置属性,只能获取

currentStyle:该属性只兼容IE,不兼容火狐和谷歌

写法:ele.currentStyle[“attr”]或者ele.currentStyle.attr;

getComputedStyle:该属性是兼容火狐谷歌,不兼容IE

写法:window.getComputedStyle(ele,null)[attr]获取是window.getComputedStyle(ele,null).attr

下面我就贴上我的代码:

复制代码
var div=document.getElementsByTagName(“div”)[0];
if(div.currentStyle){
//IE上兼容
console.log(div.currentStyle[“width”]);
}
else{
//火狐谷歌上兼容
console.log(window.getComputedStyle(div,null)[“width”]);
}
复制代码
下面呢,我写了一个兼容性的方法,大家可以参考参考:

复制代码
var div=document.getElementsByTagName(“div”)[0];

    console.log(getStyle(div,"background-color"));
    function getStyle(ele,attr){
        if(window.getComputedStyle){
            return window.getComputedStyle(ele,null)[attr];
        }
        return ele.currentStyle[attr];
    }

封装的一些原生js兼容性的写法

猜你喜欢