JS、CSS --- 获取元素样式的方法，获取元素的坐标，windows坐标

前端鳄鱼崽
1,133 阅读4分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

获取元素样式

获取内联样式

该方法属于直接获取样式

语法： 元素.style.样式名

<div id="box1" style="width: 100px;" >
  </div>
  <script>
    let box1 = document.getElementById('box1')
    console.log(box1.style.width);  // 100px
  </script>

获取当前显示的样式

语法：元素.currentStyle.样式名

​ 它可以读取当前显示样式的值

currentStyle 只有IE支持

在其他浏览器用getComputedStyle( )方法获取元素样式

  • 该方法获取的样式都是只读的，要修改要用style

  • 需要两个参数；：

  • 第一个、获取样式的元素

  • 第二个、可以传递一个伪元素，一般都传null

var obj = getComputedStyle(box1,null);

该方法会返回一个对象，对象里封装了对应的样式

输出获得的obj对象：

image-20220220212304677

如果样式没有设置，则会获取真实的值，而不是默认值

obj.width 就会显示对应宽度

<div id="box1" style="width: 100px;" >
  </div>
  <script>
    let box1 = document.getElementById('box1') // 获取box1 元素
    let obj = getComputedStyle(box1)// 获取box1对象
    console.log(obj.width); //  打印box1盒子的宽度  100px
  </script>

获取元素可见样式

clientWidth

clientHeight

  • 这两个属性都可以获取元素的可视宽度高度
  • (包括内容区和内边距)
  • 这些属性都是不带px的，返回一个数字，可以直接进行计算

offsetWidth

offsetHeight

  • 包括内容区，内边距，跟边框的元素的高度、宽度

offsetParent

  • 获取当前元素的定位父元素
  • 会获取当前最近的开启定位的祖先元素

offsetLeft

offsetTop

  • 获取相当于当前定位父元素的水平偏移量和垂直偏移量

scrollWidht

scrollHeight

  • 可以获取元素整个滚动区域的宽度和高度

scrollLeft

scrollTop

  • 可以获取水平滚动移动的距离
  • 可以获取垂直滚动条滚动的距离

pageY

— 元素在文档中的相对坐标保持不变，从文档顶部（现在已滚动出去）开始计算。

clientY

— 窗口相对坐标确实发生了变化（箭头变短了），因为同一个点越来越靠近窗口顶部。

当满足scrollHeight - scrollTop == clientHeight时

  • 说明垂直滚动条拖到底了

当满足scrollWidht - scrollLeft == clientWidth

  • 说明水平滚动条托到底了

利用此可以实现一个用户条例案例

style>
        #inf{
            width: 400px;
            height: 1000px;
            overflow: auto;
        }
    </style>
    <script>
        window.onload = function(){
            // 获取inf的滚动长度
            var inf = document.getElementById("inf");
            var btn1 = document.getElementById("btn1");
            var btn2 = document.getElementById("btn2");
            // 绑定一个元素滚动事件  不能给window绑定
             inf.onscroll = function(){
                if(parseInt(inf.scrollHeight) - parseInt(inf.scrollTop) == parseInt(inf.clientHeight)){
                 alert("你已经阅读完");
                    //js中true  禁用按钮  false  开启按钮
                    btn1.disabled = false;
                    btn2.disabled = false;
            }
            }
    </script>
</head>
<body>
    <p>欢迎亲爱的用户注册</p>
    <div id="inf">
        XXX
    </div>
        //  设置禁用 disabled 内的值可以随便填
    <input id="btn1" type="checkbox" disabled="disabled">我已仔细阅读协议，一定遵守
    <input id="btn2" type="submit" value = "注册" disabled="disabled">
    <button id ="btn3"></button>
</body>

image-20220220212103933

当鼠标条到最底部时触发，然后将按钮的禁用取消，并且提示用户已经阅读完毕

坐标

要移动页面的元素，我们应该先熟悉坐标。

大多数 JavaScript 方法处理的是以下两种坐标系中的一个：

相对于窗口 — 类似于 position:fixed，从窗口的顶部/左侧边缘计算得出。

  • 我们将这些坐标表示为 clientX/clientY，当我们研究事件属性时，就会明白为什么使用这种名称来表示坐标。

相对于文档 — 与文档根（document root）中的 position:absolute 类似，从文档的顶部/左侧边缘计算得出。

  • 我们将它们表示为 pageX/pageY。

当页面滚动到最开始时，此时窗口的左上角恰好是文档的左上角，它们的坐标彼此相等。但是，在文档移动之后，元素的窗口相对坐标会发生变化，因为元素在窗口中移动，而元素在文档中的相对坐标保持不变。

在下图中，我们在文档中取一点，并演示了它滚动之前（左）和之后（右）的坐标：

image-20220304215126065

当文档滚动了：

  • pageY — 元素在文档中的相对坐标保持不变，从文档顶部（现在已滚动出去）开始计算。
  • clientY — 窗口相对坐标确实发生了变化（箭头变短了），因为同一个点越来越靠近窗口顶部。

元素坐标：getBoundingClientRect

方法 elem.getBoundingClientRect() 返回最小矩形的窗口坐标，该矩形将 elem 作为内建 DOMRect 类的对象。

主要的 DOMRect 属性：

  • x/y — 矩形原点相对于窗口的 X/Y 坐标，
  • width/height — 矩形的 width/height（可以为负）。

此外，还有派生（derived）属性：

  • top/bottom — 顶部/底部矩形边缘的 Y 坐标，
  • left/right — 左/右矩形边缘的 X 坐标。

页面上的任何点都有坐标：

  1. 相对于窗口的坐标 — elem.getBoundingClientRect()。
  2. 相对于文档的坐标 — elem.getBoundingClientRect() 加上当前页面滚动。

窗口坐标非常适合和 position:fixed 一起使用，文档坐标非常适合和 position:absolute 一起使用。

这两个坐标系统各有利弊。有时我们需要其中一个或另一个，就像 CSS position 的 absolute 和 fixed 一样。

avatar
文章
阅读
粉丝