封装函数通过输入(元素，属性，目标值)改变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)即," ...
随机推荐
- Odoo 新 API 概述
__all__ = [ 'Environment', 'Meta', 'guess', 'noguess', 'model', 'multi', 'one', 'cr', 'cr_context', ...
- 19-10-16-R
其实……这篇是真咕了. 反思: ××我$T1$两个小时构造$xiebi$了(虽然我觉得如果干仨小时可能行?) ……如果$T1$用时过长的话那考试多半不行…… 结果: 35 Miemeng 50 03: ...
- 第一个SpringBoot插件-捕获请求并且支持重新发起
SpringBoot 插件入门 简介 公司用的是SpringBoot,api框架用的是swagger-ui,确实用的不错,但是在使用过程中发现一个问题,就是当前端正式调用的时候,如果参数一多的话模拟请 ...
- python初学小记
使用PyCharm向世界打招呼! print (“Hello world!”) 介绍自己的基本信息的方法 name = input("name:")age = int(input( ...
- JMETER远程运行_多机联合负载
JMETER远程运行_多机联合负载 远程运行是用一台JMeter控制机控制远程的多台机器来产生负载.控制机与负载机之间通过RMI方式来完成通信.在负载机上运行Agent程序(启动命令是%JMETER_ ...
- Vuejs实战项目步骤一
1.使用vue初始化项目 vue create msm-demo #创建项目 npm run serve #部署 2.更改public文件夹下面的index文件,只留下 <div id=&quo ...
- 百度地图JavaScript API申请密钥注意要点
1.应用类型:浏览器端 2.启用服务:Javascript API要勾选 3.IP白名单:*即可
- .NET2.0引用.NET3.5的System.Core.dll&Dapper在.NET2.0下的配置
微软MSDN对.NET2.0,3.0,3.5的描述: .NET Framework 版本 2.0.3.0 和 3.5 是使用同一 CLR 版本 (CLR 2.0) 生成的. 这些版本表示单个安装的连续 ...
- MySQL系列(一)--基础知识（转载）
安装就不说了,网上多得是,我的MySQL是8.0版本,可以参考:CentOS7安装MySQL8.0图文教程和MySQL8.0本地访问设置为远程访问权限 我的MySQL安装在阿里云上面,阿里云向外暴露端 ...
- Django项目：CRM(客户关系管理系统)--55--46PerfectCRM实现登陆后页面才能访问
#urls.py """PerfectCRM URL Configuration The `urlpatterns` list routes URLs to views. ...