封装函数通过输入(元素,属性,目标值)改变div样式

## 假设一个div样式如下
```html





Document






```

## 只针对于单个样式


```javascript
function getstyle(el, property) {
if (getComputedStyle) {
return getComputedStyle(el)[property]
} else {
return el.currentstyle[property];
}
}


function animate(el, properties) { //el:元素;properties{property:属性;target:目标};
clearInterval(el.timerId)
el.timerId = setInterval(function() {
for (var property in properties) {
var current;
var target = properties[property];
if (property === 'opacity') {
current = Math.round(parseFloat(getstyle(el, 'opacity')) * 100)
} else {
current = parseInt(getstyle(el, property))
}
var speed = (target - current) / 30;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (property === 'opacity') {
el.style.opacity = ((current + speed) / 100)
} else {
el.style[property] = (current + speed) + 'px';
}
}
}, 10)
}
```

## 针对多个样式
```javascript
function getstyle(el, property) {
if (getComputedStyle) {
return getComputedStyle(el)[property]
} else {
return el.currentstyle[property];
}
}


function animate(el, properties) { //el:元素;properties{property:属性;target:目标};
clearInterval(el.timerId)
el.timerId = setInterval(function() {
for (var property in properties) {
var current;
var target = properties[property];
if (property === 'opacity') {
current = Math.round(parseFloat(getstyle(el, 'opacity')) * 100)
} else {
current = parseInt(getstyle(el, property))
}
var speed = (target - current) / 30;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (property === 'opacity') {
el.style.opacity = ((current + speed) / 100)
} else {
el.style[property] = (current + speed) + 'px';
}
}
}, 10)
}
```

你可能感兴趣的:(封装函数通过输入(元素,属性,目标值)改变div样式)