[TOC] # 2.元素可视区client系列 client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列 的相关属性可以动态的得到该元素的边框大小、元素大小等。 | client系列属性 | 作用 | | --- | --- | | element.clientTop | 返回元素上边框的大小 | | element.clientLeft | 返回元素左边框的大小 | | element.clientWidth | 返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位 | | element.clientHeight | 返回自身包括padding、内容区的高度，不含边框，返回数值不带单位 |  # 案例:淘宝flexible.js源码分析  立即执行函数(function() {})() 或者(function(){} ()) 主要作用:创建一个独立的作用域。 ~~~ <script> //1.立刻执行函数: 不需要调用，立马能够自己执行的函数 functionfn() { console.log(1); } fn(); //2.写法 也可以传递参数进来 //(1).(function() {})() 或者(2).(function() {}()); (function(a, b) { console.log(a + b); })(1, 2); //第二个小括号可以看作是调用函数 // (function sum(a, b) { console.log(a + b); var num = 10; //局部变量 }(2, 3)); //3.立刻执行函数最大的作用域就是 独立创建了一个作用域，里面所有的变量都是局部变量 不会有命名冲突 </script> ~~~ # 07 flexible分析.js ~~~ 先执行代码 (function flexible(window, document) { //获取的html的根元素 var docEl = document.documentE lement // dpr物理像素比 var dpr = window.devicePixelRatio|l 1 // adjust body font size 设置我们body的字体大小 function setBodyFontsize() { //如果页面中有body 这个元素就设置body的字体大小 if (document.body) { document.body.style.fontSize = (12 * dpr) + ' px ' } else { //如果页面中没有body这个元素，则等着我们页面主要的DOM元素加载完毕再去设置body //的字体大小 document.addEventListener( ' DOMContentLoaded'，setBodyFontSize) } } setBodyFontSize(); // set 1rem = viewWidth / 10 设置我们html元素的文字大小 function setRemUnit() { var rem = docEl.clientWidth / 10 docEl.style.fontSize = rem + 'px' } setRemUnit() // reset rem unit on page resize 当我们页 面尺寸大小发生变化的时候，要重新设置下rem的大小window.addEventL istener( 'resize', setRemUnit) // pageshow 是我们重新加载页面触发的事件 (下面图有) window.addEventListener( ' pageshow', function(e) { // e. persisted 返回的是true就是说如果这个页面是从缓存取过来的页面，也需要从新计算一下rem的大小 if (e.persisted) { setRemUnit() } }) // detect 0.5px supports 有些移动端的浏览器不支持0.5像素的写法 if(dpr>=2){ var fakeBody = document.createElement( ' body' ) var testElement = document.createElement( ' div' ) testElement.style.border = ' . 5px solid transparent' fakeBody.appendChild(testElement ) docEl.appendChild(fakeBody ) if (testElement.offsetHeight === 1) { docE1.classList.add( 'hairlines') } docE1.removeChild(fakeBody ) } }(window, document)) ~~~