2024年最新JavaScript进阶篇之高级程序设计，2024年最新四年Web前端面试遇到的问题整理

分享

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• • 1、getBoundingClientRect

• 2.pageYOffset/scrollY

• 3.innerHeight

• 4.offsetTop

• 三、浏览器对象模型（BOM）

一、ECMAScript

==========================================================================

二、文档对象模型（DOM）

===========================================================================

1、getBoundingClientRect

---

getBoundingClientRect()用于获取某个元素相对于视窗的位置对象。对象中有top, right, bottom, left等属性。

rectObject.top：元素上边到视窗上边的距离;

rectObject.right：元素右边到视窗左边的距离;

rectObject.bottom：元素下边到视窗上边的距离;

rectObject.left：元素左边到视窗左边的距离;

兼容性：很好

2.pageYOffset/scrollY

---

pageYOffset是 scrollY 的别名。

window.scrollY是文档从顶部开始滚动过的像素值。

为了跨浏览器兼容，请使用 window.pageYOffset 代替 window.scrollY。另外，旧版本IE（<9）两个属性都不支持，必须使用其他的非标准属性。完整的兼容性代码如下：

var supportPageOffset = window.pageXOffset !== undefined;

var isCSS1Compat = ((document.compatMode || “”) === “CSS1Compat”);

var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;

var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;

JavaScript 和 ES6

在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】