JavaScript 中BOM的常用操作

JavaScript BOM操作

1.获取浏览器窗口尺寸

var width=window,innerWidth        //获取可视窗口宽度
var height=window.innerHeight      //获取可视窗口高度

2.浏览器的弹窗层

window.alert("提示信息")     //提示框       无返回值
window.confirm("提示信息")   //询问框      返回值为Boolean型
window.prompt("提示信息")     //输入框      返回值为输入的内容

3.开启和关闭标签页

widow.open("url链接")           //打开链接
widow.close("url链接")           //关闭链接

4.浏览器常见事件

window.onload=function(){ }              //资源加载完毕触发事件
window.onresize=function(){ }           //可视窗口尺寸改变时触发事件
window.onscroll=function(){ }          //滚动条位置改变触发事件

5.浏览器卷去的尺寸

(1)获取卷去的高度

document.documentElment.scrollTop     //页面有<!DOCTYPE html>标签时使用
documen.body.scrollTop                //页面没有<!DOCTYPE html>时使用

//兼容写法
var height=document.documentElment.scrollTop ||  documen.body.scrollTop

(2)获取卷去的宽度

document.documentElement.scrollLeft  //页面有<!DOCTYPE html>标签时使用
document.body.scrollLeft              //页面没有<!DOCTYPE html>时使用

//兼容写法
var widght=document.documentElment.scrollTop ||  documen.body.scrollTop

6.设置浏览器滚动条位置

//瞬间跳转
window.scrollTo(left,top)     //left 是宽的位置，top是高的位置

//平滑滚动
window.scrollTo({
left:宽度位置
top：高度位置
behavior:'smooth'         //定位方式：平滑滚动
})
posted @ 2022-01-18 10:52  永恒之月TEL  阅读(36)  评论(0)  编辑  收藏  举报