codepen & js demos
codepen & js demos
Mutation Observer & customize resize event listener & demo
https://codepen.io/webgeeker/pen/YjrZgg
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
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
codepen & js demos的更多相关文章
- 使用zip.js压缩文件和解压文件
zip.js官方网站为:https://stuk.github.io/jszip/ 在此说明,下面的例子基本上来自官方示例,大家可以做参考,官方示例地址为:https://stuk.github.io ...
- github上最全的资源教程-前端涉及的所有知识体系
前面分享了前端入门资源汇总,今天分享下前端所有的知识体系. 个人站长对个人综合素质要求还是比较高的,要想打造多拉斯自媒体网站,不花点心血是很难成功的,学习前端是必不可少的一个环节, 当然你不一定要成为 ...
- 前端资料QQ群交流
转:https://github.com/jsfront/src/blob/master/qq.md 这本来是我QQ群内部的一份公共约定的日常交流规则,后来得到大伙的一致认可,并用实际行动来捍卫它,使 ...
- 【JavaScript&jQuery】前端资源大全
综合类 综合类 地址 前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.html 前端知识结构 https://github.com/Jackson ...
- JavaScript资源分享
一. 资源教程: 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v2.2 En类资源汇总 免费的编程中文书籍索引 ...
- github上最全的资源教程-前端涉及的所有知识体系【转】
github上最全的资源教程-前端涉及的所有知识体系[转自:蓝猫的博客] 综合类 综合类 地址 前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.h ...
- 终极教程【zhong】
just for a better future! 资源教程 aiim 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 We ...
- 我们是怎么管理QQ群的
文章背景:腾讯平台上的qq群数以千万百万计,但99%的在吹水扯蛋,从早上的问好开始,到晚上的晚安,无一不浪费青春之时间,看之痛心,无力改变,只好自己建了一个,希望能以此来改变群内交流的氛围或环境. 以 ...
- 关于阿里 阿里巴巴共享业务事业部UED团队 出品的sui基于zepto的开源UI框架的使用心得
1.项目官网地址:http://m.sui.taobao.org/ 2.项目使用可以参考开始使用和示例 3.项目是放在 Github 上的 https://github.com/sdc-alibaba ...
随机推荐
- # 20155224 2016-2017-2《Java程序设计》课程总结
20155224 2016-2017-2<Java程序设计>课程总结 每周作业链接汇总 预备作业1:我所期望的师生关系 预备作业2:我的技能与C语言学习 预备作业3:Linux的初步学习, ...
- 20155310 2016-2017-2 《Java程序设计》第九周学习总结
20155310 2016-2017-2 <Java程序设计>第九周学习总结 教材学习内容总结 JDBC入门 •数据库本身是个独立运行的应用程序 •撰写应用程序是利用通信协议对数据库进行指 ...
- 20155319 实验二 Java面向对象程序设计
20155319 实验二 Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设计模式 (一) ...
- 20155330 实验四 Android程序设计
20155330 实验四 Android程序设计 实验内容 1.基于Android Studio开发简单的Android应用并部署测试; 2.了解Android.组件.布局管理器的使用: 3.掌握An ...
- WPF之路-键盘与鼠标事件 - 简书
原文:WPF之路-键盘与鼠标事件 - 简书 键盘事件 事件类型分为以下几个类型 生命周期事件:在元素加载与卸载的时候发生 鼠标事件:鼠标动作 键盘事件:键盘动作 手写笔事件:适用于win7以上的系统 ...
- BZOJ2140_稳定婚姻_KEY
题目传送门 暴力直接对于每个点跑一遍二分图匹配,能拿四十分. 然而我们考虑正解. 对于一对Couple我们建♂->♀的一条边,对于一对曾经有恋情的情侣我们建♀->♂的一条边. 跑Tarja ...
- HBase第一章 安装 HMaster 主备
1.集群环境 Hadoop HA 集群规划 hadoop1 cluster1 nameNode HMaster hadoop2 cluster1 nameNodeStandby ZooKeeper ...
- DataTable保存与读取 stream
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
- IDEA 破解图文教程 - 2018.9 更
你好!这里是你要找的 IDEA 破解方法 目录 一.前言 二.IDEA 安装 2.1 下载IDEA 旗舰版 2.2 开始安装 2.3 自定 ...
- MySQL高性能优化实战总结
1.1 前言 MySQL对于很多Linux从业者而言,是一个非常棘手的问题,多数情况都是因为对数据库出现问题的情况和处理思路不清晰.在进行MySQL的优化之前必须要了解的就是MySQL的查询过程,很多 ...