codepen & js demos

Mutation Observer & customize resize event listener & demo

https://codepen.io/webgeeker/pen/YjrZgg

https://codepen.io/dashboard?type=search&opts_itemType=pen&opts_searchTerm=js&opts_order=newest&opts_depth=everything&opts_showForks=false&displayType=list&previewType=iframe&page=0

Mutation Observer

https://javascript.ruanyifeng.com/dom/mutationobserver.html

https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

// todo

resize & response width

https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event



const heightOutput = document.querySelector('#height');

const widthOutput = document.querySelector('#width');

function reportWindowSize() {

  heightOutput.textContent = window.innerHeight;

  widthOutput.textContent = window.innerWidth;

}

window.onresize = reportWindowSize;

// OR

window.addEventListener('resize', reportWindowSize);

https://codepen.io/xgqfrms/pen/dyyWrWb?&editable=true

&copyxgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

codepen & js demos的更多相关文章

  1. 使用zip.js压缩文件和解压文件

    zip.js官方网站为:https://stuk.github.io/jszip/ 在此说明,下面的例子基本上来自官方示例,大家可以做参考,官方示例地址为:https://stuk.github.io ...

  2. github上最全的资源教程-前端涉及的所有知识体系

    前面分享了前端入门资源汇总,今天分享下前端所有的知识体系. 个人站长对个人综合素质要求还是比较高的,要想打造多拉斯自媒体网站,不花点心血是很难成功的,学习前端是必不可少的一个环节, 当然你不一定要成为 ...

  3. 前端资料QQ群交流

    转:https://github.com/jsfront/src/blob/master/qq.md 这本来是我QQ群内部的一份公共约定的日常交流规则,后来得到大伙的一致认可,并用实际行动来捍卫它,使 ...

  4. 【JavaScript&jQuery】前端资源大全

    综合类 综合类 地址 前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.html 前端知识结构 https://github.com/Jackson ...

  5. JavaScript资源分享

    一. 资源教程: 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v2.2 En类资源汇总 免费的编程中文书籍索引 ...

  6. github上最全的资源教程-前端涉及的所有知识体系【转】

    github上最全的资源教程-前端涉及的所有知识体系[转自:蓝猫的博客] 综合类 综合类 地址 前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.h ...

  7. 终极教程【zhong】

    just for a better future! 资源教程               aiim                   综合类 前端知识体系 前端知识结构 Web前端开发大系概览 We ...

  8. 我们是怎么管理QQ群的

    文章背景:腾讯平台上的qq群数以千万百万计,但99%的在吹水扯蛋,从早上的问好开始,到晚上的晚安,无一不浪费青春之时间,看之痛心,无力改变,只好自己建了一个,希望能以此来改变群内交流的氛围或环境. 以 ...

  9. 关于阿里 阿里巴巴共享业务事业部UED团队 出品的sui基于zepto的开源UI框架的使用心得

    1.项目官网地址:http://m.sui.taobao.org/ 2.项目使用可以参考开始使用和示例 3.项目是放在 Github 上的 https://github.com/sdc-alibaba ...

随机推荐

  1. 【CS】知识索引汇总

    Chapter 7 hello.o -> hello (链接) 一.静态链接 主要是将符号对应起来 两个主要任务:符号解析(符号引用与符号定义的对应).重定位(符号定义与内存位置的对应) 1. ...

  2. 【转】odoo学习之：开发字段解析

    odoo新API中,字段类型不变,继承改变 1.旧的API定义模型: from openerp.osv import osv,fields class oldmodel(osv.osv): #模型名称 ...

  3. 【LG4609】[FJOI2016]建筑师

    [LG4609][FJOI2016]建筑师 题面 洛谷 题解 (图片来源于网络) 我们将每个柱子和他右边的省略号看作一个集合 则图中共有\(a+b-2\)个集合 而原来的元素中有\(n-1\)个(除去 ...

  4. [vijos1067]Warcraft III 守望者的烦恼

    就是上次考得fyfy.竟然是原题... // It is made by XZZ #include<cstdio> #include<algorithm> #include&l ...

  5. Maven学习(十一)-----使用Maven创建Web应用程序项目

    使用Maven创建Web应用程序项目 用到的技术/工具: Maven 3.3.3 Eclipse 4.3 JDK 8 Spring 4.1.1.RELEASED Tomcat 7 Logback 1. ...

  6. NLP的12条精髓

    NLP是神经语言程序学 (Neuro-Linguistic Programming) 的英文缩写.一.没有两个人是一样的 No two persons are the same. 1．没有两个人的人生 ...

  7. QT在子窗口外单击关闭子窗口

    网上查到了好多种方法,1.添加过滤器(eventFilter),2.重写鼠标单击事件,这两种方法都要判断鼠标单击位置是不是在子窗口上.而且在可编辑控件上如(下拉框.文本编辑框等),父窗口会直接传递到可 ...

  8. EXE模块说明

    EXE模块是fastCMS系统内非常优秀的一个功能模块,它将一些操作打包成可执行单元.它具有以下优势: 1)功能明确.便于维护. 2)发起端可获取EXE模块的执行结果. 3)对于不需要执行结果的请求, ...

  9. OA系统与Exchange 日历打通

    目前我碰到好几个案例是希望将客户以后的OA系统与Exchange中的日历系统相结合,比如致远或者泛微的OA系统. 客户的需求如下: 1.有了OA系统 2.客户使用Outlook当邮件客户端 3.客户希 ...

  10. Matplotlib外观和基本配置笔记

    title: matplotlib 外观和基本配置笔记 notebook: Python tags:matplotlib --- 参考资料,如何使用matplotlib绘制出数据图形,参考另一篇mat ...