当前位置：首页 > news >正文

JS-第二十一天-尺寸位置

news 2025/8/7 13:24:45

DOM元素操作基础

元素内容的操作：

let box = document.querySelector('.box')
// 读取内容
console.log(box.innerHTML);
// 写入内容
box.innerHTML = "新的内容"

样式的操作：

// 样式操作（只支持写入）
box.style.borderRadius = "30px"
// 读取样式（只能读取内联样式）
console.log(box.style.height);
console.log(box.style.padding);

元素尺寸系列属性

offset系列

offset包含了宽高+内填充+边框

offset的属性：

offsetWidth：元素总宽度
offsetHeight：元素总高度
offsetLeft：距离父元素左边距离
offsetTop：距离父元素顶部距离

    console.log("========offset=======")// offset系列 尺寸：宽高＋内填充+边框console.log($box.offsetWidth);console.log($box.offsetHeight);// 位置console.log($box.offsetLeft);console.log($box.offsetTop);

client系列

client包含了宽高和内填充【不包括边框】

client的属性

clientWidth：可视区域宽度
clientHeight：可视区域高度
clientLeft：左边框宽度
clientTop：上边框宽度

    console.log("========client=======")// client系列 尺寸：宽高＋内填充 [不包含边框]console.log($box.clientWidth);console.log($box.clientHeight);console.log($box.clientLeft);console.log($box.clientTop);

scroll系列

scroll包含了总滚动内容的宽高+内填充【不包含边框】

scroll的属性

scrollWidth：内容总宽度
scrollHeight：内容总高度
scrollLeft：水平滚动距离（可写）
scrollTop：垂直滚动距离（可写）

    console.log("========scroll=======")// scroll系列 尺寸：宽高＋内填充+外填充console.log($box.scrollWidth);console.log($box.scrollHeight);// 滚动距离console.log($box.scrollLeft);console.log($box.scrollTop);

注意：除了`scrollLeft`和`scrollTop`，所有属性都是只读的。

网页和窗

1 窗口尺寸

// 窗口可见区域
window.innerWidth    // 窗口宽度
window.innerHeight   // 窗口高度
document.documentElement.clientWidth   // HTML元素宽度
document.documentElement.clientHeight  // HTML元素高度

2 网页总尺寸

// 推荐使用html元素，兼容性问题时取最大值
document.documentElement.scrollWidth   // 网页总宽度
document.documentElement.scrollHeight  // 网页总高度
document.body.scrollWidth              // body总宽度
document.body.scrollHeight             // body总高度

3 滚动位置

// 滚动事件监听
window.onscroll = function () {// 现代浏览器推荐console.log(window.pageXOffset);  // 水平滚动距离console.log(window.pageYOffset);  // 垂直滚动距离// 兼容性写法console.log(document.documentElement.scrollTop);console.log(document.body.scrollTop);
}

滚动控制

平滑滚动到指定位置一共有两种方法：

// 方法1：使用scrollTo
window.scrollTo({top: 0,behavior: "smooth"
})// 方法2：使用scrollIntoView
element.scrollIntoView({behavior: "smooth"
})

回到顶部：

toTop.onclick = function () {window.scrollTo({top: 0,behavior: "smooth"})
}

toTop是设置的类名。

触底判断

触底检测逻辑

window.onscroll = function () {let topHeight = Math.floor(document.documentElement.scrollTop)  // 滚动距离let winHeight = window.innerHeight                              // 窗口高度let pageHeight = document.documentElement.scrollHeight          // 网页总高度// 判断是否触底（预留50px缓冲）if (topHeight + winHeight >= pageHeight - 50) {console.log("到底了");// 执行触底后的操作}
}

楼层滚动导航

1 点击导航跳转

lis.forEach((li, i) => {li.onclick = function () {// 方法1：使用scrollTowindow.scrollTo({top: boxs[i].offsetTop,behavior: "smooth"})// 方法2：使用scrollIntoViewboxs[i].scrollIntoView({behavior: "smooth"})}
})

2 滚动时更新导航状态

window.onscroll = function () {let topNum = Math.ceil(window.pageYOffset)for (let i = 0; i < boxs.length; i++) {if (topNum >= boxs[i].offsetTop && i != index) {lis[index].classList.remove("active")  // 移除当前激活状态lis[i].classList.add("active")         // 添加新的激活状态index = i                              // 更新索引}}
}