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

news2025/10/31 10:13:42

一、样式和类

1、className，classList

elem.className 对应于 "class" 特性

    <div id="box" class="a b" style="height: 20px;">
        box
    </div>
    <script>
        const box = document.getElementById("box");
        // className就是元素节点的class
        console.log(box.className);  // a b
    </script>

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


    <div id="box" class="a b" style="color:red ; height: 20px;">
        box
    </div>
    <script>
        const box = document.getElementById("box");
        // .classList 是一个特殊的对象，它具有 add/remove/contains/toggle 单个类的方法。
        box.classList.add("c", "d", "e");   // 增加类名
        box.classList.add("xx");
        console.log(box.className);         //  a b c d e

        box.classList.remove("d", "e");     // 移除类名
        box.classList.remove("xx")
        console.log(box.className);         //  a b c

        box.classList.contains("d e");      // 是否存在类名
        console.log(box.classList.contains("d", "e"));    // false
        console.log(box.classList.contains("a"));    // true
        console.log(box.classList.contains("b"));

        box.classList.toggle("xc");      // 如果类不存在就添加类
        console.log(box.className);      // a b c xc
        box.classList.toggle("a");       // 存在就移除它
        console.log(box.className);      // b c xc

        // classList 是可迭代的
        for (let name of box.classList) {
            console.log((name));    // b，然后是 c，然后是xc
        }
    </script>

2、元素样式

elem.style 属性是一个对象

    <div id="box" class="a b" style="color:red ; height: 20px;">
        box
    </div>
    <script>
        // style
        const box = document.getElementById("box");
        console.log(box.style);  // 一个对象
        console.log(box.style.color);  // red 
        console.log(box.style.height); // 20px

        box.style.backgroundColor = "yellow";  // 设置背景色为黄色
        box.style.color = "";       // 设置字体颜色为无
    </script>

3、计算样式：getComputedStyle

getComputedStyle，用来读取样式

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

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

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

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

    <div id="box" class="a b" style="color:red ; height: 20px;">
        box
    </div>
    <script>
        const box = document.getElementById("box");
        console.log(getComputedStyle(box).fontSize);    // 16px
        console.log(getComputedStyle(box).fontWeight);  // 400
        // 获得伪元素样式
        console.log(getComputedStyle(box, "before").fontSize);    // 80px
        console.log(getComputedStyle(box, "before").fontWeight);  // 400
        console.log(getComputedStyle(box, "before").color);       // rgb(255, 0, 0)''
    </script>

二、元素大小和滚动

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);