封装函数通过输入(元素，属性，目标值)改变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)即," ...
随机推荐
- exit()和return语句的区别
(1)exit用于结束正在运行的程序,exit函数将参数是返回给OS.而return是返回函数值并退出函数. (2)return是语言级别的,它表示了调用堆栈的返回:而exit是系统调用级别的,它表示 ...
- 掌握ES6/ES2015核心内容
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. ...
- Linux中如何安装mysql数据库
安装mysql 1.解压源码压缩包 如果服务器可以上网也可以采用在线安装方式,在线安装操作简单具体见下面在线安装步骤 进入源码压缩包所在目录输入#tar -zxvf mysql-5.6.17-linu ...
- 2019-4-17-从-dotnet-core-3.0-的特性让-WPF-布局失效讨论-API-兼容
title author date CreateTime categories 从 dotnet core 3.0 的特性让 WPF 布局失效讨论 API 兼容 lindexi 2019-4-17 1 ...
- vue开发中控制台报错问题
1.sockjs.js?9be2:1606 GET http://localhost:8566/sockjs-node/info?t=1569478261510 net::ERR_CONNECTION ...
- TZOJ 5962 Happy Matt Friends(计数DP)
描述 Matt hzs N friends. They are playing a game together. Each of Matt’s friends has a magic number. ...
- Leetcode147. Insertion Sort List对链表进行插入排序
对链表进行插入排序. 从第一个元素开始,该链表可以被认为已经部分排序(用黑色表示). 每次迭代时,从输入数据中移除一个元素(用红色表示),并原地将其插入到已排好序的链表中. 插入排序算法: 插入排序是 ...
- PyCharm软件代码配色和字体设置
配置效果图: 1.字体设置: 2.tab键设置: 3.代码颜色配置: 注释颜色为: 类名称: 函数: 关键字: 关键字参数: 函数参数: 字符串:
- textarea标签中多出的空格
//这么写才能被正确渲染 <textarea></textarea> //这样就会有空格 <textarea> </textarea> 不能换行,涨姿势
- ES6学习笔记之Symbol
新的数据类型Symbol 1. 概述 ES5 的对象属性名都是字符串,这容易造成属性名的冲突.比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与 ...