javascript基础：偏移量（offset）和 client 常用属性以及实例

本来聊一下偏移量offset.

offset常用属性

offset翻译过来就是偏移量，使用offset系列相关属性可以动态得到该元素的位置偏移，大小等信息。

获得元素距离带定位父元素的位置
获得元素自身的大小也就是宽度和高度
最重要一点那就是其返回的值不但有单位，比如元素的某属性是100px得到的值是100.

常用的属性有：

属性	描述
offsetParent	返回该元素带有定位父级元素，如果父级元素没有定位返回body
parentNode	就是直接父级（标签结构中的父子关系）
offsetTop	返回元素相对带有定位父亲元素上方的偏移
offsetLeft	返回元素相对带有定位父亲元素左边的偏移
offsetWidth	返回自身包括padding，边框，内容区的宽度，返回数不带单位
offsetHeight	返回自身包括padding，边框，内容区的高度，返回数不带单位

演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试网页</title>
    <style>
        [class^='box']{
      
      
            margin-top: 50px;
            margin-left: 50px;
            width: 200px;
            height: 200px;
            background-color: #4a90e2;
            /*防止盒子塌陷 ，如果忘了可以翻看一下前面写的css三大核心值盒子模型*/
            overflow: hidden;
        }
        .box2{
      
      
            position: relative;
        }
        [class^='son']{
      
      

            width: 100px;
            height: 100px;
            margin: 50px;
            background-color: #55a532;
        }



    </style>
</head>
<body>
<div class="box1">
    <div class="son1"></div>
</div>
<hr>
<div class="box2">
    <div class="son2"></div>
</div>

<script>
    var ele_son1=document.getElementsByClassName("son1")[0];
    var ele_son2=document.getElementsByClassName("son2")[0];
    ele_son1.addEventListener('click',function () {
      
      
        var  offset_parent=ele_son1.offsetParent;
        var offset_top=ele_son1.offsetTop;
        var offset_left=ele_son1.offsetLeft;
        var offset_width=ele_son1.offsetWidth;
        var offset_height=ele_son1.offsetHeight;
        console.log('=========ele_son1============')
        console.log(' offset_parent=',offset_parent);
        console.log(' offset_top=',offset_top);
        console.log(' offset_left=',offset_left);
        console.log('offset_width=',offset_width);
        console.log('offset_height=',offset_height);


    })
    ele_son2.addEventListener('click',function () {
      
      
        var  offset_parent=ele_son2.offsetParent;
        var offset_top=ele_son2.offsetTop;
        var offset_left=ele_son2.offsetLeft;
        var offset_width=ele_son2.offsetWidth;
        var offset_height=ele_son2.offsetHeight;
            console.log('=========ele_son2============')
        console.log(' offset_parent=',offset_parent);
        console.log(' offset_top=',offset_top);
        console.log(' offset_left=',offset_left);
        console.log('offset_width=',offset_width);
        console.log('offset_height=',offset_height);
    })

</script>
</body>
</html>

在这里插入图片描述

既然都可以得到宽度，这个又有一个问题了

offsetWidth （offsetHeight）和style.width(style.Height)的区别

毕竟两个都可以得到元素的宽度和高度，但是具体又有什么区别？先说区别，然后演示，这样会更加容易知道。

	offset	style
获得样式值条件	任意样式表中的样式值	只能式行内样式表中的样式值
是否有单位	没有单位的数值	带有单位的字符串
读写属性	只读属性，不能赋值，就算运行不报错也没有效果	可读写属性
大小范围	包含元素的全部宽度或高度，举例：返回宽度值=padding+border+内容宽度	只是得到内容宽度或高度。举例：返回值=内容宽度

所以获得元素大小位置适合用offset，如果想要修改元素就需要用style进行赋值。

演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试网页</title>
    <style>
        .box1{
      
      
            margin-top: 50px;
            margin-left: 50px;
            width: 200px;
            height: 200px;
            background-color: #4a90e2;
            padding: 20px;
            border: 1px solid black;
        }




    </style>
</head>
<body>
<div class="box1">

</div>
<hr>
<div class="box2"  style="margin-top: 50px;margin-left: 50px;width: 200px; height: 200px;background-color: #4a90e2;padding: 20px; border: 1px solid black;">

</div>

