js中三大家族和事件对象的三大坐标

最新推荐文章于 2022-03-10 14:06:43 发布

vision_seven7

最新推荐文章于 2022-03-10 14:06:43 发布

阅读量229

点赞数

分类专栏： js 前端

本文链接：https://blog.csdn.net/vision_seven7/article/details/105440974

版权

前端同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

12 篇文章 0 订阅

订阅专栏

三大家族和事件对象的三大坐标

三大家族

offset家族

offset作用和属性

作用：获取元素真实的位置或宽高
offset属性家族：offsetWidth offsetHeight offsetParent offsetLeft offsetTop

offsetParent

offsetParent ：获取元素最近的父级定位元素

如果元素自身是固定定位，那么获取到的定位父级为null

//css:
#box{
	width : 100px;
	height : 100px;
	background-color:pink;
	position:fixed
}
 .son{
    width: 200px;
    height: 200px;
    background-color: #ffc0cb;
        }

  .father{
      width: 300px;
      height: 300px;
      background-color: skyblue;
        }


//html
 <div class="father">
        <div class="son">
            <div id="box"></div>
        </div>
    </div>

//js
var box = document.getElementBy("box");
console.log(box.offsetParent); //null

如果元素自身不是固定定位(absolute relative) 那么就往上找父级定位，如果没有父级定位，那么找body

#box{
	width : 100px;
	height : 100px;
	background-color:pink;
	position: absolute;
}
//html 同上

//js
var box = document.getElementBy("box");
console.log(box.offsetParent);

body的定位父级为null

console.log(document.body.offsetParent); //null

offsetWidth/offsetHeight

offsetWidth ：返回元素的宽度，包括元素宽度、内边距和边框，但是不包括外边距
offsetHeight ：返回元素的高度，包括元素高度、内边距和边框，但是不包括外边距
offset获取元素的宽高的特点:

可以获取行内属性也可以获取行外属性
获取的属性值是number类型而且不带单位
获取到的是页面显示的元素的真是宽高（width/height + padding）

<div id="box" style="width:100px; height:100px; padding:10px;  border:10px solid pink;"></div>    
<script>
var box = document.getElementBy("box");

//10+10+100+10+10 = 140
console.log(box.offsetWidth);
console.log(box.offsetHeight);
</script>

offsetLeft/offsetTop

offsetLeft ：获取到的元素作为边框到定位父级（offsetParent）左内边框的距离
offsetTop ：获取到的元素上外边框到定位父级（offsetParent）上内边框的距离

<div id="father" style="padding: 10px;position: relative;background-color: pink;margin: 6px;border:10px solid black">
    <div id="box" style="width:100px; height:100px; margin:10px;background-color:yellowgreen;"></div>        
</div>

<script>
//获取元素
var father = document.getElementById("father");
var box = document.getElementById("box");

//20=box.marginTop(10) + father.paddingTop(10)
console.log(box.offsetTop);
//20=box.marginLeft(10) + father.paddingLeft(10)
console.log(box.offsetLeft);
</script>

offsetLeft 和 style.left 区别

最大区别在于offsetLeft 可以返回没有定位盒子的距离左侧的位置。而 style.left不可以。
offsetLeft返回的是数字，而style.left返回的是字符串，除了数字外还带有单位：px。
offsetTop 只读，而 style.top 可读写。（只读是获取值，可写是赋值）
如果没有给 HTML 元素指定过 top 样式，则style.top 返回的是空字符串。

scroll

scrollWidth/scrollHeight

element.scrollWidth：返回元素的整体宽度，包括由于溢出而无法展示在网页的不可见部分。
element.scrollHeight ：返回元素的整体高度，包括由于溢出而无法展示在网页的不可见部分。
没有溢出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        #father{
            width: 200px;
            height: 200px;
            background: pink;
            overflow: auto;
        }
        #children_div{
            width: 100px;
            height: 100px;
            background:yellowgreen;
            color: white;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="box">
            这是一个盒子
        </div>
    </div>
    <script>
    	 var father = document.getElementById("father");
		 var box = document.getElementById("box");

         console.log(box.scrollWidth, box.scrollHeight)
    </script>
</body>
</html>

打印的结果： 100 100 是小盒子的宽高
在这里插入图片描述

溢出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        #father{
            width: 200px;
            height: 200px;
            background: pink;
            overflow: auto;
        }
        #children_div{
            width: 250px;
            height: 250px;
            background:yellowgreen;
            color: white;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="box">
            这是一个盒子
        </div>
    </div>
    <script>
    	 var father = document.getElementById("father");
		 var box = document.getElementById("box");

         console.log(box.scrollWidth, box.scrollHeight)
    </script>
</body>
</html>

打印的结果： 250 250 是小盒子的宽高
在这里插入图片描述

scrollLeft/scrollTop

