封装函数通过输入(元素，属性，目标值)改变div样式
## 假设一个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样式的更多相关文章
- vue踩坑之路--点击按钮改变div样式
有时候,我们在做项目的时候,想通过某个按钮来改变某个div样式,那么可以通过以下代码实现: <!DOCTYPE html> <html> <head> <me ...
- 【封装函数】当前元素距离html文档顶部距离
function getPositionTop(node) { var top = node.offsetTop; var parent = node.offsetParent; while(pare ...
- 作品第一课----改变DIV样式属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用jQuery操作元素属性
在jQuery中,提供了attr函数来操作元素属性,具体如下: 函数名 说明 例子 attr(name) 取得第一个匹配元素的属性值. $("input").attr(" ...
- dom操作------操作元素属性的若干方法
// 1,通过HTMLElement类型的属性来获得和设置元素特性(设置的是元素属性,比如class,id,title,而不是css样式,比如float,border等)let div = docum ...
- jquery获取、改变元素属性值
//标签的属性称作元素属性,在JS里对应的DOM对象的对应属性叫DOM属性.JS里的DOM属性名有时和原元素属性名不同. //==================================操作元 ...
- js数据类型的检测总结，附面试题--封装一个函数，输入任意，输出他的类型
一.javascript 中有几种类型的值 1.基本数据类型 : 包括 Undefined.Null.Boolean.Number.String.Symbol (ES6 新增,表示独一无二的值) 特点 ...
- python装饰器中@wraps作用--修复被装饰后的函数名等属性的改变
Python装饰器(decorator)在实现的时候,被装饰后的函数其实已经是另外一个函数了(函数名等函数属性会发生改变),为了不影响,Python的functools包中提供了一个叫wraps的de ...
- selenium用jquery改变元素属性
一.jQuery 语法 jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作. 1.基础语法: $(selector).action() 选择符(selector)即," ...
随机推荐
- [转]Windows钩子
Windows钩子 Windows应用程序的运行模式是基于消息驱动的,任何线程只要注册了窗口类就会有一个消息队列来接收用户的输入消息和系统消息.为了取得特定线程接收或发送的消息,就要 Windows提 ...
- [HEOI2016/TJOI2016]排序 线段树+二分
[HEOI2016/TJOI2016]排序 内存限制:256 MiB 时间限制:6000 ms 标准输入输出 题目类型:传统 评测方式:文本比较 题目描述 在2016年,佳媛姐姐喜欢上了数字序列.因而 ...
- php缓存技术有哪些（总结）
php缓存技术有哪些(总结) 一.总结 一句话总结: 静态页面:全页面静态化缓存,页面部分缓存(将页面中不常变动的部分进行静态化缓存), 数据缓存:比如我的每轮的题目数据,商店,寻宝数据等 数据库:查 ...
- 机器学习入门:K-近邻算法
机器学习入门:K-近邻算法 先来一个简单的例子,我们如何来区分动作类电影与爱情类电影呢?动作片中存在很多的打斗镜头,爱情片中可能更多的是亲吻镜头,所以我们姑且通过这两种镜头的数量来预测这部电影的主题. ...
- valueStack(值栈)
值栈 值栈(ValueStack)就是 OGNL 表达式存取数据的地方.在一个值栈中,封装了一次请求所需要的所有数据. 在使用 Struts2 的项目中,Struts2 会为每个请求创建一个新的值栈, ...
- Luogu P2051 [AHOI2009]中国象棋(dp)
P2051 [AHOI2009]中国象棋 题面 题目描述 这次小可可想解决的难题和中国象棋有关,在一个 \(N\) 行 \(M\) 列的棋盘上,让你放若干个炮(可以是 \(0\) 个),使得没有一个炮 ...
- lc287 Game of Live
lc287 Game of Live 难点在于不能使用额外的空间. 观察到数组中每一个元素要么为1要么为0,32位int只用了一位,可以利用bit操作,将第二次state存储到int变量的倒数第二位中 ...
- dl, dt, dd /line-height /loat /vertical-align 问题
刚刚在看张鑫旭大神的个人网站,看到一篇关于“css瓶颈”的深度好文,地址为:http://www.zhangxinxu.com/wordpress/?p=2523 关于张大神在文章里面提到的四个问题: ...
- bzoj 1029 [JSOI2007]建筑抢修——贪心（伪dp）
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1029 当然要按结束时间排序,然后按顺序修或跳过.就是那种“……不会使答案不优”的证明. 想了 ...
- Css 进阶学习
以下样式,表示css对第一个li标签无效,第一个以后的样式有效. .nav-pills>li+li { margin-left: 2px } <ul class="nav-pil ...