<script>
    var ele_box1=document.getElementsByClassName("box1")[0];
    console.log(" box1内部样式表offset    ",ele_box1.offsetWidth);
    console.log(" box1内部样式表style    ",ele_box1.style.width);
    

    var ele_box2=document.getElementsByClassName("box2")[0];
    console.log(" box2内部样式表offset    ",ele_box2.offsetWidth);
    console.log(" box2内部样式表style    ",ele_box2.style.width);
    ele_box2.offsetWidth=400;
    ele_box2.style.height='400px';



</script>
</body>
</html>

在这里插入图片描述

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试网页</title>
    <style>
        #sm{
      
      
            position: relative;
            margin: 100px 20px;
            float: left;
            border: 1px solid red;
        }
        #sm_img{
      
      
            width: 450px;
        }
        #bg{
      
      
            position: relative;
            display:  none;
            width: 500px;
            height: 500px;
            margin: 100px 0px;
            overflow: hidden;
            float: left;
            border: 1px solid black;
        }
        #bg_img{
      
      
            position: absolute;
            top: 0px;
            left: 0px;
        }
        #msk{
      
      
            display: none;
            position: absolute;
            top:0px;
            left: 0px;
            width: 300px;
            height: 300px;
            background-color:yellow;
            opacity: .4;
            cursor: move;
            /*transform: translate(-50%,-50%);*/
        }
    </style>
</head>
<body>

<div id="sm">
    <img id="sm_img" src="jpg/small_iphon.jpg">
    <div id="msk"></div>
</div>

<div id="bg">
    <img id="bg_img" src="jpg/big_iphon.jpg">
</div>
<script>



    var mask=document.getElementById("msk");
    var ele_sm=document.getElementById("sm");
    var bg=document.getElementById("bg");
    var bg_img=document.getElementById("bg_img");

    ele_sm.addEventListener('mouseover',function () {
      
      
        bg.style.display='block';
        mask.style.display='block';
    })

    ele_sm.addEventListener('mouseleave',function () {
      
      
        bg.style.display='none';
        mask.style.display='none';
    })
    ele_sm.addEventListener('mousemove',function (event) {
      
      
        var x=event.pageX-this.offsetLeft;
        var y=event.pageY-this.offsetTop;

        //因素是正方形所以知道一个即可  但是为了在移动过程中好看，所以让鼠标在元素中间，所以让元素移动宽度和高度的一半，
        // 其实这一步就是为了好看 取消了也可以实现

        var mask_x=x-mask.offsetWidth/2;
        var mask_y=y-mask.offsetWidth/2;

        var max_movecount=this.offsetWidth-mask.offsetWidth;
        if(mask_x<=0){
      
      
            mask_x=0;
        }else if(mask_x>=max_movecount){
      
      
            mask_x=max_movecount;
        }

        if(mask_y<=0){
      
      
            mask_y=0;
        }else if(mask_y>=max_movecount){
      
      
            mask_y=max_movecount;
        }
        mask.style.top=mask_y+'px';
        mask.style.left=mask_x+'px';
 
        //    因为两个都是正方形，所以x，y方向一定的比例也是形似的，所以直接有了一个比例关系
        // 如果两个运动的轨迹占各自举例的比例相同即可，也就是最大移动比例值也就是移动速度的比例值
        var bigMax = bg_img.offsetWidth - bg.offsetWidth;
        // 大图片的移动距离 X Y
        var bigX = mask_x * bigMax / max_movecount;
        var bigY = mask_y * bigMax / max_movecount;
        bg_img.style.left = -bigX + 'px';
        bg_img.style.top = -bigY + 'px';

    })
    
</script>

</body>
</html>

在这里插入图片描述

补充

还有一个属性那就是client系列的相关属性，其和偏移量属性也有不同，这个就简单的说一下属性而不再举例了：

client系列属性	描述
ele.clientTop	返回元素上边框的大小
ele.clientLeft	返回元素左边框的大小
ele.clientWidth	返回元素本身包含pading，内容宽度，不包含边框，返回数值不带单位
ele.clientHeight	返回元素本身包含pading，内容高度，不包含边框，返回数值不带单位

client的属性和offset常用属性，只要看属性的描述就明白其区别了，可以根据自己需求进行选择。

javascript基础：偏移量（offset）和 client 常用属性以及实例

offset常用属性

offsetWidth （offsetHeight）和style.width(style.Height)的区别

例子

补充

猜你喜欢