一、获取非行间样式
类似div.style.height
只能获取行内样式
div.offsetHeight
当前高度,包含内外边距及边框
获取非行间样式:
function getAttr(obj, attr) {
var style;
if(window.getComputedStyle) {
style = getComputedStyle(obj, false)[attr]; //主流浏览器
} else {
style = obj.currentStyle[attr]; //兼容IE
}
return style;
}
1.window.getComputedStyle(obj,false)[‘attr’]
这是BOM(浏览器window对象)提供的方法 ,所以可以直接写成getComputedStyle(nodeObj,false),省略前面的window对象,该方法有两个参数,第一个是要获取样式的节点对象;第二个可以写成任何的字符一般写成false或者null(兼容老版火狐),这里最好是用false因为用null IE9+会有问题;后面直接跟要获取的样式(写在方括号中)即可。这个方法的返回值为一个对象,为计算后的样式的属性值对的集合。比如要获取某个div宽度。那么可以直接写成 var style=getComputedStyle(div,false)[‘width’]; alert(style);
2.nodeObj.currentStyle[‘attr’];
node.currentStyle,该属性返回的也是是一个对象,也是计算后的样式的属性值对的集合。比如要获取某个div宽度。那么可以直接写成
var style=div.currentStyle['width'];
alert(style);
二、运动框架 startMove函数
<script>
function startMove(obj,json,fn){
clearInterval(obj.timer);
var flag=true;
obj.timer=setInterval(function(){
for(var attr in json){
var icur=0;
if(attr=='opacity'){
icur=Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
icur=parseInt(getStyle(obj,attr));
}
/*匀速
var speed=json[attr]>icur?10:-10;
*/
//变速
var speed=(json[attr]-icur)/5;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(icur!==json[attr]){
flag=false;
}else{
flag=true;
}
if(attr=='opacity'){
obj.style.filter='(opacity:'+(icur+speed)+')';
obj.style.opacity=(icur+speed)/100;
}else{
obj.style[attr]=icur+speed+'px';
console.log('1');
}
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},30);
}
function getStyle(obj,attr){
var style;
if(window.getComputedStyle){
style=getComputedStyle(obj,false)[attr];
}else{
style=obj.currentStyle[attr];
}
return style;
}
</script>
1.链式运动
<script>
window.onload=function(){
var oDiv1=document.getElementById("div1");
oDiv1.onmouseover=function(){
startMove(oDiv1,{"width":100},function(){
startMove(oDiv1,{"height":100},function(){
startMove(oDiv1,{"opacity":100});
});
});
};
}
</script>
2.同时运动
<script>
window.onload=function(){
var oDiv1=document.getElementById("div1");
oDiv1.onmouseover=function(){
startMove(oDiv1,{"width":100,"height":100,"opacity":100});
};
}
</script>