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:52332console.log(location.hostname);//主机名 localhostconsole.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);//可视宽度  110console.log(o.clientHeight);//可视高度  110console.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);//130console.log(o.offsetHeight);//130console.log(o.offsetLeft);//100console.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);//浏览器窗口发生改变时触发};

BOM、body的位置属性相关推荐

javascript原生事件句柄、BOM、DOM对象属性方法总结
javascript原生事件句柄.BOM.DOM对象属性方法总结 JS事件句柄事件句柄类型说明 onabort 事件句柄图像加载被中断 onblur 事件句柄元素失去焦点 onfocus 事 ...
【Android 应用开发】Android 组件位置坐标属性 ( 组件位置属性 | 父容器坐标系坐标 | 窗口坐标系坐标 | 屏幕坐标系坐标 | 触摸坐标 )
文章目录 I . View 坐标体系总结 II . View 组件的 left , top , right , bottom 父容器相对位置 III . View 组件的 x , y , transl ...
python legend位置_关于matplotlib-legend 位置属性 loc 使用说明
在使用matplotlib画图时,少不了对性能图形做出一些说明和补充.一般情况下,loc属性设置为'best'就足够应付了 plt.legend(handles = [l1, l2,], labels ...
JQuery框架2.位置属性|筛选方法|事件
1.位置属性 jquery的css position获取匹配元素相对父元素的偏移位置:offset获取匹配元素在当前视口的相对偏移,返回的对象包含两个整型属性:top 和 left $("p ...
three.js 坐标系、camera位置属性、点、线、面
three.js 坐标系.camera位置属性.点.线.面知识补充:坐标系右手坐标系图中右边那个手对应的坐标系,就是右手坐标系.在Threejs中,坐标和右边的坐标完全一样.x轴正方向向右,y轴 ...
html的标签位置属性（学习笔记）
div:定义位置有两种方式:一种是使用相对位置,一是使用绝对位置. 绝对定位有两个属性:left和top,分别是距离网页左边和网页顶部的绝对位置.借助style属性,按照如下的格式进行设置: styl ...
JS中offsetTop、clientTop、scrollTop、offsetTop各位置属性详解（含示例图）
这里是javascript中制作滚动代码的常用属性页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; wi ...
CSS基础——position位置属性
relative:相对布局,相对自身进行偏移,并且保留原有位置. absolute:绝对布局,相对容器进行偏移,不保留原有位置.注意:容器必须设置position为relative或absolute, ...
VB6中ScaleMode位置属性特性的实验及总结.
从上边的表格可以看出: ActiveX控件的内部属性中,UserControl的Width和Height总是以Twips为单位的. 而UserControl.Extender的Top和Left属性的单 ...

BOM、body的位置属性

BOM、body的位置属性

一、BOM

1.window对象的方法

2.location对象

3.history历史记录对象

4、Navigator

二.body的位置属性

1.client系列

2.offset系列

3.scroll系列

BOM、body的位置属性相关推荐

最新文章

热门文章