javascript : 写一个类似于 jquery css() 的方法
我们知道,jquery css() 方法可以很方便的更改DOM的样式。
但从原理上,这个并不复杂,我们完全可以自己写一个。
上代码。
updateDOMStyle(DOM, obj){
Object.keys(obj).forEach(function(key){
DOM["style"][key] = obj[key];
});
},
DOM是你想改的DOM元素,obj是样式对象。
使用。
use(width, height){
document.querySelector(".cornerstone-canvas").style.zIndex = 1
let HTML = document.createElement("canvas");
HTML.width = width,
HTML.height = height,
HTML.id = "id_painting"
document.querySelector(".image-canvas").style.position = "relative"
document.querySelector(".image-canvas").appendChild(HTML)
this.updateDOMStyle(HTML, {
'z-index':2,
'position':'absolute',
'left':0,
'top':0
})
},
其实没有这么复杂,获取元素,再使用方法就可以了。
javascript : 写一个类似于 jquery css() 的方法的更多相关文章
- 【JavaScript框架封装】实现一个类似于JQuery的基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架整体架构的搭建
/* * @Author: 我爱科技论坛 * @Time: 20180715 * @Desc: 实现一个类似于JQuery功能的框架 * V 1.0: 实现了基础框架.事件框架.CSS框架.属性框架. ...
- 【JavaScript框架封装】实现一个类似于JQuery的DOM框架的封装
// DOM框架(选择器框架) (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 向现 ...
- 分析一个类似于jquery的小框架
在网上下了一个类似于jQuery的小框架,分析源码,看看怎么写框架. 选择器Select //用沙箱闭包其整个代码,只有itcast和I暴漏在全局作用域 (function( window , und ...
- 怎么用JavaScript写一个区块链?
几乎所有语言都可以编写区块链开发程序.那么如何用JavaScript写一个区块链?以下我将要用JavaScript来创建1个简单的区块链来演示它们的内部到底是怎样工作的.我将会称作SavjeeCoin ...
- 封装一个类似jquery的ajax方法
//封装一个类似jquery的ajax方法,当传入参数,就可以发送ajax请求 //参数格式如下{ // type:"get"/"post", // dataT ...
- JavaScript写一个连连看的游戏
天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开 最终的效果 ...
- 用javascript写一个前端等待控件
前端等待控件有啥新奇的?什么jquery啦,第三方控件啦,好多好多,信手拈来. 因为项目使用了bootstrap的原因,不想轻易使用第三方,怕不兼容.自己写一个. 技术点包括动态加载CSS,javas ...
- 用JavaScript写一个区块链
几乎每个人都听说过像比特币和以太币这样的加密货币,但是只有极少数人懂得隐藏在它们背后的技术.在这篇博客中,我将会用JavaScript来创建一个简单的区块链来演示它们的内部究竟是如何工作的.我将会称之 ...
- 用javascript写一个emoji表情插件
概述 以我们写的这个emoji插件为例,网上已经有一些相关的插件了,但你总感觉有些部分的需求不能被满足(如:可以自行添加新的表情包而不用去改源代码等等) 详细 代码下载:http://www.demo ...
随机推荐
- WeChair项目Alpha冲刺(2/10)
团队项目进行情况 1.昨日进展 Alpha冲刺第二天 昨日进展: 前端完成小程序首页的html+css设计 后端springboot项目搭建完成 详情参见github 数据库也初步建成一些表格, ...
- elk3
视频来自: bootstrap.memory_lock要设置为true,默认使用物理内存 mini_mum_nodes:1表示es集群中最小的matser节点数目,默认就是1,当es集群数目较少的时候 ...
- JavaWeb网上图书商城完整项目--BaseServlet
1.以前进行操作的时候,例如我们进行登陆操作我们使用LoginServlet进行处理,进行注册操作我们使用RegisterServlet,很多业务的操作的时候我们就要定义很多个Servlet 有了Ba ...
- ant +jmeter+jenkins接口自动化测试二
[Jmeter篇]Jmeter+Ant+Jenkins接口自动化测试集成之半路逆转(二) 橙子探索测试发表于橙子探索测试订阅 72 [Jmeter篇]jmeter+Ant+Jenkins接口自动化测试 ...
- 学习oracle的SQL语句 练习
--1.查询emp表,显示薪水大于2000,且工作类别是MANAGER的雇员信息 select * from emp where sal > 2000and job = 'MANAGER'; - ...
- Python元类实战,通过元类实现数据库ORM框架
本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是Python专题的第19篇文章,我们一起来用元类实现一个简易的ORM数据库框架. 本文主要是受到了廖雪峰老师Python3入门教程的启 ...
- JavaScript中__proto__与prototype的关系(转)
一.所有构造器/函数的__proto__都指向Function.prototype,它是一个空函数(Empty function) 1 2 3 4 5 6 7 8 9 Number.__proto__ ...
- \\u4e00-\\u9fa5\
select * from stu where name regexp '[\\u4e00-\\u9fa5\·]{2,10}$'; 结果: name这个字段从后到前 2 到10个字符之内 如果有汉字 ...
- Qt-绘图
1 简介 参考视频:https://www.bilibili.com/video/BV1XW411x7NU?p=37 参考文档:<Qt教程.docx> 本文简单介绍Qt的绘图与绘图设备. ...
- P2882 Face The Right Way G 题解
题目 Farmer John has arranged his N \((1 ≤ N ≤ 5,000)\) cows in a row and many of them are facing forw ...