2.BOM关闭
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>open_close</title>
</head>
<body>
<!--行间的js中的open() window不能省略-->
<button onclick="window.open('https://www.luffycity.com')">路飞学城</button>
<button>打开百度</button>
<button onclick="window.close()">关闭当前页</button>
<button>关闭有确认</button>
</body>
<script type="text/javascript">
var oBtn = document.getElementsByTagName('button')[1];
oBtn.onclick = function () {
// open("https://www.baidu.com")
open("about:blank","self") // 在当前窗口打开
};
var closeBtn = document.getElementsByTagName('button')[3];
closeBtn.onclick = function () {
if(confirm("是否关闭？")){
close()
}
}
</script>
</html>
3.其他对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>其他对象BOM对象</title>
<style type="text/css">
</style>
</head>
<body>
</body>
<script type="text/javascript">
console.log('刷新了');
//navigator 浏览器的一些信息
//返回浏览器的用户设备信息
console.log(window.navigator.userAgent);
//
console.log(window.location);
//直接打开一个链接网站,经常使用的方法
window.location.href='https://www.luffycity.com';
//全局刷新，尽量少用，多用局部刷新
window.location.reload();
</script>
</html>
4.client系列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>client系列</title>
<style type="text/css">
.box{
width:200px;
height: 200px;
position:absolute;
border:1px solid red;
margin: 10px 0 0 0;
padding:10px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
<script type="text/javascript">
//client系列获取信息
//clientTop border内容区域到边框顶部的距离
//clientLeft border内容区域到边框左边的距离
//clientWidth width + 2 * padding 内容区+左右paddng值 可视宽度
//clientHeight height + 2 * padding 内容区+上下paddng值 可视高度
var oBox = document.getElementsByClassName('box')[0]
console.log(oBox.clientTop);
console.log(oBox.clientLeft);
console.log(oBox.clientWidth);
console.log(oBox.clientHeight);
</script>
</html>
5.屏幕的可视区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="box"></div>
<button class="btn">变化box</button>
</body>
<script type="text/javascript">
window.onload = function (ev) {
//监听屏幕可视化区域的宽高,(好像可以监听dom元素的参数)
window.onresize = function (ev2) {
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
}
}
</script>
</html>
6.offset占位系列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>offset</title>
</head>
<body>
<div style="position: relative">
<div id="box" style="position:absolute;top: 30px;left:30px;width: 200px;height:200px;border:1px solid red;padding:10px;margin: 10px; "></div>
</div>
</body>
<script type="text/javascript">
var box = document.getElementById('box');
window.onload = function (ev) {
//占位宽高 Top Left
/*
offsetTop:如何盒子没有设置定位 到浏览器顶部的距离,如果盒子设置定位，就父盒子为基准
offsetLeft:如何盒子没有设置定位 到浏览器左部的距离,如果盒子设置定位，就父盒子为基准
offsetWidth offsetHeight：内容 + padding + border
*/
console.log(box.offsetTop);
console.log(box.offsetLeft);
console.log(box.offsetHeight);
console.log(box.offsetWidth);
}
</script>
</html>
7.scrool滚动系列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scroll</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body style="width: 2000px;height: 2000px">
<div style="height:200px;background-color: red "></div>
<div style="height:200px;background-color: green "></div>
<div style="height:200px;background-color: blue "></div>
<div style="height:200px;background-color: yellow "></div>
<div style="height:200px;background-color: gray "></div>
<div id='scroll' style="width: 200px;height: 200px;border:1px solid red;overflow: auto;padding: 10px 0 0 0;margin: 10px 0 0 0">
路飞学城 路飞学城 路飞学城 路飞学城 路飞学城 路飞学城
路飞学城 路飞学城 路飞学城 路飞学城 路飞学城 路飞学城
路飞学城 路飞学城 路飞学城 路飞学城 路飞学城 路飞学城
路飞学城 路飞学城 路飞学城 路飞学城 路飞学城 路飞学城
路飞学城 路飞学城 路飞学城 路飞学城 路飞学城 路飞学城
路飞学城 路飞学城 路飞学城 路飞学城 路飞学城 路飞学城
路飞学城 路飞学城 路飞学城 路飞学城 路飞学城 路飞学城
路飞学城 路飞学城 路飞学城 路飞学城 路飞学城 路飞学城
路飞学城 路飞学城 路飞学城 路飞学城 路飞学城 路飞学城
</div>
</body>
<script type="text/javascript">
//scroll 滚动
window.onload = function () {
//实时监听滚动事件
window.onscroll = function (ev) {
// document.documentElement.scrollTop; //离浏览器顶部 上
// document.documentElement.scrollLeft; //离浏览器左部 左
// document.documentElement.scrollWidth; //可视内容宽
// document.documentElement.scrollHeight; //可视内容高
};
var s = document.getElementById('scroll');
s.onscroll = function (ev) {
s.scrollTop; //离浏览器顶部 上
s.scrollLeft; //离浏览器左部 左
s.scrollWidth; //可视内容宽
console.log(s.scrollHeight); //可视内容高(比如里面的文字) 包含padding 不包含margin
};
}
</script>
</html>
