JavaScript——DOM位置属性

最新推荐文章于 2024-04-24 18:02:22 发布

Abby_zzy

最新推荐文章于 2024-04-24 18:02:22 发布

阅读量1.5k

点赞数

文章标签：位置属性

本文链接：https://blog.csdn.net/Abby_zzy/article/details/88697889

版权

Event对象属性：

clientX相对浏览器窗口的x坐标位置
offsetX设置或者是得到鼠标相对于事件目标的父元素的内边界在x坐标上的位置。（FF不支持）
screenX相对于用户屏幕。

例：

<!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>
        #btn {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="btn"></div>
    <script>
        var btn = document.getElementById('btn')
        btn.addEventListener('click', function (e) {
            var positonX = e.clientX;
            var off = e.offsetX;
            var screen = e.screenX;

            console.log(positonX)
            console.log(e)
            console.log(off)
            console.log(screen)
        }, false)
    </script>
</body>
</html>

滚动对象属性

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离；

例：

<!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>
        /* ul{ */
        /* height: 300px; */
        /* border: 2px red solid; */
        /* overflow: scroll;    */
        /* }   */
    </style>
</head>
<body>
    <script>
        /**
         监听滚动条事件：scroll；
         scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离；
         1：初始值为0 
         2; 当 scrollTop>0时候证明滚动条开始滚动
         scrollY 也可以获取滚动条位子变化
        浏览器默认的滚动条在document对象中
        */
        
        // var ul = document.getElementsByTagName('ul')[0]
        // var scrollLeft = document.documentElement.scrollLeft
        // console.log(scrollPosition)
        console.log(document.documentElement)
        document.addEventListener('scroll', function () {
            console.log(document.documentElement.scrollTop)
            // 获取窗口高度
            console.log(innerHeight)
            if(100>document.documentElement.scrollTop>0){
                document.body.style.background = 'red'
            }else{
                document.body.style.background = 'yellow'
            } 
        })

        // wheel监听的鼠标滚轮 scroll 监听滚动条
        // ul.addEventListener('scroll', function () {
        //     var scrollTop = ul.scrollTop
        //     console.log(scrollTop)
        //     if(scrollTop>0){
        //         document.body.children[0].style.background = 'red'
        //     }else{
        //         document.body.children[0].style.background = ''

        //     }
        // })
    </script>
    <div class="box">
        <ul>
            ...........<--超出页面的内容，出现滚动条测试-->
       
            <li>我是000DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD50</li>
       </ul>
    </div>
</body>
</html>

触法事件位置

window.screenX/screenY 获取到浏览器到屏幕左边/上边的距离 X，Y单位px，Y只有正直；X 可为负值
浏览器的坐标轴起点，浏览器最上角；（0,0）

事件对象：

clientX/Y求触发事件的位置坐标，以视图窗口为准，原点位置在视图窗口的左上角 X 表示距离距离窗口左边的距离；Y表示距离窗口顶部的距离

offsetX/Y , 触发事件位置；X ,Y子元素距离元素左边的距离；顶部的距离与父元素是否有位置属性没有关系。坐标轴原点在父元素左上角

