BOM
BOM :(Browser Object Model)浏览器对象模型(简而言之,就是对浏览器进行操作)。
1.关闭标签页:
let btn1 = document.getElementById("btn");
//点击btn1关闭窗口
btn1.onclick = function(){
window.close();
};
2.打开标签页:
//点击btn1打开一个窗口(如果要弹出很多窗口,浏览器会禁止)。
btn1.onclick = function(){
window.open(
"http://xxxxxxxxx",//参数一:url
"_blank" //参数二:在什么窗口打开(新窗口)
);
};
3.浏览器滚动(持续性触发事件)
window.onscroll = function(){
console.log("scroll");
}
4.浏览器可视区域发生改变(大小发生调整时),持续性触发事件
window.onresize = function(){
console.log("onresize");
}
5.重要的四个对象:
//让当前页面跳转的办法
window.location.ref = "http://xxxxx"
location.reload//刷新页面
//历史跳转
history.forward//前进
history.back//后退
window.history.go(1)//正数往前走
window.history.go(-1)//负数往后走
window.history.go(0)//刷新页面
location.reload//刷新页面
//navigator 可查看userAgent、lang、版本等信息
window.navigator
//屏幕可视区的宽高,分辨率等的信息
window.Screen
6.BOM实际应用(实用)
- 获取可视区的宽高
//(包括了滚动条宽度)
window.innerWidth;
window.innerHeight;
//不包括滚动条宽度,兼容IE(推荐使用)
document.documentElement.clientWidth;
document.documentElement.clientHeight;
- 几个唯一标签的特殊获取方式
//获取html节点
document.documentElement
//head标签节点
document.head
//body标签节点
document.body
//title标签节点的文字内容,可以赋值修改值
document.title
document.title = "这是修改后的title"
- 各种宽高的获取
let wrap = document.getElementById("wrap");
//width+左右padding,没有单位
wrap.clientWidth
//height+上下padding,没有单位
wrap.clientHeight
//width+左右padding+左右边框
wrap.offsetWidth
//height+上下padding+上下边框
wrap.offsetHeight
//元素实际占据的宽,超出隐藏(overflow:hidden)都不会改变
wrap.scrollWidth
//元素实际占据的高
wrap.scrollHeight
- 各种边距的获取
//元素左边到定位父级的左边(不算父级边框)的距离
// margin+left的值
wrapson.offfsetLeft
// margin+top的值
wrapson.offsetTop
//距离上,左
wrapson.get.getBoundingClientRect()
//right: 儿子右边到浏览器左边的距离
//left: 儿子左边到浏览器左边的距离
//top: 儿子上边到浏览器顶部的距离
//bottom: 儿子底部到浏览器顶部的距离
- 页面滚动宽高:页面向上滚动,超出可视区域(浏览器页面)顶端的距离
//如:总高度2000,滚动到底部,滚动高为:2000-可视区高度
document.documentElement.scrollTop;
//前提有滚动条,滚动到500px的地方,宽300的地方
document.documentElement.scrollTop({top:500,left:300})