javascript - getBoundingClientRect().width和clientWidth都能获取设备宽度,他们有什么区别吗?
天蓬老师
天蓬老师 2017-04-11 12:18:55
0
1
921

今天看flexible.js的代码,发现获取宽度使用getBoundingClientRect而不是直接clientWidth,请问这两个方法获取宽度有什么区别吗?

document.documentElement.clientWidth
document.documentElement.getBoundingClientRect().width;
天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全員に返信(1)
黄舟

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上给你点东西,希望对你有用!

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!