我们知道,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. demo的自动化测试框架设计

    [准备环境] pycharm [思路] Python+request+unittest+HTMLTestRunner 框架 框架的可读性需要强 公共方法提取 可变参数需要提取放入配置文件 做好日志记录 ...

  2. Beta冲刺<4/10>

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 Beta冲刺 这个作业的目标 Beta冲刺--第四天(05.22) 作业正文 如下 其他参考文献 ... B ...

  3. Tensorflow2 自定义数据集图片完成图片分类任务

    对于自定义数据集的图片任务,通用流程一般分为以下几个步骤: Load data Train-Val-Test Build model Transfer Learning 其中大部分精力会花在数据的准备 ...

  4. java面试必备知识点-上中下三篇写的很详细

    参考博客:写的还是相当的经典 http://www.cnblogs.com/absfree/p/5568849.html 上中下三篇写的很详细 http://blog.csdn.net/riverfl ...

  5. 入门大数据---Redis集群分布式学习

    Redis是什么? 官方介绍: Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间件. 它支持多种类型的数据结构,如 字符串(strings), 散列( ...

  6. msf stagers开发不完全指北(二)

    采用 Golang 开发stagers 上一篇文章 msf stagers开发不完全指北(一)中我们谈到如何采用 c 进行 msf 的 stagers 开发,这篇文章我们探讨一下如何使用 Golang ...

  7. AdminLTE 2.4

    https://jeesite.gitee.io/front/AdminLTE/2.4/index2.html

  8. 命令 关闭SElinux

    # sed -i 's/^SELINUX=.*$/SELINUX=disabled/g' /etc/selinux/config

  9. 【Oracle】arraysize的研究(存在疑问)

    arraysize的研究(存在疑问) SYS@proc> create table aaa (id1 int,id2 int,id3 int,id4 int); Table created. S ...

  10. matlab添加toolbox失败的解决办法

    matlab添加toolbox有三种方法: 1.在网上下载对应的文件,再复制到matlab安装路径中的toolbox文件夹里. 结果:失败.仍然显示不能用该模块. 2.由于笔者的学校有买正版,所以可以 ...