JS BOM浏览器对象模型
BOM输出
语法 | 作用 |
---|---|
alert(内容) | 弹窗提示 |
confirm(内容) | 同alert()有取消按钮,点击确定true 点取消false |
console.log(内容) | 浏览器调试 常用 |
var 返回输入 = prompt('弹窗信息','输入框默认值') |
弹窗并需要输入 |
open_close 网页
open('https://www.baidu.com');//打开百度网页,winodow对象可以省略
//行间的js中的window不能省略
<button onclick="window.open('https://www.baidu.com/')">百度</button>
//打开空白页面
open('about:blank',"_self")
//关闭当前页面
close();
//行间js中的window还是不能省略
<button onclick="window.close()">关闭</button>
跳转 + 获取用户信息
//返回浏览器的用户设备信息
console.log(window.navigator.userAgent)
//经常使用的一个方法,跳转网页
window.location.href = 'https://www.baidu.com';
窗口client
可以通过标签,直接获取其,长宽高等窗口信息
var oBox = document.getElementsByClassName('box')[0];
oBox.clientTop //内容区域到边框顶部的距离
oBox.clientLeft //内容区域到边框左部的距离
oBox.clientWidth //内容区域+左右padding 可视宽度
oBox.clientHeight //内容区域+ 上下padding 可视高度
屏幕的可视区域
//onload等加载页面完成后再执行
window.onload = function(){
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
window.onresize = function(){
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
}
}
scroll 滚动
onscroll 滚动监听,滚动的宽高
window.onload = function(){
//实施监听滚动事件
window.onscroll = function(){
console.log(1111)
console.log('上'+document.documentElement.scrollTop)
console.log('左'+document.documentElement.scrollLeft)
console.log('宽'+document.documentElement.scrollWidth)
console.log('高'+document.documentElement.scrollHeight)
}
}