获取非行内样式(仅作了解)

语法:

    window.getComputedStyle(元素).要查询的CSS属性名

IE 的语法:

    元素.currentStyle.要查询的CSS属性名      (了解)

1.获取元素偏移量

样式代码

    <style>
    * {
        padding: 0;
        margin: 0;
    }
    .box1 {
        width: 400px;
        height: 400px;
        background-color: pink;
        position: relative;
        top: 20px;
        left: 20px;
    }
    .box2 {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        position: absolute;
        left: 100px;
        top: 200px;
    }
</style>

body代码

    <div class="box1">
        <div class="box2"></div>
</div>

获取元素在页面上相对参考父级的左边和上边的距离

参考父级:

其实就是假设 你要给一个元素 '绝对定位', 他是根据谁来进行定位, 那么这个元素的偏移量参考父级就是谁

0. 获取元素

    var box2 = document.querySelector('.box2')

1. 元素.offsetParent 获取元素的相对父级

    console.log(box2.offsetParent)

2. 元素.offsetLeft 获取元素距离左边的距离

    console.log('offsetLeft', box2.offsetLeft)
    

3. 元素.offsetTop 获取元素距离顶部的距离

    console.log('offsetTop', box2.offsetTop)

2.获取元素尺寸

样式代码

    <style>
    * {
        padding: 0;
        margin: 0;
    }

    div {
        width: 500px;
        height: 6000px;
        background-color: pink;
        padding: 50px;
        border: 10px solid black;
        margin: 50px;
    }
</style>

0. 获取元素

    var oDiv = document.querySelector('div')

获取元素尺寸 (元素的占地面积) 语法1:

    元素.offsetWidth 
    元素.offsetHeight

1. offsetXXX

    console.log('oDiv.offsetWidth', oDiv.offsetWidth)
    console.log('oDiv.offsetHeight', oDiv.offsetHeight)
   
    console.log('手动分割线
   

语法2:

    元素.clientWidth
    元素.clientHeight

2. clientXXX

    console.log('oDiv.clientWidht', oDiv.clientWidth)
    console.log('oDiv.clientHeight', oDiv.clientHeight)

区别:

offsetXXX -> 实际的宽度/高度 + padding + border clientXXX -> 实际的宽度/高度 + padding

3.获取浏览器窗口尺寸

1. window.innerXXX -> 计算的时候 会包含浏览器的滚动条

2. document.documentElement.clientXXX -> 计算的时候 不会计算滚动条 (只计算浏览器的可视区域)

    console.log('document', document.documentElement.clientHeight)
    console.log('document', document.documentElement.clientWidth)