脚本化CSS - 封装getStyle(dom,attr)兼容性函数等

 1. 封装getStyle(dom,attr)兼容性函数
 
#box{
width:200px;
height:100px;
background-color: pink;
}

 

<div id="box"></div>


function getStyle(dom,attr){
if(dom.currentStyle){ //IE8以下 undefined -->flase
return dom.currentStyle[attr]
}else{ //IE8以上
return window.getComputedStyle(dom,null)[attr]
}
}
getStyle(oBox,'width')


 

2.封装getElementPosition函数,获取元素相对于文档(浏览器)的坐标

返回一个对象{x:水平距离，y:数值距离} 

 

<style>

*{
margin:0;
padding:0;
}
#big{
position:absolute;
left:30px;
top:50px;
/*margin-left:50px;*/
/*margin-top:20px;*/
/*padding-top:10px;*/
width:100px;
height:100px;
background-color: pink;
overflow:scroll;
}
#middle{
position:absolute;
left:30px;
top:30px;
margin-top:20px;
width:200px;
height:200px;
border-top:10px solid red;
border-left:30px solid red;
background-color: green;
}
</style>

 

<body>
<div id="box">gfdgf
<div id="mid">sd</div>
</div>

 

<script>
var oBox = document.getElementById('box') //获得标签
var omid = document.getElementById('mid') //获得标签
function getElementPosition(dom){
if(dom.offsetParent===document.body){
return {
x:dom.offsetLeft,
y:dom.offsetTop
}
}else{
return {
x:dom.offsetLeft+getElementPosition(dom.offsetParent).x,
y:dom.offsetTop+getElementPosition(dom.offsetParent).y


//获取dom到定位父级的水平/垂直距离+该级的爸爸到浏览器边缘的距离
//执行getElementPosition()这个函数是为了得到box,返回一个对象，用.获取该属性,递归
}
}
}
getElementPosition(omid)
</script>
</body>

 

 

3.封装getScrollOffset兼容性函数


/* 封装函数 函数执行后返回{x:水平滚动距离,y:竖直滚动距离}*/


//如果是谷歌IE8或以上,有数字记录着，那if就为真，走进循环
//当数值为0的时候，走不就if，会走else，但是谷歌会向下兼容
//若要当0时候走进谷歌，就加一个条件给他
function getScrollOffset(){
if(window.pageXOffset==0 || window.pageXOffset){
return {
x:window.pageXOffset,
y:window.pageYOffset
}
}else{ //如果是IE8以下
return {
x:document.documentElement.scrollLeft+document.body.scrollLeft,
y:document.documentElement.scrollTop+document.body.scrollTop
}
}
}
getScrollOffset()

 

 

4.封装getViewportOffset兼容性函数


 

/*函数执行后返回{w:浏览器宽度,h:浏览器高度}*/

function getViewportOffset(){
if(window.innerWidth){ //IE8以上
return {
w:window.innerWidth,
h:window.innerHeight
}
}else{ //IE8以下
if(document.compatMode=='BackCompat'){ //兼容模式
return{
w:document.body.clientWidth,
h:document.body.clientHeight
}
}else{ //标准模式
return{
w:document.documentElement.clientWidth,
h:document.documentElement.clientHeight
}
}
}
}
getViewportOffset()

 

 

 


 

posted @ 2019-07-02 18:34  小小oRa  阅读(267)  评论(0)    收藏  举报