JavaScript 中BOM的常用操作

2022-01-18 11:02:05 阅读：117 来源： 互联网

标签：body 常用浏览器 JavaScript window BOM var scrollTop document

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

标签：body,常用,浏览器,JavaScript,window,BOM,var,scrollTop,document
来源： https://www.cnblogs.com/akc4/p/15816803.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9