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. 数据结构与算法之数组（1）——in dart

    import 'dart:math' show Random; List<int> _array; final _rnd = Random(); final _capacity = 100 ...

  2. 2014年第五届蓝桥杯B组(C/C++)预赛题目及个人答案(欢迎指正)

    参考:https://blog.csdn.net/qq_30076791/article/details/50573512 第3题: #include<bits/stdc++.h> usi ...

  3. Oracle入门第六天（上）——用户控制

    一.概述 权限的分类: 系统权限: 对于数据库的权限 对象权限: 操作数据库对象的权限 基本上,权限的控制和之前介绍的管理控制台是相通的,所以基本可以大概将此节看作图形化操作的SQL语句操作版本 二. ...

  4. SSM-CRUD入门项目——修改与PUT请求

    修改 分析: 点击编辑,弹出用户修改的模态框,    模态框中显示用户的信息,    点击更新完成修改! 第一步先复制添加员工的模态框进行修改调整,完成修改员工的模态框的创建:(当然,相应的生成员工数 ...

  5. LVS入门篇（一）之ARP协议

    1.概念 地址解析协议,即ARP(AddressResolutionProtocol),是根据IP地址获取物理MAC地址的一个TCP/IP协议.主机发送信息时将包含目标IP地址的ARP请求广播到网络上 ...

  6. char和String 在jsp java代码中与jstl代码中的区别

    在 jsp java代码中 '0' ,这种代表char 在jstl中 '0' 会被解释为 String  所以也可以用  .equals  方法

  7. 3.5星|《算法霸权》：AI、算法、大数据在美国的阴暗面

    算法霸权 作者在华尔街对冲基金德绍集团担任过金融工程师,后来去银行做过风险分析,再后来去做旅游网站的用户分析.后来辞职专门揭露美国社会生活背后的各种算法的阴暗面. 书中提到的算法的技术缺陷,我归纳为两 ...

  8. Spring学习（3）：Spring架构（转载）

    1. Spring架构图 核心容器:包括Core.Beans.Context.EL模块. ●Core模块:封装了框架依赖的最底层部分,包括资源访问.类型转换及一些常用工具类. ●Beans模块:提供了 ...

  9. day02——作业讲解

    # 设定⼀个理想数字⽐如:66,让⽤户输⼊数字,如果⽐66⼤,则显示猜测# 的结果⼤了:如果⽐66⼩,则显示猜测的结果⼩了;只有等于66,显示猜测结果# 正确,然后退出循环 #升级版# 可以帮我们生成 ...

  10. Redis 总结精讲 看一篇成高手系统4

    本文围绕以下几点进行阐述 1.为什么使用redis2.使用redis有什么缺点3.单线程的redis为什么这么快4.redis的数据类型,以及每种数据类型的使用场景5.redis的过期策略以及内存淘汰 ...