scrollLeft ：获取或者设置对象的最左边到对象在当前窗口显示的范围内的左边的距离，也就是元素被滚动条向左拉动的距离。
scrollTop ：可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边的距离，也就是元素滚动条被向下拉动的距离。
获取的属性值是number类型而且不带单位

<style>
        #box{
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            
            overflow: auto;
        }

        img{
            vertical-align: top;
            
        }
    </style>
</head>
<body>
    <div id="box">
        <img src="./image/QYQX.jpg" alt="">
    </div>

    <script>
        var box = document.getElementById("box")

        

        // 滚动条事件 ：onscroll
        box.onscroll = function(){
        
            console.log(box.scrollLeft);
            console.log(box.scrollTop);
        };
    </script>
</body>

拉动滚动条打印的结果：scrollLeft ：236；scrollTop：104
在这里插入图片描述

兼容性

谷歌、火狐浏览器
window.pageXOffset
IE8及以下版本
document.documentElement.scrollLeft
小众浏览器
document.body.scrollLeft

兼容写法

 //获取页面滚动出去的距离封装
  function getPageScroll(){
         // 逻辑与的短路运算的运算规则 ：找真
         // 如果这几种情况都不满足，那么久返回undefined 但是有的浏览器不支持undefined
         var left = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
         var top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
         // 函数返回值
         return {
               scrollLeft : left,
               scrollTop : top
          }
   }

client家族

clientWidth/clientHeight

clientWidth ：返回元素的宽度，包括元素宽度、内边距，但不包括边框和外边距。
clientHeight ：返回元素的高度，包括元素高度、内边距，但不包括边框和外边距。

```javascript
<style>
        #box{
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            
            overflow: auto;
        }

        img{
            vertical-align: top;
            
        }
    </style>
</head>
<body>
    <div id="box">
        <img src="./image/QYQX.jpg" alt="">
    </div>

    <script>
        var box = document.getElementById("box")

      	console.log(box.clientWidth,box.clientHeight);  //200,200

        console.log(box.clientLeft,box.clientTop); //实际获取到的是左边框和上边框 用的很少
    </script>
</body>

事件对象

概述

在触发DOM上的某个事件时，会产生一个事件对象event。这个对象中包含着所有与事件有关的信息。包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。
普通浏览器支持 event（带参，任意参数）
IE 678 支持 window.event（无参，内置）
总结：他是一个事件中的内置对象。内部装了很多关于鼠标和事件本身的信息。

事件对象的兼容方法

 <div id="box" style="width: 100px; height: 100px; background-color: pink;"></div>

  <script>
        var box = document.getElementById("box");
        box.onclick = function(e){
            e = e || window.event
            console.log(e);
            console.log("我是一个盒子");
        }
    </script>

事件对象的三大坐标

screenX scteenY ：表示的是从鼠标点击的点到屏幕左上角的距离

 <div id="box" style="width: 100px; height: 100px; background-color: pink;"></div>

  <script>
        var box = document.getElementById("box");
        box.onclick = function(e){
            e = e || window.event
            console.log(e);
            //console.log("我是一个盒子");
            console.log("screeX : " + e.screenX, "screenY : " + e.screenY);
        }
    </script>

在这里插入图片描述
clientX clientY ：表示的是从鼠标点击的点带可视区域左上角距离

 <div id="box" style="width: 100px; height: 100px; background-color: pink;"></div>

  <script>
        var box = document.getElementById("box");
        box.onclick = function(e){
            e = e || window.event
            console.log(e);
            //console.log("我是一个盒子");
           console.log("clientX : " + e.clientX, "clientY :" + e.clientY);
        }
    </script>

在这里插入图片描述

 // 获取页面可视区域的大小的兼容性
        function getClientSize(){
            var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0;
            var height = window.innerHeight || document.documentElement.clientHeight ||document.body.clientHeight || 0;

            return{
                clientWidth : width,
                clientHeight : height
            }
        }

pageX pageY ：表示的是从鼠标点击的点到页面左上角的距离（和页面滚动无关）
兼容性

//获取实践出发点到页面左上角的距离
function getPafePoint(e) {
    var x = e.pageX || getPageScroll().scrollLeft + e.clientX || 0;
    var y = e.pageY || getPageScroll().scrollTop + e.clientY || 0;

    return {
        PageX: x,
        PageY: y
    }
}

screenX、pageX 和 clientX 的区别
pageY/pageX: 鼠标位于整个网页页面的顶部和左侧部分的距离。（页面）
pcreenY/screenX: 鼠标位于屏幕的上方和左侧的距离。（屏幕）
clientX/clientY: 鼠标位于浏览器的左侧和顶部的距离。（浏览器大小和位置）

vision_seven7

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js中三大家族和事件对象的三大坐标

offic家族offset作用和属性offset作用和属性作用：获取元素真实的位置或宽高offset属性家族：offsetWidth offsetHeight offsetParent offsetLeft offsetTop
复制链接

扫一扫

专栏目录