我们知道,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. Flask框架基础功能

    引言 本文简单汇总Flask框架几大基础功能,包括: 路由系统 模板 数据库 几种常用Flask库 一个简单的Flask事例 Flask是一个基于Python,依赖Jinja2模板和WSGI服务的框架 ...

  2. Windwos安装Redis

    下载地址:https://github.com/MicrosoftArchive/redis 进入后点击release,下方可看到下载地址,下载mis文件,双击即可安装

  3. Page "页面路径" has not been registered yet.

    网上找了很多方法,但和我遇到的都不一样,我这个页面是我路由接口更改时遇到的错误,原因是我移动了文件,js里引用的文件找不到了 解决方法:更改引用路径即可

  4. 你想不到的沙雕,10行代码Python实现GIF图倒放,每天的快乐源泉

    前言 GIF图现在已经融入了我们的日常网络生活,微信群.QQ群.朋友圈......一言不合就斗图,你怕了吗?不用担心,只要学会了Python之GIF倒放技能,你就是“斗图王”. 咱们直接开始本文的内容 ...

  5. OpenCV开发笔记(六十五):红胖子8分钟带你深入了解ORB特征点(图文并茂+浅显易懂+程序源码)

    若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/ar ...

  6. hashcode和==

    public class Main { public static void main(String[] args) { Object o=new Object(); System.out.print ...

  7. 题解 P5937 【[CEOI1999]Parity Game】

    这道题有两种做法,一种是 扩展域(种类并查集),一种是 边带权(带权并查集).种类并查集貌似应该都比带权并查集简单,所以先讲种类并查集的做法,再讲带权并查集 种类并查集 若 sum[ l ~ r ] ...

  8. vim中设置tab的长度

  9. docker 容器与本机文件的拷贝操作

    [把docker中容器时db002里面的my.cnf文件拷贝到根目录下] docker cp db002:/etc/mysql/my.cnf  ~/root/ [把根目录下my.cnf文件拷贝到doc ...

  10. css圣杯布局的实现方式

    css圣杯布局思路: 外面一个大div,里面三个小div(都是浮动).实现左右两栏宽度固定,中间宽度自适应.中间栏优先渲染. 资源网站大全 https://55wd.com 设计导航https://w ...