<!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>
        .wrap {
            width: 300px;
            height: 300px;
            border: 2px red solid;
            margin-top: 300px;
            margin-left: 300px;

        }
        .box {
            width: 100px;
            height: 100px;
            background-color: aqua
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box"></div>
    </div>
    <script>

    var box = document.getElementsByClassName('box')[0]
    document.addEventListener('click', function (e) {
        // console.log(e.clientX)
        // console.log(e.clientY)
    }, false)

    box.addEventListener('click', function (e) {
        console.log(e.offsetX)
        console.log(e.clientX)
        console.log(e)

    }, false)
</script>
</body>
</html>

元素位置

<!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>
</head>
<body>
    <div class="content" style="position:relative;padding:30px;">
      <div class="wrap" style="width:100px;height:100px;border:2px solid red;margin:150px;padding:130px;">
        <div class="box" style="width:100px;height:100px;background:red;"></div>  
      </div>
    </div>
    <script>
        var box = document.getElementsByClassName('box')[0]
        //   获取视图窗口的宽度和高度
        // window.innerWidth/innerHeight  W3C标准
        // document.documentElement.clientWidth/clientHeight 
        // document.body.clientWidth/clientHeight兼容IE8以下浏览器
        //  在IE浏览器下获取视图窗口宽度和高度方式  document.documentElement.clientWidth/clientHeight + document.body.clientWidht/clientHeight 

        // 获取元素相对自身脱离文档流的父级元素的距离；如果父级没有脱离文档流；那么就相对document
        // domEl.offsetLeft/ offsetTop   元素与窗口左边的距离；顶部的距离
        // domEl.getBoundingClientRect(),返回一个对象；对象中内容为；元素距离窗口位置信息；以及元素的看到的盒子的大小：width，height IE 没有
    </script>
</body>
</html>

查看元素属性

offsetWidth/offsetHeight 查看元素的视觉尺寸 (width+height+padding)没有margin ;注意IE盒子模型不同点
omEl.getBoundingClientRect()
兼容性好，该方法返回一个对象，对象里面有left.top。等属性.left表示元素左上角X坐标；top表示左上角Y坐标，right和bottom 表示右下角X和Y 坐标
X坐标表示：点距离视图窗口左边的距离。Y坐标表示距离视图出口顶部的距离
height width 老版本IE 并未实现

<!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 {
            width: 100px;
            height: 100px;
            background: red;
            padding: 100px;
        }
    </styLe>
</head>
<body>
    <div class="box"></div>
    <script>
        // 查看元素尺寸，返回结果不是实时的
        var box = document.getElementsByClassName('box')[0]
        var boxSize = box.offsetWidth
        var boxHeight = box.offsetHeight;

        var boxSizeObj = box.getBoundingClientRect()
        console.log(boxSizeObj)
    </script>
</body>
</html>

求滚动条位置

滚动条滚定距离：scrollTop/scrollLeft 距离窗口顶部/左边距离

document.documentElement.scrollHight/scrollWidth 获取滚动条高度

document.body.scrollheight/scrollWidht IE 8以下兼容

求出滚动条滚动的最大距离 = document.documentElement.scrollHight/scrollWidtd —减去 innerHeight/innerWidth - 默认滚动条宽度

如果有滚动条documen.documentElement.clientHeight/clientWidht = innerHeight/innerWidth - 滚动条的大小（默认滚动条的宽度是17px）

查看元素滚动的距离

注意获取滚动条的高度；

如果横向的滚动条出现了。

document.documentElement+滚动条滚动最大距离 = document.documentElemment.scrollHeight

让滚动条滚起来
滚动条滚动
1: window.scroll(x,y)
(1)适用于任何一个具有滚动条的元素
(2) 没有没加；
2:domEL.scrollto(x,y)
(1)使用场景；只有domcumentElemtn 上有滚动条时候才能用
(2) 定位功能；在滚动条为0的位置开始滚动；作用：想让滚动条滚到哪里；就到哪里。没有累加滚动的过程
3: domEL.scrollBy)(x,y)
(1)在滚动条当前的位置进行滚动的；有累加滚动的过程
domeEl表示元素对象
那个元素对象具有滚动条；X Y 就在那个元素的左上角

例如：

var box = document.getElementsByClassName('box')[0]

box.scrollTo(0,200)

窗口属性汇总：

1.document.documentElement表示html，我在下面就用html简写替代
滚动条是挂载在document下的，所以其与html元素是同级的，不算在html中

2.window.innerWidth,innerHeight与window.outerWidth,outerHeight
经测试，在Chrome中，outer的两个属性就是浏览器窗口的宽高，而inner的两个属性是浏览器的视图区域
注意一下：如果有滚动条的话，滚动条的宽高也算在inner的两个属性内

3.html与body的区别，在于html就是在页面视图容器中的整个页面，但是body是页面的内容区域，一般来说，浏览器中的body会有默认样式，设置外边距为8px，但是清除了该样式之后，html就与body一样大了

html.scrollHeight与body.scrollHeight就是指的是html与body的可以滚动的高度，就是总高度
html.clientHeight与body.clientHeight：就不同了，html的这个属性其实就是视口高度innerHeight（去掉横滚动条的高度），但是body不同，它的这个属性其实与滚动高度scrollHeight相同

4.html.scrollWidth,body.scrollWidth
html.clientWidth,body.clientWidth
滚动宽度就是html与body的可以横向滚动的宽度而可见宽度就是横向滚动条未滚动时的html与body的可见宽度

5.滚动条位置

可以通过三种方法取得：
document.documentElement.scrollLeft,scrollTop（通过将其设置为0，可以回到顶部，下面的两个属性不行）
window.pageXOffset,pageYOffset
window.scrollX,scrollY
目前来说，这三者没什么区别至于通过body对象下的scrollLeft，scrollTop访问滚动条位置是IE浏览器的方法，在Chrome中这两者始终是0

元素内的滚动条

可见区域和滚动区域就很简单了，没有浏览器默认的滚动条那么复杂了
可以通过调用方法直接滚动

Abby_zzy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript——DOM位置属性

Event对象属性：clientX相对浏览器窗口的x坐标位置offsetX设置或者是得到鼠标相对于事件目标的父元素的内边界在x坐标上的位置。（FF不支持）screenX相对于用户屏幕。例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <me...
复制链接

扫一扫