## 假设一个div样式如下
```html
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}

div {
width: 100px;
height: 100px;
background-color: red;
left: 0;
top: 0;
position: absolute;
opacity: 1;
}
</style>
</head>

<body>
<div></div>
<script src="./animation.js"></script>
<script>
var div = document.querySelector('div');
// animate(div, 'width', 500);
// animate(div, 'opacity', 50);
animate(div, {
width: 200,
left: 500,
opacity: 50
});
</script>
</body>

</html>
```

## 只针对于单个样式

```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样式的更多相关文章

  1. vue踩坑之路--点击按钮改变div样式

    有时候,我们在做项目的时候,想通过某个按钮来改变某个div样式,那么可以通过以下代码实现: <!DOCTYPE html> <html> <head> <me ...

  2. 【封装函数】当前元素距离html文档顶部距离

    function getPositionTop(node) { var top = node.offsetTop; var parent = node.offsetParent; while(pare ...

  3. 作品第一课----改变DIV样式属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 使用jQuery操作元素属性

    在jQuery中,提供了attr函数来操作元素属性,具体如下: 函数名 说明 例子 attr(name) 取得第一个匹配元素的属性值. $("input").attr(" ...

  5. dom操作------操作元素属性的若干方法

    // 1,通过HTMLElement类型的属性来获得和设置元素特性(设置的是元素属性,比如class,id,title,而不是css样式,比如float,border等)let div = docum ...

  6. jquery获取、改变元素属性值

    //标签的属性称作元素属性,在JS里对应的DOM对象的对应属性叫DOM属性.JS里的DOM属性名有时和原元素属性名不同. //==================================操作元 ...

  7. js数据类型的检测总结，附面试题--封装一个函数，输入任意，输出他的类型

    一.javascript 中有几种类型的值 1.基本数据类型 : 包括 Undefined.Null.Boolean.Number.String.Symbol (ES6 新增,表示独一无二的值) 特点 ...

  8. python装饰器中@wraps作用--修复被装饰后的函数名等属性的改变

    Python装饰器(decorator)在实现的时候,被装饰后的函数其实已经是另外一个函数了(函数名等函数属性会发生改变),为了不影响,Python的functools包中提供了一个叫wraps的de ...

  9. selenium用jquery改变元素属性

    一.jQuery 语法 jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作. 1.基础语法: $(selector).action() 选择符(selector)即," ...

随机推荐

  1. PostgreSQL的架构

    是最先进的数据库.他的第一个版本在1989年发布,从那时开始,他得到了很多扩展.根据db-enginers上的排名情况,PostgreSQL目前在数据库领域排名第四. 本篇博客,我们来讨论一下Post ...

  2. Python 编码转换与中文处理

    python 中的 unicode是让人很困惑.比较难以理解的问题. 这篇文章 写的比较好,utf-8是 unicode的一种实现方式,unicode.gbk.gb2312是编码字符集. py文件中的 ...

  3. vue 路由入门(vue-router)

    新建的 js 文件如下: import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) //全局使用该组件 / ...

  4. Python学习之for循环--输出1-100中的偶数和登录身份认证

    输出1-100中的偶数 效果图: 实现代码: for i in range(2,101,2): print(i,end = '\t') if(i == 34): print('\n') if (i = ...

  5. java普通for循环和for-each迭代循环的区别

    PO实体类User: package aA; public class User { private String name; private int many; private int id; pu ...

  6. Hadoop IO 特性详解（1）【数据完整性】

    本文结合hadoop : the definitive guide精心而作,包含作者的心血,希望可以帮助大家理解一点hdfs的皮毛,足矣.(charles@xingbod.cn) hadoop本身自带 ...

  7. Liferay 7：Liferay内部博客地址

    想要了解Liferay最新功能和特性,可以看一看. 非常实用,都是Liferay开发者写的: https://web.liferay.com/zh/community/blogs/all

  8. SSM-5zookeeper在LINUX上自启

    把zookeeper做成服务 1.进入到/etc/rc.d/init.d目录下,新建一个zookeeper脚本 [root@zookeeper ~]# cd /etc/rc.d/init.d/ [ro ...

  9. mac 安装svn

    别人说用Xcode装,我也不知道我这个是不是用Xcode装的 在命令行界面输入 sudo bash svn --version 会出现一大段介绍,关于xcode的,我也不懂,一只敲空格键到最后,然后输 ...

  10. zabbix自定义监控redis

    zabbix监控redis脚本 #!/bin/bash #此脚本用来获取redis-cli info信息 redis_cli="/usr/local/redis/bin/redis-cli& ...