I G U P
web爱好者
Copyright©2018 by igup

js语句中的兼容性写法集合(持续更新)

1: getElementsByClassName(),的兼容性写法:

function getElementsByClassName(node,classname){
if(node.getElementsByClassName){
return node.getElementsByClassName(classname);
} else {
var results=new Array();                                               //创建一个数组,来存放class 的属性值
var elems=node.getElementsByTagName(“*”);      //选择所有的dom,用下面的for来遍历
for(var i = 0; i<elems.length; i++){                         //循环遍历所有的dom
if(elems[i].className.indexOf(classname) != -1){      //先通过elems[i].className筛选出有class属性值的dom,然后通过.indexOf来判断当前class属性值是否存在于 筛选值中
results[results.length]=elems[i];                         //将符合条件的class属性值,存于空数组中
}
}
return results;                      //将符合条件的class数组返回
}
}

使用:getElementsByClassName(document,”classname”)

改进之后:(将document加入进去,并且if判断句中用的===的写法)
function getElementsByClassName(classname){
if(document.getElementsByClassName){
return document.getElementsByClassName(classname);
} else {
var results=new Array();                                                    //创建一个数组,来存放class 的属性值
var elems=document.getElementsByTagName(“*”);   //选择所有的dom
for(var i = 0; i<elems.length; i++){                                //循环遍历所有的dom
if(elems[i].className === classname){                            //先通过elems[i].className筛选出有class属性值的dom,然后通过===符号来匹配class的属性值
results[results.length]=elems[i];                                      //将符合条件的class属性值,存于空数组中
}
}
return results;                                                                    //返会这个储存数组
}
}

   使用:getElementsByClassName(“classname”)

 

2:获取当前浏览器内容可视窗口的宽度,高度(短路原理)

var w=window.innerWidth
           || document.documentElement.clientWidth
           || document.body.clientWidth;
var h=window.innerHeight
           || document.documentElement.clientHeight
           || document.body.clientHeight;

//      window.onresize : 当窗口大小发生改变的时候触发,窗口大小改变事件

3:获取浏览器滚动条位置(短路原理)

var scrollY=window.pageYOffset
                    ||document.documentElement.scrollTop;

var scrollX=window.pageXOffset
                    ||document.documentElement.scrollLeft;

//      window.onscroll : 当滚动条滚动的时候触发,滚动事件

 

 

 

 

 

 

2018-05-28
文章归档:

说点什么

  Subscribe  
提醒