BOM对象·

最新推荐文章于 2022-02-22 19:40:30 发布

小涛涛啊！

最新推荐文章于 2022-02-22 19:40:30 发布

阅读量1.6k

点赞数

分类专栏： js内容知识文章标签： js

本文链接：https://blog.csdn.net/t5555666/article/details/108738985

版权

js内容知识专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1：什么是bom？

bom就是浏览器对象！

简单来说，就是学习一些操作浏览器窗口的方法和属性等！

2：window对象是BOM的核心，也是BOM里面的顶级对象。

window对象也有很多内置方法（alert(1)）

window对象既是ECMAScript规范中的Global对象，也是BOM中的顶级对象；

document对象既是BOM对象的一个属性，也是DOM模型中的顶级核心

location对象既是window对象的属性，同时也是dom对象的属性。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一：

3: open(‘路径’，‘打开的方式’,‘设置属性’) 打开窗口
4: close() 关闭窗口
举例：

_self	当前窗口打开

_blank  新窗口打开

open('img/1.jpg','_self','width=400,height=400,top=100,left=100')

<body>
		<button οnclick="btn()">打开</button>
		<button οnclick="cols()">关闭</button>
		
	</body>
	<script type="text/javascript">
		function btn(){
			open('img/1.jpg','_blank','width=300,height=300,top=300,left=300')
		}
		function cols(){
			colse();
		}
	</script>

5: moveTo(x,y) 窗口移动到的位置窗口移动的尺寸 moveBy(x,y)
6: 窗口宽高尺寸 resizeTo(x,y) 窗口宽高变化尺寸 resizeBy(x,y)

<body>
		<button οnclick="fff1()">移动moveto</button>
		<button οnclick="fff2()">移动moveBy</button>
		<button οnclick="fff3()">改变窗口大小resizeTo</button>
		<button οnclick="fff4()">改变窗口大小resizeBy</button>
		<button οnclick="btn2()">后退记录</button>
	</body>
	<script type="text/javascript">
		function fff1 () {
			window.moveTo(500,300);//使得新窗口的位置放在x=500px，y=300px的位置
		}
		function fff2 () {
			window.moveBy(10,20);//使得窗口的位置水平移动10px，垂直移动20px
		}	
		function fff3 () {
			window.resizeTo(200,400);//窗口改变大小：到指定大小
		}
		function fff4 () {
			window.resizeBy(-20,-40);//窗口改变大小：增加或者减少指定数值
		}
		function btn2(){
			window.history.go(-1)
		}
	</script>

7: location 对象

   location对象提供了与当前窗口中加载的文档有关的信息以及一些导航功能;

<script type="text/javascript">
		document.write(window.location.href+'<br>')
		document.write(window.location.host+'<br>')
		document.write(window.location.hostname+'<br>')
		document.write(window.location.port+'<br>')
		document.write(window.location.pathname+'<br>')
		document.write(window.location.protocol+'<br>')
	</script>

8: navigator 对象

      navatior对象 用来描述浏览器本身，包括浏览器的名称、版本、语言、系统平台、用户特性字符串等信息.

<script type="text/javascript">
		document.write(window.navigator.appVersion+'<br>')
		document.write(window.navigator.userAgent+'<br>')
		document.write(window.navigator.platform+'<br>')
		document.write(window.navigator.appCodeName+'<br>')
		
</script>

9: history对象

history 对象保存着从窗口被打开起的历史记录，每个浏览器窗口、标签页、框架都有自己的 history 对象。

<body>
		<a href="2移动窗口方法.html">点击</a>
		<button οnclick="btn1()">前进记录</button>
		
	</body>
	<script type="text/javascript">
		function btn1(){
			window.history.go(1)
		}
		
		
	</script>

10: 获取浏览器的可视窗口的宽高兼容写法:

var h=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;

var w=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;

<script type="text/javascript">
//		document.write(window.innerHeight)  
//		document.write(window.innerWidth)
//		document.write(document.documentElement.clientHeight)
//		document.write(document.documentElement.clientWidth)
//		document.write(document.body.clientHeight)
//		document.write(document.body.clientWidth)
		
//		获取浏览器的可视窗口的宽高兼容写法:
		var h=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
		var w=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;

	</script>

11：屏幕宽高

document.write("`<br />`"+window.screen.height);//显示屏的高度

document.write("`<br />`"+window.screen.width);//显示屏的宽度

document.write("`<br />`"+window.screen.availHeight);//显示屏的可用高度

document.write("`<br />`"+window.screen.availWidth);//显示屏的可用宽度

<script type="text/javascript">
		document.write("<br />"+window.screen.height);//显示屏的高度
		document.write("<br />"+window.screen.width);//显示屏的宽度
		document.write("<br />"+window.screen.availHeight);//显示屏的可用高度
		document.write("<br />"+window.screen.availWidth);//显示屏的可用宽度
</script>

12：获取滚动条的高

document.documentElement.scrollTop

document.body.scrollTop

兼容写法：

var sc = document.documentElement.scrollTop + document.body.scrollTop;

<body style="height:2000px;">
	</body>
	<script type="text/javascript">
		var h=document.documentElement.scrollTop||document.body.scrollTop;
		console.log(h)
	</script>

小涛涛啊！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
BOM对象·

1：什么是bom？bom就是浏览器对象！简单来说，就是学习一些操作浏览器窗口的方法和属性等！2：window对象是BOM的核心，也是BOM里面的顶级对象。window对象也有很多内置方法（alert(1)）window对象既是ECMAScript规范中的Global对象，也是BOM中的顶级对象；document对象既是BOM对象的一个属性，也是DOM模型中的顶级核心location对象既是window对象的属性，同时也是dom对象的属性。全局变量是 window 对象的属性。
复制链接

扫一扫

专栏目录