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 ...
随机推荐
- 甜咸粽子党大战,Python爬取淘宝上的粽子数据并进行分析
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 爬虫 爬取淘宝数据,本次采用的方法是:Selenium控制Chrome浏览 ...
- ThinkPHP6 上传图片代码demo
本文展示了ThinkPHP6 上传图片代码demo, 代码亲测可用. HTML部分代码 <tr> <th class="font-size-sm" style=& ...
- 深入理解JVM(③)虚拟机的类加载时机
前言 Java虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型,这个过程被称为虚拟机的类加载机制. 类加载的时机 一个类型 ...
- 【JAVA8新的时间与日期 API】- 传统时间格式化的线程安全问题
Java8之前的日期和时间API,存在一些问题,最重要的就是线程安全的问题.这些问题都在Java8中的日期和时间API中得到了解决,而且Java8中的日期和时间API更加强大. 传统时间格式化的线程安 ...
- 入门大数据---Sqoop基本使用
一.Sqoop 基本命令 1. 查看所有命令 # sqoop help 2. 查看某条命令的具体使用方法 # sqoop help 命令名 二.Sqoop 与 MySQL 1. 查询MySQL所有数据 ...
- python从文件载入字典
data = np.load('dict_.npy') data = data.item() 不加最后一句,data不是字典类型
- vim 常用指令-持续更新
1. 查询文件夹file1内文件数量:ls file1 | wc -l 2. 生成文件夹file1内的文件列表:find file1 -type f > list.txt 3. git管理文件, ...
- DOM-BOM-EVENT(7)
7.事件深入 7.1.事件捕获 事件流分为事件冒泡和事件捕获两种,事件冒泡指事件从里往外传播,而事件捕获刚好相反,指事件从外向內传播 <!DOCTYPE html> <html la ...
- SqueezeNet/SqueezeNext简述 | 轻量级网络
SqueezeNet系列是比较早期且经典的轻量级网络,SqueezeNet使用Fire模块进行参数压缩,而SqueezeNext则在此基础上加入分离卷积进行改进.虽然SqueezeNet系列不如Mob ...
- 序列化和反序列化,请使用MessagePack
官网:https://msgpack.org/ 这个序列化的工具是今天看了dudu 的博客后去尝试使用的,果然差距很大. 对同样的对象进行序列化后,发现msgpack的大小仅有通常压缩工具Newton ...