原生JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸名
最新回答
清清茶烟挽
2020-11-05 18:56:08
1. 计算元素位置和尺寸：
- 通过`document.getElementsByClassName("js-new-issue-button")[0].style.width`，可以获取元素的宽度，如"84px"，而`clientWidth`则可得到内边距内的宽度，如104。
- 要获取元素的宽度值，`$(".w_content .product_piece img").css("width")`返回"165px"，而`$(".w_content .product_piece img").width()`则获取实际宽度，即165。
2. 滚动条位置：
- 使用`getTop`函数可以递归计算元素的纵坐标，它会跟随滚动条移动而调整元素的显示位置。
3. 遇到的挑战：
- 在iPad上，获取窗口高度和宽度时，需要注意iPad的屏幕工作区（screen.height 和 screen.width）与可用工作区（availHeight 和 availWidth）之间的差异，可能会导致与预期值不符，比如`$(window).height()` 和 `$(window).width()` 可能会有偏差。
4. 不同浏览器的兼容性：
- 在IE中，可以分别使用`document.body.offsetWidth` 和 `document.body.offsetHeight`获取窗口大小，而在声明DOCTYPE的浏览器中，推荐使用`document.documentElement.clientWidth` 和 `document.documentElement.clientHeight`。
- 对于现代浏览器，如Chrome、Firefox、Safari，它们通常支持`window.innerWidth` 和 `window.innerHeight`，而Opera虽然也支持，但返回的是页面尺寸而非浏览器窗口尺寸。
总结起来，原生JavaScript提供了灵活的手段来处理元素尺寸、位置以及浏览器滚动条的交互，但需要注意不同设备和浏览器的兼容性差异。
热门标签
