JavaScriptでclientHeightとoffset Height、scrollHeightの違い

3097 ワード

私達はJavaScriptを勉強する時、いつも各種の高度を獲得して、幅の問題に出会って、毎回使う時ネット上で探して、今日私はいくつかのjsの中の高度の幅の方法を整理してみんなにあげます.
1.lient Width/client Height

        /  ，                       /  
     padding

2.offset Height/offset Width

 IE6，IE7，IE8      FF, Chrome ，      offsetHeight = clientHeight +     +   。

3.scrollHeight/scrollwidth

scrollHeight    padding        。          ，        。
     ：scrollHeight = topPadding + bottomPadding +   margix box   。

Chromeで:
body:

clientHeight = body.padding + body.height（css       ）；
offsetHeight = body.clientHeight + body.border；
scrollHeight = body.padding +      ( height    )，     documentElement.clientHeight

documentElement:

clientHeight = window     –      。
offsetHeight = body.offsetHeight + body.margin;
scrollHeight =      （ body  height  ），     documentElement.offsetHeight

元素上:

offsetHeight = padding + border + height
clientHeight = padding + height - scrollbar.width
scrollHeight = padding+content   （        ）

スタイルコード:

構造コード:


    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    0000
    000000000000000000000000000000000

js:


    console.log(document.body.clientHeight) //1000
    console.log(document.body.clientWidth) //1000
    console.log(document.documentElement.clientHeight) //949
    console.log(document.documentElement.clientWidth) //1215
    console.log(document.body.offsetWidth) //1000
    console.log(document.body.offsetHeight) //1000
    console.log(document.documentElement.offsetHeight)  //1028
    console.log(document.documentElement.offsetWidth)   //1215
    console.log('div offsetWidth ：'+document.getElementsByTagName('div')[0].offsetWidth)  //242
    console.log('div offsetHeight ：'+document.getElementsByTagName('div')[0].offsetHeight) //242
    console.log('div clientWidth ：'+document.getElementsByTagName('div')[0].clientWidth)  //223
    console.log('div clientHeight ：'+document.getElementsByTagName('div')[0].clientHeight)  //240
    console.log('div scrollWidth ：'+document.getElementsByTagName('div')[0].scrollWidth)  //350
    console.log('div scrollHeight ：'+document.getElementsByTagName('div')[0].scrollHeight)  //334

2019年1月9日ES 6学習心得