• DOM-BOM-EVENT(5)


    5.宽、高、位置相关

    5.1.clientX/clientY

    clientX和clientY表示鼠标在浏览器可视区的坐标位置

    <script>
        document.onclick = function(ev){
            var ev = ev || event
            alert("clientX:"+ev.clientX+", clientY:"+ev.clientY)
        }
    </script>
    

    5.2.pageX/pageY

    pageX和pageY表示鼠标在网页文档中的坐标位置,这里需要注意:网页的宽高是可以大于浏览器可视区的

    <!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>Document</title>
        <style>
            #box{
                 300px;
                height: 2000px;
                background-color: #009f95;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
    
        <script>
            document.onclick = function(ev){
                var ev = ev || event
                alert("clientX:"+ev.pageX+", clientY:"+ev.pageY)
            }
        </script>
    </body>
    </html>
    

    5.3.offsetLeft/offsetTop/offsetWidth/offsetHeight/offsetParent

    offsetLeft和offsetTop是相对于定位父级的坐标位置

    offsetWidth和offsetHeight是元素实体所占的总宽高,例如:总宽度 = 内容 + padding + border

    offsetParent表示定位父级

    <!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>Document</title>
        <style>
            #box{
                 400px;
                height: 400px;
                background-color: #009f95;
                position: absolute;
                left: 200px;
                top:100px;
            }
            #box-inner{
                 100px;
                height: 100px;
                background-color: orangered;
                position: absolute;
                left: 50px;
                top: 50px;
                padding: 50px;
            }
        </style>
    </head>
    <body style="position:relative">
        <div id="box">
            <div id="box-inner"></div>
        </div>
        <script>
            var oBoxIner = document.getElementById("box-inner")
            var oBox = document.getElementById("box")
            document.onclick = function(ev){
                var ev = ev || event
                // 获取left 和 top偏移量
                alert("offsetLeft:"+oBoxIner.offsetLeft+", offsetTop:"+oBoxIner.offsetTop)
                // 获取当前元素的宽高, width = 内容宽高+padding+border
                alert("offsetWidth:"+oBoxIner.offsetWidth+", offsetHeight:"+oBoxIner.offsetHeight)
                // 获取元素的最近的定位父级
                console.log("offsetParent:"+oBoxIner.offsetParent)
            }
        </script>
    </body>
    </html>
    

    5.4.scrollLeft/scrollTop/scrollWidth/scrollHeight

    scrollLeft 和 scrollTop 表示元素滚出去的距离

    scrollWidth和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>Document</title>
        <style>
            #box{
                 300px;
                height: 200px;
                border: 5px solid black; 
                margin: 100px auto;
                overflow: auto;
                /* box-sizing: border-box; */
            }
            #box-inner{
                 450px;
                margin: 100px auto;
                height: 300px;
                border: 1px solid red; 
                background-color: #009f95
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div id="box-inner"></div>
        </div>
        <script>
            var oBox = document.getElementById("box")
            var oBoxInner = document.getElementById("box-inner")
    
            oBox.onclick = function(){
                // 顶部滚动距离
                alert("scrollTop:"+this.scrollTop+"scrollLeft:"+this.scrollLeft)
    
                alert("scrollWidth:"+this.scrollWidth+",scrollHeight:"+this.scrollHeight)
            }
        </script>
    </body>
    </html>
    

    5.5.clientWidth/clientHeight

    <!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>Document</title>
        <style>
            #box{
                 400px;
                height: 400px;
                background-color: #009f95;
                position: absolute;
                left: 200px;
                top:100px;
            }
            #box-inner{
                 100px;
                height: 100px;
                background-color: orangered;
                position: absolute;
                left: 50px;
                top: 50px;
                padding: 50px;
                border: 20px solid black;
            }
        </style>
    </head>
    <body style="position:relative">
        <div id="box">
            <div id="box-inner"></div>
        </div>
        <script>
            var oBoxIner = document.getElementById("box-inner")
            var oBox = document.getElementById("box")
            document.onclick = function(ev){
               var ev = ev || event
               //元素可视区宽高, 内容+padding 不包括边框
               alert("clientWidth:"+oBoxIner.clientWidth+", clientHeight:"+oBoxIner.clientHeight)      
            }
        </script>
    </body>
    </html>
    

    5.6.总结

    offsetWidth/offsetHeight clientWidth/clientHeight scrollWidth/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>Document</title>
        <style>
            #box{
                 300px;
                height: 200px;
                border: 5px solid black; 
                margin: 100px auto;
                overflow: auto;
                padding: 20px;
              
            }
            #box-inner{
                 450px;
                margin: 100px 300px;
                height: 300px;
                border: 1px solid red; 
                background-color: #009f95
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div id="box-inner"></div>
        </div>
        <script>
            var oBox = document.getElementById("box")
            var oBoxInner = document.getElementById("box-inner")
    
            oBox.onclick = function(){
                // 顶部滚动距离
                console.log("有滚动条的时候-----》")
                console.log("scrollWidth:"+this.scrollWidth)
    
                //offsetWidth
                console.log("offsetWidth-----》")
                console.log("offsetWith:"+this.offsetWidth)
    
                // clientWidth
                console.log("clientWidth-----》")
                console.log("clientWidth:"+this.clientWidth)
            }
        </script>
    </body>
    </html>
    

    总结: 1. clientWidth和offsetWidth返回的值和内部元素无关,它们两个的区别是,前者返回的值是:width+padding ,后者返回的值是:width+padding+border 2. scrollWidth返回的值和内部的元素有关,它返回的是内部元素实际的宽带,包括margin、padding、border等 等,会随着内部元素所占宽度的增加而增加

    5.7.如何获取文档的宽/高?

    document.documentElement.scrollWidth/scrollHeight

    5.8.如何获取可视区宽/高?

    docuement.documentElement.clientWidth document.documentElement.clientHeight

    5.9.如何获取页面的滚动距离?

    document.documentElement.scrollTop/scrollLeft

    螺钉课堂视频课程地址:http://edu.nodeing.com

  • 相关阅读:
    rest_framework viewsets.ViewSet 的简单使用
    rest_framework django 简单使用(数据库创建数据, 覆盖数据, 其他的大同小异)
    mysql 初始 密码
    centos python No module named '_bz2'
    shell 中的 if-elif-else 注意点
    CENTOS7下安装REDIS
    centos python安装 No module named '_ctypes'
    编译nginx时struct crypt_data’没有名为‘current_salt’的成员:cd.current_salt[0] = ~salt[0];的解决方案
    centos opencv-python libSM.so.6: cannot open shared object file: No such file or directory
    mysql_config not found
  • 原文地址:https://www.cnblogs.com/dadifeihong/p/12028091.html
Copyright © 2020-2023  润新知