2021-06-26

最新推荐文章于 2022-07-27 16:22:18 发布

buty_nice

最新推荐文章于 2022-07-27 16:22:18 发布

阅读量67

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/buty_nice/article/details/118254196

版权

笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

scroll系列

一：
dom对象.scrollTop 获取或设置垂直方向滚动条
dom对象.scrollLeft 获取或设置水平方向滚动条

dom对象.scrollTo(x,y) 使滚动条水平方向滚动到x，垂直方向滚动到y
二：
dom对象.scrollWidth 获取dom对象内容width(设置内容区域大小)
实际内容大小 >= 内容区域设置大小 oDiv.scrollHeight == 实际内容大小
dom对象.scrollHeight 获取dom对象内容height (实际内容大小)
实际内容大小 < 设置内容区域大小 oDiv.scrollHeight == 设置内容区域大小
Exp:

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        .box {
            /* overflow: visible; */
            /* overflow: hidden; */
            /* overflow-x: hidden; */
            overflow-y: hidden;
            width: 300px;
            height: 200px;
            margin: 0 auto;
            background-color: #ccc;
            ;
        }
        
        .box .list {
            padding-left: 20px;
        }
        
        .box .list li {
            height: 40px;
            line-height: 40px;
        }
    </style>
    <body>
    <div class="box">
        <ul class="list">
            <li>javascript从入门到泪奔1</li>
            <li>javascript从入门到泪奔2</li>
            <li>javascript从入门到泪奔3</li>
            <li>javascript从入门到泪奔4</li>
            <li>javascript从入门到泪奔5</li>
            <li>javascript从入门到泪奔6</li>
        </ul>
    </div>
</body>
<script>
    var oDiv = document.querySelector(".box");
    var oUl = document.querySelector(".list");	

  var oDiv = document.querySelector(".box");
    var oUl = document.querySelector(".list");
    var timer = null;
    oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
    timer = setInterval(function() {
        oDiv.scrollTop++;

        // 当滚动条滚出去的距离大于等于div里实际内容大小的一半时
        if (oDiv.scrollTop >= oDiv.scrollHeight / 2) {
            oDiv.scrollTop = 0; //让div滚动条瞬间恢复为最初状态
        }
    }, 10);

    //console.log(oDiv.scrollHeight);//实际内容大小 >= 内容区域设置大小   oDiv.scrollHeight == 实际内容大小
    //console.log(oDiv.scrollWidth);//实际内容大小 < 设置内容区域大小    oDiv.scrollHeight == 设置内容区域大小
 </script>

偏移量offset系列

dom对象.offsetLeft / dom对象.offsetTop
若相对于父级定位,则offsetLeft/offsetTop是距离父级的偏移量;若不相对于父级定位,则距离浏览器窗口的偏移量
Exp:(承接上面案例）

  var _div = document.querySelector(".box");
  var _btn = document.getElementById("btn");
  console.log(_div.offsetLeft);//距离浏览器左侧偏移量
  console.log(_div.offsetTop);//距离浏览上侧偏移量

dom对象.offsetWidth / dom对象.offsetHeight
返回盒子大小(content+padding+border)

<style>
        .container {
            /* position: relative; */
            width: 500px;
            height: 500px;
            margin-left: 100px;
            background-color: rgb(221, 217, 217);
        }
        
        .container .box {
            /* position: fixed; */
            /* left: 20px; */
            width: 100px;
            /* height: 100px; */
            padding: 10px;
            border: 5px solid #000;
            margin: 10px;
            background-color: #f00;
            /* box-sizing: border-box; */
        }
    </style>
    <body>
    <div class="container">
        <div class="box">Lorem ipsum dolor sit amet consectetur</div>
    </div>
</body>
<script>
    var con = document.querySelector(".container");
    var box = document.querySelector(".box");
    console.log(box.offsetHeight);
    console.log(box.offsetWidth);
</script>

获取dom对象距离浏览器可视区域左侧/上侧偏移量
dom对象.getBoundingClientRect().left
dom对象.getBoundingClientRect().top
dom对象.getBoundingClientRect().right 返回盒子右侧距离浏览器左侧偏移量
dom对象.getBoundingClientRect().bottom 返回盒子底部距离浏览器上侧偏移量
get获取
Bounding 边界
Client 客户端
Rect 矩形区域;
承接上面例题

 console.log(box.getBoundingClientRect().width); //盒子大小
 console.log(box.getBoundingClientRect().height);//盒子大小
 console.log(con.getBoundingClientRect().left);//获取dom对象距离浏览器可视区域左侧
 console.log(con.getBoundingClientRect().top);//获取dom对象距离浏览器可视区域上侧偏移量

获取浏览器可视区域大小

document.documentElement.clientWidth / document.documentElement.clientHeight

document.body.clientWidth / document.body.clientHeight

window.innerWidth / window.innerHeight

<style>
        /* *{
      /* margin: 0; */
        /* } */
        
        */ .box {
            width: 1200px;
            height: 100px;
            background-color: #ccc;
            margin: 0 auto;
        }
        <body>
    <div class="box">hjhdhdlfkdkfhdkfj</div>
</body>
<script>
    console.log(document.documentElement.clientWidth); //获取浏览器可视区域的宽度/高度
    // console.log(document.documentElement.clientHeight);

    console.log(document.body.clientWidth);

    console.log(window.innerWidth);
</script>

坐标

event.clientX / event.clientY
返回距离浏览器x,y坐标

event.pageX / event.pageY
返回距离文档x,y坐标

event.pageX = event.clientX + document.documentElement.scrollLeft
event.pageY = event.clientY + document.documentElement.scrollTop

event.screenX / event.screenY
返回设备屏幕x,y轴坐标

<body>
</body>
<script>
    document.onclick = function(event) {
        var b = Math.floor(Math.random() * 255 + 1);
        var b1 = Math.floor(Math.random() * 255 + 1);
        var b2 = Math.floor(Math.random() * 255 + 1);
        var x = event.pageX;
        var y = event.pageY;
        var rou = document.createElement("div");
        var a = Math.floor(Math.random() * 51 + 20);
        rou.style.height = `${a}px`;
        rou.style.width = `${a}px`;
        rou.style.position = "absolute";
        rou.style.borderRadius = "50%";
        rou.style.left = x - (a / 2) + "px";
        rou.style.top = y - (a / 2) + "px";
        // rou.style.background = `rgb(' + r + ',' + g + ',' + b + ')`; 
        rou.style.backgroundColor  =  `rgb(${b},${b1},${b2})`;
    }
</script>