我们知道,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() 的方法的更多相关文章

  1. 【JavaScript框架封装】实现一个类似于JQuery的基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架整体架构的搭建

    /* * @Author: 我爱科技论坛 * @Time: 20180715 * @Desc: 实现一个类似于JQuery功能的框架 * V 1.0: 实现了基础框架.事件框架.CSS框架.属性框架. ...

  2. 【JavaScript框架封装】实现一个类似于JQuery的DOM框架的封装

    // DOM框架(选择器框架) (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 向现 ...

  3. 分析一个类似于jquery的小框架

    在网上下了一个类似于jQuery的小框架,分析源码,看看怎么写框架. 选择器Select //用沙箱闭包其整个代码,只有itcast和I暴漏在全局作用域 (function( window , und ...

  4. 怎么用JavaScript写一个区块链?

    几乎所有语言都可以编写区块链开发程序.那么如何用JavaScript写一个区块链?以下我将要用JavaScript来创建1个简单的区块链来演示它们的内部到底是怎样工作的.我将会称作SavjeeCoin ...

  5. 封装一个类似jquery的ajax方法

    //封装一个类似jquery的ajax方法,当传入参数,就可以发送ajax请求 //参数格式如下{ // type:"get"/"post", // dataT ...

  6. JavaScript写一个连连看的游戏

    天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开 最终的效果 ...

  7. 用javascript写一个前端等待控件

    前端等待控件有啥新奇的?什么jquery啦,第三方控件啦,好多好多,信手拈来. 因为项目使用了bootstrap的原因,不想轻易使用第三方,怕不兼容.自己写一个. 技术点包括动态加载CSS,javas ...

  8. 用JavaScript写一个区块链

    几乎每个人都听说过像比特币和以太币这样的加密货币,但是只有极少数人懂得隐藏在它们背后的技术.在这篇博客中,我将会用JavaScript来创建一个简单的区块链来演示它们的内部究竟是如何工作的.我将会称之 ...

  9. 用javascript写一个emoji表情插件

    概述 以我们写的这个emoji插件为例,网上已经有一些相关的插件了,但你总感觉有些部分的需求不能被满足(如:可以自行添加新的表情包而不用去改源代码等等) 详细 代码下载:http://www.demo ...

随机推荐

  1. Domain Adaptive Faster R-CNN:经典域自适应目标检测算法,解决现实中痛点,代码开源 | CVPR2018

    论文从理论的角度出发,对目标检测的域自适应问题进行了深入的研究,基于H-divergence的对抗训练提出了DA Faster R-CNN,从图片级和实例级两种角度进行域对齐,并且加入一致性正则化来学 ...

  2. 计算机网络之HTTPS协议

    • HTTPS协议是以安全为目的的HTTP通道,比单纯的HTTP协议更安全,相当于HTTP的升级版.• HTTPS的安全基础为SSL,就是在HTTP下加入SSL层,意思是HTTPS通过安全传输机制进行 ...

  3. js语法基础入门(5.2)

    5.2.循环结构 当一段代码被重复调用多次的时候,可以用循环结构来实现,就像第一个实例中出现的场景一样,需要重复询问对方是否有空,这样就可以使用循环结构来搞定 5.2.1.for循环语句 //语法结构 ...

  4. JavaScript基础-自己定义自己的函数(016)

    把一个函数对象赋值给变量后,就可以通过这个变量再次定义函数,甚至可以在一个函数内部再次定义它自己: var scareMe = function () { alert("Boo!" ...

  5. IndentationError: unindent does not match any outer indentation level解决策略

    [亲测有效]Nodepad++/Sublime Text3中Python脚本运行出现语法错误:IndentationError: unindent does not match any outer i ...

  6. 断路器Hystrix(Feign)

    上一篇中我们讲了 断路器Hystrix(Ribbon) 本章讲解Feign+Hystrix已经Request请求传递,各种奇淫技巧…. - Hystrix Hystrix支持回退概念:当 断路器 打开 ...

  7. Flutter vs React Native vs Native:深度性能比较

    老孟导读:这是老孟翻译的付费文章,文章所有权归原作者所有. 欢迎加入老孟Flutter交流群,每周翻译2-3篇付费文章,精彩不容错过. 原文地址:https://medium.com/swlh/flu ...

  8. 数据解析_bs进行数据解析

    1.bs4进行数据解析 数据解析的原理 1.标签定位 2.提取标签,标签属性中存储的数据值 bs4数据解析的原理 1.实例化一个BeautifulSoup对象,并且将页面源码数据加载到该对象中 2.通 ...

  9. 【Oracle】如何让一个用户能够访问另外一个用户下所有的表

    根据需求的不同,也分为好几种方法,且看下文. 先构造基本的环境:创建两个用户AA,BB,基本需求为用户AA能够访问用户BB下所有的表,即用户AA有对BB下所有的表有"select on&qu ...

  10. 小书MybatisPlus第1篇-整合SpringBoot快速开始增删改查

    Mybatis Plus官方文档已经很完善了,为什么还要写一个这样的文档? 官方文档注重知识结构的整理,没有注重学习者的学习顺序 官方文档中的案例注重API描述,比较适合学会mybatis plus之 ...