学习前端第四十三天（样式和类、元素大小和滚动、Window大小和滚动、坐标）

码农世界 2024-05-27 后端 69 次浏览 0个评论

一、样式和类

1、className，classList

elem.className 对应于 "class" 特性

box

classList用来对类名进行各种处理

box

2、元素样式

elem.style 属性是一个对象

box

3、计算样式：getComputedStyle

getComputedStyle，用来读取样式

style属性仅对“style”特性值起作用，而没有任何CSS级联。

因此，无法使用element.style读取来自CSS的任何内容

所以，可以使用getComputedStyle获得元素样式最终计算结果，

getComputedStyle(element, [pseudo]).?? pseudo可以选择填写伪元素

box

二、元素大小和滚动

1、offsetWidth / offsetHeight

提供了元素的“外部” width/height，它的完整大小（包括边框）。

2、clientWidth / clientHeight

元素边框内区域的大小。包括“content width”和“padding”，不包括滚动条

3、clientLeft / clientTop

左边框宽度和上边框宽度

4、scrollHeight / scrollWidth

就像 clientWidth/clientHeight，但它们还包括滚动出（隐藏）的部分：

scrollHeight ：内容区域的完整内部高度，包括滚动出的部分

scrollWidth ：内容区域的完整内部宽度，包括滚动出的部分

当横向或竖向没有滚动时，scrollHeight / scrollWidth和clientHeight / clientWidth相等

5、scrollLeft / scrollTop

元素的隐藏、滚动部分的 width/height，也就是已经滚动了多少

三、Window大小和滚动

1、窗口的 width / height

获取窗口的宽高

window.innerWidth/innerHeight

// 优先使用这个

console.log(window.innerWidth); // 整个窗口的宽度

console.log(window.innerHeight); // 整个窗口的高度

document.documentElement.clientWidth / clientHeight

console.log(document.documentElement.clientWidth); // 减去滚动条宽度后的窗口宽度

console.log(document.documentElement.clientHeight); // 减去滚动条宽度后的窗口高度

2、文档的 width / height

        // 为了可靠地获得完整的文档宽度/高度，我们应该采用以下这些属性的最大值：
        let scrollHeight = Math.max(
            document.body.scrollHeight, document.documentElement.scrollHeight,
            document.body.offsetHeight, document.documentElement.offsetHeight,
            document.body.clientHeight, document.documentElement.clientHeight
        );
        let scrollWidth = Math.max(
            document.body.scrollWidth, document.documentElement.scrollWidth,
            document.body.offsetWidth, document.documentElement.offsetWidth,
            document.body.clientWidth, document.documentElement.clientWidth
        );

3、获得当前滚动

window.pageXoffset / pageYoffset

        // 获得当前滚动
        setTimeout(() => {
            console.log('当前已从顶部滚动：' + window.pageYOffset);
            console.log('当前已从左侧滚动：' + window.pageXOffset);
        }, 5000);

4、滚动：scrollBy，scrollTo，scrollIntoView

scrollBy（x，y），滚动到相对于当前位置的（x，y）

scrollTo（x，y），使选中元素的左上角滚动到绝对位置（文档左上角）的（x，y）

以上两个方法后面的（x，y）可以改写为

{

left：？

top：？

behavior：“smooth”

}，behavior：“smooth”可以使滚动更加丝滑

scrollIntoView:

对 elem.scrollIntoView(top) 的调用将滚动页面以使 elem 可见。它有一个参数：

如果 top=true（默认值），页面滚动，使 elem 出现在窗口顶部。元素的上边缘将与窗口顶部对齐。
如果 top=false，页面滚动，使 elem 出现在窗口底部。元素的底部边缘将与窗口底部对齐。
```
const pp = document.getElementById("pp")
setInterval(() => {
pp.scrollIntoView();   // 页面滚动，使 elem 出现在窗口顶部。元素的上边缘将与窗口顶部对齐。
pp.scrollIntoView(false); // 页面滚动，使 elem 出现在窗口底部。元素的底部边缘将与窗口底部对齐。
        }, 3000);
```
5、禁止滚动

document.body.style.overflow = "hidden"。

四、坐标

1、元素坐标：getBoundingClientRect（）

主要的属性：

x/y —— 矩形原点相对于窗口的 X/Y 坐标，

width/height —— 矩形的 width/height（可以为负）。

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

top/bottom —— 顶部/底部矩形边缘的 Y 坐标，

left/right —— 左/右矩形边缘的 X 坐标。

2、elementFromPoint(x, y)

使用document.elementFromPoint(x,y)会返回在窗口坐标（x，y）处的元素

console.log(document.elementFromPoint(100, 100)); // html,