jsvascript学习（九）- offwet家族和常用事件属性

2018-12-31 本文已影响0人 MA木易YA

OFFSET

offset这个属性，英文翻译过来就是偏移量，也即是元素相当于父元素的偏移量，常用于定位以及缓动动画等地方。

offset大致包括offsetTop、offsetLeft、offsetWidth、offsetHeight、offsetParent五个部分，直白的翻译过来分别是上偏移、左偏移、偏移宽度、偏移高度、偏移父级。

offsetTop: 元素相对第一个有定位的父元素上方的偏移。（父盒子必须有定位，如果没有最终以body为准）
offsetLeft：元素相对第一个有定位的父元素左边的偏移。（父盒子必须有定位，如果没有最终以body为准）
offsetWidth：自身包括padding 、边框、内容区的宽度。(width + border + padding)
offsetHeight：自身包括padding、边框、内容去的高度。(height + border + padding)
offsetParent：作为偏移参照点的父级元素,返回当前对象的父级(带有定位)的盒子，可能是父亲或者爷爷，没有定位则取body，都有定位则就近取，区别与parentNode。

offsetHeight/offsettWidth = 内容 + 内边距 + 边框, 这对兄弟获得的是数值，直接style.left获得的是字符串且必须在行内设置属性才能获取到（仅包含内容区域）

(I) offsetWidth/offsetHeight

content + border + padding)

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #box{
            width: 200px;
            height: 150px;
            background-color: red;
            padding: 10px;
            border: 5px solid #ddd;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="box" style="width: 100px;height: 100px;"></div>

<script>
    var box = document.getElementById("box");
    // offsetHeight  = 内容 + 内边距 + 边框
    console.log("haha");
    console.log( box.offsetWidth, box.offsetHeight);  //230, 180
    console.log( box.style.width, box.style.height);//100px, 100px
</script>
</body>

(II) offsetLeft/offsetTop

父盒子必须有定位，如果没有最终以body为准）

father为父级盒子(有定位)

<style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #father{
            width: 400px;
            height: 400px;
            background-color: red;
            margin: 40px;

            position: relative;
        }

        #box{
            width: 200px;
            height: 150px;
            background-color: blue;
            padding: 10px;
            border: 5px solid #000;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="box"></div>
    </div>

<script>
    var box = document.getElementById("box");
    console.log(box.offsetLeft);    //20
    console.log(box.offsetTop);     //0
</script>
</body>

father没有定位，相对于最外层的body

<style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #father{
            width: 400px;
            height: 400px;
            background-color: red;
            margin: 40px;

            /*position: relative;*/
        }

        #box{
            width: 200px;
            height: 150px;
            background-color: blue;
            padding: 10px;
            border: 5px solid #000;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="box"></div>
    </div>

<script>
    var box = document.getElementById("box");
    console.log(box.offsetLeft);    //60
    console.log(box.offsetTop);     //40
</script>

(III) offsetParent

返回当前对象的父级(带有定位)的盒子区别与parentNode。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="yeye" style="position: relative;">
        <div id="father" >
            <div id="son"></div>
        </div>
    </div>

<script>
    var son = document.getElementById("son");
    console.log(son.offsetParent);  //<div id="yeye" style="position: relative;">
    console.log(son.parentNode);    //<div id="father" >
</script>
</body>
</html>

(IV) offsetXXX和style.XXX的区别

用offsetLeft和style.left来分析，其他以此类推：
a) style.left只能获取行内的，而offsetLeft则可以获取到所有的；
b) offsetLeft 可以返回没有定位盒子距离左侧的位置；而style.left不可以，其只能返回有定位盒子的left;
c) offsetLeft是只读的，而style.left是可读写；
d) 如果没有给当前元素指定过 top 样式，则 style.top 返回的是空字符串。
e) offsetLeft 返回的是数字，而 style.left 返回的是字符串，除了数字外还带有单位：px;
- 注意：可以用parseInt进行转化；比如：styleLeft='300px' ---> parseInt(styleLft) ---> 300

事件对象

在此之前我们接触了很多比如鼠标点击、移入移出等等事件，只要触发DOM上的某个事件时，就会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。考虑兼容性的话可以采取以下写法：

var event = event || window.event;

event常见属性

属性	用途	语法
clientX	返回鼠标在窗口客户区域中的X坐标	event.clientX
clientY	返回鼠标在窗口客户区域中的Y坐标	event.clientY
screenX	检测鼠标相对于用户屏幕的水平位置(只读属性)	event.screenX
screenY	检测鼠标相对于用户屏幕的垂直位置(只读属性)	event.screenY
type	返回事件名(返回没有“on”作为前缀的事件名,比如,onclick事件返回的type是click )	event.type
target	该事件被传送到的对象	event.target
pageX	光标相对于该网页的水平位置(不适用于IE)	event.pageX
pageY	光标相对于该网页的垂直位置(不适用于IE)	event.pageY
width	窗口或框架的宽度	event.width
height	窗口或框架的高度	event.height
data	返回拖拽对象的URL字符串	event.data

总结

网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth(包括边线宽);
网页可见区域高： document.body.offsetHeight(包括边线高);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;

因为这一节涉及很多关于定位上的属性方法，难免混淆，我们在下一节就page、screen和client再做一个整理

参考：
网易云js课程

jsvascript学习（九）- offwet家族和常用事件属性

OFFSET

(I) offsetWidth/offsetHeight

(II) offsetLeft/offsetTop

(III) offsetParent

事件对象

event常见属性

总结

猜你喜欢

热点阅读