/**
|
* Created by maggie on 16/9/23.
|
*/
|
|
//访问js下浏览器窗口的盒子模型属性
|
|
//这个方法有两种用法
|
//1.只传一个参数attr 则就是访问这个参数对应的属性值
|
//2.传2个参数,就是要修改attr属性值(不管你想修改哪个属性,
|
// 其实只能修改scrollTop和scrollLeft的值)
|
|
function win(attr,value) {
|
if(typeof value==="undefined")
|
{
|
//只有一个attr值,没有Value值意味着是要获得属性的值
|
|
var v= document.documentElement[attr]|| document.body[attr];
|
|
return v;
|
}
|
//设置
|
document.documentElement[attr]=value;
|
document.body[attr]=value;
|
|
}
|
|
//获得页面中任何一个元素的顶部边框距离body的顶部边框的距离
|
function offset(curElement) {
|
var totalLeft=0;//最终保存这个元素距离body边界的长度
|
var totalTop=0;
|
var parent=curElement.offsetParent;
|
|
totalLeft+=curElement.offsetLeft;
|
totalTop+=curElement.offsetTop;
|
while(parent)
|
{
|
//首先累加父级参照物的边框
|
totalLeft+=parent.clientLeft;
|
totalTop+=parent.clientTop;
|
|
totalLeft+=parent.offsetLeft;
|
totalTop+=parent.offsetTop;
|
parent=parent.offsetParent;
|
}
|
return {left:totalLeft,top:totalTop};
|
}
|
|
//获取某个元素的任意一个样式的值
|
function getCss(curEle,attr) {
|
var val=null,reg=null;
|
if(window.getComputedStyle)
|
// if("getComputedStyle" in window)
|
// if(typeof window.getComputedStyle ==="function")
|
// if(navigator.userAgent.indexOf("MS IE")===-1)
|
{
|
val=window.getComputedStyle(curEle,null)[attr];
|
}else
|
{
|
if(attr==="opacity")
|
{
|
val=curEle.currentStyle["filter"];
|
//progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
|
reg=/Alpha\(Opacity=(\d+(\.\d+)?)\)$/i;
|
val=reg.test(val)?reg.exec(val)[1]/100:1;
|
return val;
|
}else
|
{
|
val= curEle.currentStyle[attr];
|
}
|
}
|
//使用正则表达式测试属性值是不是数字+单位的形式
|
reg=/^(-?\d+(\.\d+)?)(px|pt|em|rem)?$/i;
|
val=reg.test(val)?parseFloat(val):val;
|
return val;
|
}
|
|
function setCss(curEle,attr,value) {
|
if(attr==="float")
|
{
|
curEle.style.cssFloat=value;
|
curEle.style.styleFloat=value;
|
return;
|
}
|
if(attr==="opacity")
|
{
|
curEle["style"]["opacity"]=value;
|
curEle["style"]["filter"]="Alpha(opacity="+value*100+")";
|
return;
|
}
|
//自动给数值的属性添加单位
|
// width height top bottom left right margin padding
|
//marginTop marginLeft marginRight marginBottom
|
//paddingTop ......
|
var reg=/^(width|height|top|bottom|left|right|((margin|padding)(Top|Left|Right|Bottom)?))$/;
|
if(reg.test(attr))
|
{
|
if(!isNaN(value))
|
{
|
value+="px";
|
}
|
}
|
curEle["style"][attr]=value;
|
|
}
|
|
//一次设置多个属性的方法
|
// setMultCss(box, {width:400px,height:300px,backgroud:#c1c1c1})
|
function setMultCss(curEle, attrObj) {
|
|
// attrObj = attrObj|| 0;
|
// if(attrObj.toString()!=="[object Object]")
|
// {
|
// return;
|
// }
|
|
for(var key in attrObj)
|
{
|
if(attrObj.hasOwnProperty(key))
|
{
|
setCss(curEle,key,attrObj[key]);
|
}
|
}
|
|
}
|
|
//2个参数时, curEle attr 获取attr属性的值
|
//
|
//3个参数时 curEle attr value 设置一个attr属性的值
|
// curEle obj 设置多个属性的值
|
|
function css(curEle)
|
{
|
var argTwo = arguments[1];
|
if(typeof argTwo ==="string")
|
{
|
//判断有没有第3个参数
|
var argThree=arguments[2];
|
if(typeof argThree==="undefined")
|
{
|
//是获取css属性
|
return getCss(curEle,argTwo);
|
}
|
//有第3个参数 那么就是调用setCss
|
setCss(curEle,argTwo,argThree);
|
return;
|
}
|
//是2个参数 并且第2个参数是obj类型 所以应该是设置多个css属性
|
argTwo = argTwo|| 0;
|
if(argTwo.toString()!=="[object Object]")
|
{
|
return;
|
}
|
setMultCss(curEle,argTwo);
|
}
|
