继续学习《JavaScript高级程序设计》，体会原生 JavaScript 之美。今天记录2个有用的属性。 1.classList HTML5 对DOM操作 class 做了优化，增加了 classList 属性，从此再也不用对 className 做字符串操作了。它有4个方法 add // 增加一条属性（已经存在就不添加） contains // 判断属性是否存在 remove // 删除属性 toggle // 如果存在就删除，不存在就添加。这个好玩～ 2.readyState 曾几何时，使用 onload 方法来判断页面 …

《JavaScript高级程序设计》（第三版）中发现了一个问题，在P254中有这么一句 html === document.childNodes[0] 作者当时写书的时候，document.childNodes[0] 返回的是html元素，也就是说返回 true， 但我在读的时候试验了一下，发现是不对的。 在Chrome v63 及 Firfox v58.0 中document.childNodes[0]均不是html元素，而是 documentType。

在读《JavaScript高级程序设计》（第三版）中发现了document.implementation.hasFeature 方法，这个方法功能很强大，可以检测到浏览器是否支持某些功能。（P259） 于是我赶紧使用了一下，发现： document.implementation.hasFeature('Range',"40000000.0") 输出 true why MDN上说，这个方法已经废弃了。DOMImplementation.hasFeature() - Web APIs | MDN 所以不要用了。 …

最近做了一个小需求，需要判断网页是不是在微信内打开的，打印了一下微信浏览器的UA，写了一个简单的小函数。 function checkWechatBrowser () { var userAgent = navigator.userAgent.toLowerCase(); return (/MicroMessenger/ig).test(userAgent); }; 暂时可用。 PHP 版本 if( !preg_match('/micromessenger/i', …

最近做开发的时候用到了多次 margin: xx% 来做自适应的网页布局，但这个东西有时候出来的结果并不是自己所想的，于是去百度了一下这个百分比的计算基准，结果发现了一个比较好玩的点。 示例HTML <div class="boxer"> <div class="box"></div> </div> 示例CSS .boxer { width: 600px; height: 400px; background: red; } .box { …

前端开发中水平垂直居中是绕不开的坎，尤其是宽高不定的元素，之前听说过总总办法，由于自己懒，也没一一去试，今天就做一个总结。 PS：纯CSS实现，布局的问题不应试交给JavaScript(除非某些破不得已的情况)。 预期结果 HTML代码 <div class="panel"> <div class="box"></div> </div> Flex 方法 .panel { width: 600px; height: 400px; …

微信小程序开发中默认使用的 wxss 做为样式文件，这货对应成前端就是 CSS 文件，所以通常写 wxss 文件的时候会很痛苦。因为我已经完全放弃了小程序自带的编辑器（参考：wxapp.vim——使用Vim开发小程序利器），于是尝试在微信小程序开发中引入 Less 来自动编译 wxss。 思路 启用一个 gulp 任务，在文件更新的时候自动将 .less 文件编译成 .wxss 文件。 主要用到了 2 个 gulp 插件，gulp-less 和 gulp-rename。前者用来编译 Less 文件，后者用来将编译出来的 css …

小程序开发已经支持 web-view 的跳转，最近开发的一项功能正好APP与小程序均要使用，于是自然想到使用 web-view 的方式。场景是这样的： 用户打开APP/小程序，查看自己个人信息卡片，根据不同的 userid 返回不同的卡片样式。 H5实现 H5实现很简单，直接使用页面类似地址 https://xxx.com/xxx.html?userid=2345。 所以可以看出 2345 这个 userid 是需要我们动态传入的。 小程序实现 小程序中跳转 web-view 需要生成一个新的页面， …

最近要做一个将当前HTML页面生成图片的功能，网上百度了一圈，确定了如下的解决方案。 使用html2canvas将HTML DOM节点转换成canvas 使用canvas的toDataURL方法将canvas转换成base64 github: niklasvh/html2canvas 图片跨域 在前端开发中，HTML中的 img 标签是默认支持跨域的，但是这个规则canvas不认。使用html2canvs转换canvas的时候，如果使用了不同域的图片就会报错。 针对这种情况的解决方案如下: 第一步：给 img …