常用得位置属性clientWidth,clientHight,offsetLeft,offsetTop和滚动scrollTop,scrollLeftt

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

 

    <style>

        *{

            margin:0px;

            padding:0px;

        }

        div {

            width:200px;

            height:200px;

            border:5px solid red;

            background:yellow;

            padding:10px;

            margin:20px;

            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>

</div>

<script>

    var dv = document.getElementById("dv");

    //     clientWidth

    //     clientHeight

    //     可视部分的宽度和高度, content + padding

    //     如果出现滚动条, 会覆盖元素宽高, 减去滚动条的宽高

 

    // console.log(dv.clientWidth);

    // console.log(dv.clientHeight);

 

        // 200          10        5

        // content + padding  + border

    // console.log(dv.offsetWidth);

    // console.log(dv.offsetHeight)  /*

 

        这个属性指的就是读取元素border的宽度和高度

     */

    console.log(dv.clientLeft);

    console.log(dv.clientTop);

</script>

 

</body>

</html

 

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #father {

            width: 500px;

            height: 500px;

            background-color: red;

            position: relative;

            margin: 0 auto;

        }

        #son {

            width: 100px;

            height: 100px;

            background-color: lightpink;

            position: absolute;

            margin-left: 100px;

            left: 100px;

            margin-top: 100px;

            top: 50px;      

        }

    </style>

    

</head>

<body>

    <div id="father">

        <div id="son"></div>

    </div>

    <script>

        let son = document.getElementById('son');

     

        // 获得定位元素与父元素顶部的距离,以及左边的距离

        // 定位元素在父元素中的水平与垂直位置

      

        console.log(son.offsetLeft);

        console.log(son.offsetTop);

    </script>

</body>

</html>

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        #box {

            width: 200px;

            height: 200px;

            border: 2px solid red;

            overflow: auto;

            /* 自适应内容,添加滚动条 */

        }

 

        img {

            vertical-align: middle;

        }

    </style>

</head>

<body>

    <button id="btn">点我</button>

    <div id="box">

        <img src="./1.jpg" alt="">

    </div>

    <script>

        // 如何监测目标元素的滚动

        let box = document.getElementById('box');

 

        // 滚动事件

        box.onscroll = function () {

            // 请实时打印水平与垂直方向的滚动距离

            // console.log('垂直滚动的距离是:'+box.scrollTop);

            // console.log('水平滚动的距离是:'+box.scrollLeft);

            // console.log('------------------------');

 

             if (box.scrollTop >= 100) {

                // 你不是神,怎么刚好调用的时候就是100

                alert('我吓死你');

            }

        }

    </script>

</body>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值