Vue进阶(幺叁捌):js中document,拿下offer全凭这套“面试+架构进阶知识点”pdf

37 阅读2分钟

在javascript里`||`是个好东西,除了能用在if等条件判断里,还能用在变量赋值上。那么上例等同于下例。  
 例如:



var top = document .documentElement.scrollTop ? document.documentElement.scrollTop : document .body.scrollTop;


这么写可以得到很好的兼容性。


相反,如果不做声明的话,`document.documentElement.scrollTop`反而会显示为0。


![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/035d9681f76e4bb4a336ba5087d1b73f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771407615&x-signature=AYX2ppxX%2FK8rS0TU6B6wjtyRu30%3D)


得到各个属性如下:


网页可见区域宽: `document.body.clientWidth;`  
 网页可见区域高: `document.body.clientHeight;`


网页可见区域宽: `document.body.offsetWidth` (包括边线的宽);  
 网页可见区域高: `document.body.offsetHeight` (包括边线的宽);


网页正文全文宽: `document.body.scrollWidth;`  
 网页正文全文高: `document.body.scrollHeight;`


网页被卷去的高: `document.body.scrollTop;`  
 网页被卷去的左: `document.body.scrollLeft;`


网页正文部分上: `window.screenTop;`  
 网页正文部分左: `window.screenLeft;`


屏幕分辨率的高: `window.screen.height;`  
 屏幕分辨率的宽: `window.screen.width;`  
 屏幕可用工作区高度: `window.screen.availHeight;`  
 屏幕可用工作区宽度:`window.screen.availWidth;`


`scrollHeight`: 获取对象的滚动高度。  
 `scrollLeft`:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离  
 `scrollTop`:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离  
 `scrollWidth`:获取对象的滚动宽度


`offsetHeight`:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度  
 `offsetLeft`:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置  
 `offsetTop`:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置


`event.clientX` 相对文档的水平座标  
 `event.clientY` 相对文档的垂直座标  
 `event.offsetX` 相对容器的水平坐标  
 `event.offsetY` 相对容器的垂直坐标


`document.documentElement.scrollTop` 垂直方向滚动的值  
 `event.clientX+document .documentElement.scrollTop` 相对文档的水平座标+垂直方向滚动的量


要获取当前页面的滚动条纵坐标位置,用:



document.documentElement.scrollTop;

最后

总的来说,面试官要是考察思路就会从你实际做过的项目入手,考察你实际编码能力,就会让你在电脑敲代码,看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时,有一个清晰的逻辑思路,清楚知道自己在和面试官说项目说技术时的话就好了

开源分享:docs.qq.com/doc/DSmRnRG…