前端之JavaScript BOM 操作的基本语法知识
我们常见的Web前端三巨头:HTML、CSS、JS(JavaScript)。
具体请移到【我的专栏】当中的前端——>前端之HTML+CSS;
而在这里我将图文并茂的介绍JS在Vscode中相关功能的运用,希望能够对你们有些帮助。
JavaScript BOM 操作
一整套操作浏览器相关内容的属性和方法
操作浏览器历史记录
操作浏览器滚动条
操作浏览器页面跳转
操作浏览器标签页的开启和关闭
…
- 获取浏览器窗口尺寸
获取可视窗口宽度 : window.innerWidth
代码书写例子:window.innerWidth
获取可视窗口高度 : window.innerHeight
代码书写例子:window.innerHeight - 浏览器的弹出层
提示框 : window.alert( ‘提示信息’ )
代码书写例子:window.alert( ‘肖言是御用女神’ )
询问框 : window.confirm( ‘提示信息’ )
代码书写例子:window.confirm( ‘肖言是御用女主吗 ?’ )
输入框 : window.prompt( ‘提示信息’ )
代码书写例子:window.prompt(’ 请输入您的致富密码 ')
- 开启和关闭标签页
开启 : window.open( ‘地址’ )
代码书写例子:window.open( ‘http://www.baidu.com/’ )
关闭 : window.close()
代码书写例子:window.close() - 浏览器常见事件
资源加载完毕 : window.onload = function () {}
可视尺寸改变 : window.onresize = function () {}
滚动条位置改变: window.onscroll = function () {} - 浏览器的历史记录操作
回退页面 : window.history.back()
前进页面 : window.history.forward()
- 浏览器卷去的尺寸
随着滚动条卷去的高度 :
document.documentElement.scrollTop(有)
document.body.scrollTop(没有)
随着滚动条卷去的宽度 :
document.documentElement.scrollLeft(有)
document.body.scrollLeft(没有) - 浏览器滚动到
滚动到 : 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 操作的基本语法知识已经写的非常清楚了,具体实战有什么问题的小伙伴可留言或者私信,看到一定帮您解决,我们别的文章再见。