84669 Lernen von Personen
152542 Lernen von Personen
20005 Lernen von Personen
5487 Lernen von Personen
7821 Lernen von Personen
359900 Lernen von Personen
3350 Lernen von Personen
180660 Lernen von Personen
48569 Lernen von Personen
18603 Lernen von Personen
40936 Lernen von Personen
1549 Lernen von Personen
1183 Lernen von Personen
32909 Lernen von Personen
今天看flexible.js的代码,发现获取宽度使用getBoundingClientRect而不是直接clientWidth,请问这两个方法获取宽度有什么区别吗?
document.documentElement.clientWidth document.documentElement.getBoundingClientRect().width;
欢迎选择我的课程,让我们一起见证您的进步~~
getBoundingClientRect().width获取到的其实是父级的右边距离浏览器原点(0,0)左边距离浏览器原点(0,0)的距离,即父级的宽度+2padding+2border。此时的clientWidth等于父级的宽度+2*padding,不包括边框的宽度。当不隐藏子级内容,即overflow为auto时,前者的宽度依然为这个数字,因为父级并没有改编盒模型。后者的宽度为上述得到的宽度-滚动条的宽度(17px);例子如下:
<p id="pParent" style="background-color: #aaa; padding:8px; border:solid 7px #000; height:200px; width:500px; overflow:hidden;"> <p id="pDisplay" style="background-color: #0f0; margin: 30px; padding: 10px; height: 400px; width: 600px; border: solid 3px #f00;"> </p> </p> <script> var pP = document.getElementById('pParent'); var pD = document.getElementById('pDisplay'); var clientWidth = pP.clientWidth; var getWidth = pP.getBoundingClientRect().width; pD.innerHTML += 'clientWidth: ' + clientWidth + '<br/>'; pD.innerHTML += 'getWidth: ' + getWidth + '<br/>'; </script>
我没看过flexible.js,只是从原生的js上给你点东西,希望对你有用!
getBoundingClientRect().width获取到的其实是父级的右边距离浏览器原点(0,0)左边距离浏览器原点(0,0)的距离,即父级的宽度+2padding+2border。
此时的clientWidth等于父级的宽度+2*padding,不包括边框的宽度。
当不隐藏子级内容,即overflow为auto时,前者的宽度依然为这个数字,因为父级并没有改编盒模型。后者的宽度为上述得到的宽度-滚动条的宽度(17px);例子如下:
我没看过flexible.js,只是从原生的js上给你点东西,希望对你有用!