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'         //定位方式:平滑滚动
})

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...