Javascript Dom元素信息

1.Dom元素的大小

属性	说明	调用者
offsetWidth，offsetHeight	返回元素的宽高(border+padding) ,整数	当前Dom元素
clientWidth，clientHeight	返回元素的宽高(padding) ,整数，不能是行内元素	当前Dom元素
getBoundingClientRect().width	返回元素的宽度(border+padding+width),精确到小数	当前Dom元素
getBoundingClientRect().height	返回元素的宽度(border+padding+height),精确到小数	当前Dom元素
scrollWidth/scrollHeight	这个属性只有当子元素大小超出父容器时才有意义。即：父元素被撑开的大小。	当前Dom元素
getComputedStyle(element).width	返回元素的宽度(不包含border+padding，带单位px)	window
getComputedStyle(element).hegiht	返回元素的高度(不包含border+padding，带单位px)	window

• 注意1：getComputedStyle(element)这个方法返回目标元素实际生效的样式对象，再通过属性名获取到具体的属性值（宽高带单位，可自行用parseInt()转换），行内元素返回 auto
• 注意2：元素的display不能为none，否则宽高为0
• 注意3：IE 8并不支持getComputedStyle这个特性。 IE 8 支持的是 element.currentStyle 这个属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
    </head>
    <style>
        *{padding: 0;margin: 0;}
        #box{
            width: 400px;
            height: 200px;
            padding: 10px;
            border:2px solid red;
        }
        #big{
            width: 600px;
            height: 300px;
            background-color: pink;
            color: #fff;
            text-align: center;
            font-size: 50px;
            line-height: 300px;
        }
    </style>
    <body>
        <div id="box">
            <div id="big">较大的子元素600 * 300</div>
        </div>
    </body>
</html>
<script>
    var box = document.querySelector('#box')

    // 元素总大小
    console.log(box.offsetWidth) // 424
    console.log(box.offsetHeight) // 224

    // 元素可见大小
    console.log(box.clientWidth) // 420
    console.log(box.clientHeight) // 220

    // 元素内容区大小
    console.log(getComputedStyle(box))//CSSStyleDeclaration{}
    var width = getComputedStyle(box).width
    var height = getComputedStyle(box).height
    console.log(width,height) // 400px 200px

    //下面的代码只能在IE8中运行
    //alert(box.currentStyle.width)//400px

    // 元素被撑开的大小（子元素的总大小）
    console.log(box.scrollWidth) //610
    console.log(box.scrollHeight) //310
</script>

当子元素的总大小小于父容器时：

2.Dom元素的位置信息

属性名	说明	调用者
offsetLeft	获取当前元素到父级定位元素左边的距离，注意，是父级定位元素(el.offsetParent)！！！	当前Dom元素
offsetTop	获取当前元素到父级定位元素顶部的距离，注意，是父级定位元素(el.offsetParent)！！！	当前Dom元素
scrollLeft	获取和设置当前元素被滚动条卷去的宽度	当前Dom元素
scrollTop	获取和设置当前元素被滚动条卷去的高度	当前Dom元素

注意：元素的display不能为none，否则距离为0

通过设置元素scrollLeft/scrollTop属性值的大小，可以让滚动条滚动到相应的位置。

注意：监听系统滚动条请使用window对象，设置系统滚动条要使用document.documentElement元素

<script>
    var box = document.querySelector('#box')
    // 让box元素回到顶部
    box.scrollTop = 0
    // 让box元素回到最左边
    box.scrollLeft = 0
    //系统滚动条
    window.onscroll = function (ev) {
        //操作系统的滚动条要使用document.documentElement元素
        console.log(document.documentElement.scrollTop)
    }
    //系统滚动条回到顶部
    document.documentElement.scrollTop = 0
</script>

3.获取屏幕大小

对象	说明	备注
window.screen.width	返回当前屏幕的宽度（设备独立像素）	值是静态的，大小取决于屏幕
window.screen.height	返回当前屏幕的高度（设备独立像素）	值是静态的，大小取决于屏幕
document.documentElement.clientWidth	返回当前页面根标签(html标签)的宽度	值取决于当前浏览器的窗口大小，会受浏览器的窗口缩放，工具栏之类的影响
document.documentElement.clientHeight	返回当前页面根标签(html标签)的高度	值取决于当前浏览器的窗口大小，会受浏览器的窗口缩放，工具栏之类的影响

<script>
    var screen_width = window.screen.width
    var screen_height = window.screen.height
    document.write('当前屏幕宽高为'+screen_width+'*' + screen_height)
    var html_width = document.documentElement.clientWidth
    var html_height = document.documentElement.clientHeight
    document.write('<br />'+'当前html标签宽高为'+html_width+'*' + html_height)
</script>

pc端表现1：14寸笔记本-浏览器全屏

当前屏幕宽高为1366*768
当前html标签宽高为1366*625

pc端表现2：14寸笔记本-浏览器窗口化（screen系列不受影响，而html元素变小）

当前屏幕宽高为1366*768
当前html标签宽高为767*604

移动端未设置viewport时（iphone6s plus）

当前屏幕宽高为414*736
当前html标签宽高为980*1472

移动端设置完美视口：浏览器工具栏会占据一部分空间，所以 html.clientHeight < screen.height

 <meta name="viewport" content="initial-scale=1.0">

当前屏幕宽高为414*736
当前html标签宽高为414*622