BOM、body的位置属性
一、BOM
- BOM，browser object model 浏览器对象模型。用来实现js与浏览器的交互
- BOM的核心对象是window，是Global对象(全局对象，顶级对象)。
- 全局变量、函数、对象都会自动成为window对象的属性、方法。document对象也是window对象的属性
- 全局变量自动成为window对象的属性
-
var a=10;//全局变量会被追加为window对象的属性 console.log(a); console.log(window.a);//a变为window对象一个属性 - 函数自动成为window对象的方法
-
var a=10;//全局变量会被追加为window对象的属性 console.log(a); console.log(window.a);//a变为window对象一个属性
1.window对象的方法
- alert() 警告框
- prompt() 输入框
确定按钮 返回输入框内容
取消按钮 返回null - confirm() 确认框
确定 返回true
取消 返回false - open() 打开窗口
参数：
第一个参数：地址
第二个参数：打开模式 _blank（空白页）_self （当前页）
第三个参数：打开的窗口的样式
open('http://www.baidu.com','_blank',"width=300px,height=300px,left=300px,top=200px");
- close() 关闭窗口
btn.onclick=function(){
close();
}
2.location对象
该对象中包含了与URL相关的信息
- href url地址
- protocol 协议
- host/hostname 主机名
console.log(location.protocol);
//协议 http:
console.log(location.host);
//主机名 localhost:52332
console.log(location.hostname);
//主机名 localhost
console.log(location.href);
//url地址 http://localhost:52332/2.window.html
- port 端口号
- search 查询字符串
3.history历史记录对象
- back()
-
<button>后退</button> document.querySelector('button').onclick=function(){ // history.back();//回到历史列表中的上一个页面 history.go(-1);//回到历史列表中的上一个页面 } history.back()与history.go(-1)等价 - forward()
-
<button>前进</button> document.querySelector('#btn3').onclick=function(){ // history.forward();//回到历史列表中的下一个页面 history.go(1);//回到历史列表中的下一个页面 }; history.forward()与history.go(1)等价 - go()
参数数字 1或-1，前进和后退
4、Navigator
该对象中保存了与浏览器相关的信息
console.log(window.navigator.appName);
//返回浏览器的名称
console.log(window.navigator.appVersion);
//返回浏览器的平台和版本信息
console.log(navigator.cookieEnabled);
//返回指明浏览器中是否启用 cookie 的布尔值
console.log(window.navigator.platform);
//返回运行浏览器的操作系统平台
二.body的位置属性
1.client系列
- 元素可视宽高
clientWidth width+padding
clientHeight height+padding - 屏幕可视区域的宽高
document.documentElement.clientWidth
document.documentElement.clientHeight - 上边框和左边框的大小：
clientTop
clientLeft
<style>
div {
width: 100px;
height: 100px;
border: 10px solid gray;
background: greenyellow;
padding: 5px;
margin-left: 10px;
}
</style>
<script>
var o=document.querySelector('div');
console.log(o.clientWidth);
//可视宽度 110
console.log(o.clientHeight);
//可视高度 110
console.log(document.body.clientHeight);
//130 被内容撑起来的高度，不包括外边距
console.log(document.body.clientWidth);
//1350 被内容撑起来的宽度，不包括外边距
//可视区域的宽高
console.log(document.documentElement.clientHeight);
//可视屏幕的高度
console.log(document.documentElement.clientWidth);
//1366 可视屏幕的宽度
console.log(o.clientLeft);//10 上边框的大小
console.log(o.clientTop);//10 左边框的大小
</script>
2.offset系列
- 元素占位的大小
offsetWidth width+padding+border
offsetHeight height+padding+border - 元素在页面中的位置
offsetLeft:元素到定位的父元素的left值，若没有定位，则到body的left
offsetTop:元素到定位的父元素的top值，若没有定位，则到body的top值
<style>
div {
width: 100px;
height: 100px;
border: 10px solid gray;
background: greenyellow;
padding: 5px;
position: absolute;
left: 100px;
top: 50px;
}
</style>
<script>
console.log(o.offsetWidth);//130
console.log(o.offsetHeight);//130
console.log(o.offsetLeft);//100
console.log(o.offsetTop);//50
</script>
3.scroll系列
- 滚动事件
window.onscroll - 属性
scrollTop 被卷去的高
scrollLeft 被卷去的宽
scrollWidth 滚动区域的宽度(实际内容宽)
scrollHeight 滚动区域的高度(实际内容高) - 页面滚动的高度
document.documentElement.scrollTop
document.body.scrollTop - 4 回到顶部案例
<style>
body{
height: 2000px;
background-image:linear-gradient(red,yellow,teal);
}
button{
position:fixed;
right:0;
bottom:0;
display:none;
}
</style>
</head>
<body>
<button>回到顶部</button>
<script>
var btn = document.querySelector("button");
window.onscroll = function(){
var h = document.documentElement.scrollTop||document.body.scrollTop;
console.log(h);
if(h<=800){//被卷去的距离
btn.style.display = "none";
}else{
btn.style.display = "block";
}
}
btn.onclick = function(){//回到顶部
var h = document.documentElement.scrollTop||document.body.scrollTop;
var timer = setInterval(function(){
h -= 10;
if(h <= 0){
h = 0;
clearInterval(timer);
}
document.documentElement.scrollTop = h;
},10);
}
</script>
</body>
- 懒加载
<style>
img {
height: 480px;
width: 830px;
}
</style>
</head>
<body>
<img _src="http://www.ujiuye.tech:3000/image_source/home_loop_img/32407805826e4adbb35d03cb82afd0e8.png" alt="">
<img _src="http://www.ujiuye.tech:3000/image_source/home_loop_img/158217880112765841.jpg" alt="">
<img _src="http://www.ujiuye.tech:3000/image_source/home_loop_img/158218554377624177.jpg" alt="">
<img _src="http://www.ujiuye.tech:3000/image_source/home_loop_img/158218605663337136.jpg" alt="">
<img _src="http://www.ujiuye.tech:3000/image_source/home_loop_img/158224870698497558.jpg" alt="">
<img _src="http://www.ujiuye.tech:3000/image_source/home_loop_img/158224891879191249.jpg" alt="">
<img _src="http://www.ujiuye.tech:3000/image_source/home_loop_img/158225066085716872.jpg" alt="">
<img _src="http://www.ujiuye.tech:3000/image_source/home_loop_img/158233428702116474.jpg" alt="">
<script>
var imgs = document.querySelectorAll('img');//获取所有图片
var viewHeight = document.documentElement.clientHeight || document.body.clientHeight;
//获取视口的高度
run();
function run(){
var jHeight = document.documentElement.scrollTop || document.body.scrollTop;
//获取卷去的高度
for(var i = 0;i < imgs.length;i++){
var imgHeight = imgs[i].offsetTop;//获取图片到顶部的距离
// console.log(imgHeight);
console.log(jHeight);
if(imgHeight <= viewHeight+jHeight){
imgs[i].src = imgs[i].getAttribute('_src');
}
}
}
window.onscroll = function(){
run();
}
</script>
</body>
- resize事件
window.onresize = function () {
console.log(1);
//浏览器窗口发生改变时触发
};
414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
