三大系列offset,scroll,client

1,offset系列

通过style的方式获取属性值,只能获取在 标签中写的值(因为这个值没有单位)

 offset  系列:
 offsetWidth:获取元素的宽,没有单位
 offsetHeight:获取元素的高,没有单位
 offsetLeft:获取向左定位值

offsetTop:获取向上定位值

当父元素,子元素都没有脱离文档流时 offsetLef 为父盒子margin + 父padding + 父border + 子margin

当父盒子脱离文档流,这时子盒子无论脱不脱离文档流 offsetLeft的值只等于子盒子的margin

(当父子的父盒子脱离文档流,父盒子有margin 这时子盒子会继承margin)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>offSet值分析</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #boxF {
            width: 200px;
            height: 150px;
            background-color: red;
            position: relative;
            /*left: 100px;*/
            /*top: 50px;*/
            margin:100px;
        }

        #boxS {
            width: 100px;
            height: 50px;
            background-color: hotpink;
            position: absolute;
            margin: 60px;
            padding:50px;
            border: 1px solid black;
            left:50px;

        }

    </style>
</head>
<body>

<div id="boxF">
    <div id="boxS"></div>
</div>
<input type="button" value="按钮" id="btn">
<script src="public.js"></script>
<script>
    /*
    *
    *
    * 子元素和子元素都没有脱离文档流的时候
    * 子元素的offsetLeft 的值:
    * 父元素的margin + 父元素的padding + 父元素的border + 自己的margin
    *
    *
    *子元素脱离文档流时offSetLef的值:
    * 子元素的 left值 + 子元素margin (不会加padding  和 border)
    *
    *
    *
    * */
    my$("btn").onclick = function () {
        console.log(my$("boxS").offsetLeft);
    }
</script>
</body>
</html>

2,scroll系列

 offsetWidth:元素的宽(带边框)
 scrollWidth:元素中内容实际的宽度
scrollTop:元素向上卷曲出去的距离
 scrollLeft:元素向左卷曲出去的距离

//几种获取巻取值得方式

window.pageXOffset //ie8老版本不支持

document.documentElement.scrollLeft //ie支持

document.body.scrollLeft; //ie8支持

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scroll系列</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 300px;
            height: 200px;
            border: 1px solid red;
            overflow: auto;
        }
    </style>
</head>
<body>
<div id="dv">
    <P>p标签</P>
    <P>p标签</P>
    <P>p标签</P>
    <P>p标签</P>
    <P>p标签</P>
    <P>p标签</P>
    <P>p标签</P>
    <P>p标签</P>
    <P>p标签</P>
    <P>p标签</P>
    <P>p标签</P>
    <P>p标签</P>
    <P>p标签</P>
    <P>p标签</P>
    <P>p标签</P>
    <P>p标签</P>
    <P>p标签</P>
    <P>p标签</P>
    <P>p标签</P>
    <P>p标签</P>
    <P>p标签</P>
    <P>p标签</P>
    <P>p标签</P>
    <P>p标签</P>
    <P>p标签</P>
    <P>p标签</P>
    <P>p标签</P>
    <P>p标签</P>
    <P>p标签</P>
    <P>p标签</P>
    <P>p标签</P>
    <P>p标签</P>
    <P>p标签</P>
    <P>p标签</P>
    <P>p标签</P>
</div>
<input type="button" value="显示效果" id="btn">

<script src="public.js"></script>
<script>

    /*
    *
    *
    *
    * offsetWidth:元素的宽(带边框)
    *
    *
    * scrollWidth:元素中内容实际的宽度
    *
    *scrollTop:元素向上卷曲出去的距离
    * scrollLeft:元素向左卷曲出去的距离
    *
    *
    *
    *
    * */
    my$('btn').onclick = function(){
        // console.log(my$('dv').offsetWidth);//获取的是?  302  div的宽加边框
        // console.log(my$('dv').scrollWidth);// 300  元素中内容的宽度
        // console.log(my$('dv').scrollHeight);// 764  元素中内容的宽度
        console.log(my$('dv').scrollTop);
   }
</script>
</body>
</html>

//获取元素

document.body //获取body中的内容不包括head

document.documentElement//获取的是所有内容包括head

docuemnt.title 获得title文本对象

3,client系列

可是区域

clientWidth:可是区域的宽,不包括边框,是内部的宽高

clientHeight:可是区域的高,不包括边框,是边框的内部

clientLeft:左边框的宽度

clientTop上边框的宽度

clientX:可视区域的横坐标

client:可视区域的纵坐标