【前端之JavaScript BOM 操作的基本语法知识】

前端之JavaScript BOM 操作的基本语法知识

我们常见的Web前端三巨头：HTML、CSS、JS（JavaScript）。
具体请移到【我的专栏】当中的前端——>前端之HTML+CSS；
而在这里我将图文并茂的介绍JS在Vscode中相关功能的运用，希望能够对你们有些帮助。

JavaScript BOM 操作

一整套操作浏览器相关内容的属性和方法

操作浏览器历史记录
操作浏览器滚动条
操作浏览器页面跳转
操作浏览器标签页的开启和关闭
…

1. 获取浏览器窗口尺寸
   获取可视窗口宽度 : window.innerWidth
   代码书写例子：window.innerWidth
   获取可视窗口高度 : window.innerHeight
   代码书写例子：window.innerHeight
2. 浏览器的弹出层
   提示框 : window.alert( ‘提示信息’ )
   代码书写例子：window.alert( ‘肖言是御用女神’ )
   询问框 : window.confirm( ‘提示信息’ )
   代码书写例子：window.confirm( ‘肖言是御用女主吗 ?’ )
   输入框 : window.prompt( ‘提示信息’ )
   代码书写例子：window.prompt(’ 请输入您的致富密码 ')
   
   
   
3. 开启和关闭标签页
   开启 : window.open( ‘地址’ )
   代码书写例子：window.open( ‘http://www.baidu.com/’ )
   关闭 : window.close()
   代码书写例子：window.close()
4. 浏览器常见事件
   资源加载完毕 : window.onload = function () {}
   可视尺寸改变 : window.onresize = function () {}
   滚动条位置改变: window.onscroll = function () {}
5. 浏览器的历史记录操作
   回退页面 : window.history.back()
   前进页面 : window.history.forward()
   
6. 浏览器卷去的尺寸
   随着滚动条卷去的高度 :
   document.documentElement.scrollTop（有）
   document.body.scrollTop（没有）
   随着滚动条卷去的宽度 :
   document.documentElement.scrollLeft（有）
   document.body.scrollLeft（没有）
7. 浏览器滚动到
   滚动到 : window.scrollTo()
   参数方式 1 : window.scrollTo( left, top ) 瞬间定位
   代码书写例子：window.scrollTo( 300, 400 )
   left : 浏览器卷去的宽度
   top : 浏览器卷去的高度
   参数方式 2 : window.scrollTo( {
   left: xx,
   top: yy,
   behavior: ‘smooth’
   } )
   传递一个对象平滑滚动
   代码书写例子：window.scrollTo({left: 300,top: 400, behavior: ‘smooth’})

总结

好了，关于前端之JavaScript BOM 操作的基本语法知识已经写的非常清楚了，具体实战有什么问题的小伙伴可留言或者私信，看到一定帮您解决，我们别的文章再见。