BOM大详解

贵哥的编程之路

发布于 2020-11-06 08:02:10

4470

发布于 2020-11-06 08:02:10

文章被收录于专栏：用户7873631的专栏用户7873631的专栏

**~~BOM最详解：~~ **

课程目标：

了解： 1.BOM架构全局对象的使用. 2.根据案例来讲解 3：大总结。 4;效果.

1.什么是BOM？

和浏览器进行交互的对象架构就是BOM.

2.Navigator

课程目标： 了解怎么使用Navigator。 形式： window.navigator.属性。代表获取浏览器的各种信息。

作用; // Navigator: 代表当前浏览器的信息, 通过Navigator我们就能判断用户当前是什么浏览器 源代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<script>
		var agent=window.navigator.userAgent;
		if(/chrome/i.test(agent))
		{
             alert("当前浏览器谷歌");
		}
		else if(/firefox/i.test(agent))
		{
			 alert("当前浏览器火狐");
		}
		else if(/msie/i.test(agent))
		{
              alert("当前浏览器低级ie");
		}
	</script>
</body>
</html>

总结:

1:test()函数里面的内容是否与某个模式/内容/匹配.

2:window.navigator.userAgent代表用户正在使用的浏览器。

效果：

3：Location

课程目标： 了解怎么使用Location。 形式： window.location.属性；代表一种功能。比如获取设置功能之类的.

1获取 1.1代码：

1.2效果：

2设置 2.1代码：

2.2效果：

3刷新 3.1代码：

3.2效果：

4强制刷新: 4.1代码

4.2效果：

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
<button id="btn1">获取</button>
<button id="btn2">设置</button>
<button id="btn3">刷新</button>
<button id="btn4">强制刷新</button>
<script type="text/javascript">
	 let oBtn1 = document.querySelector("#btn1");
    let oBtn2 = document.querySelector("#btn2");
    let oBtn3 = document.querySelector("#btn3");
    let oBtn4 = document.querySelector("#btn4");
    //获取
    oBtn1.onclick=function()
    {
    	console.log(window.location.href);
    }
    //设置
    oBtn2.onclick=function()
    {
    	window.location.href="http://www.it666.com";
    }//刷新
    oBtn3.onclick=function()
    {
    	window.location.reload();
    }
    //强制刷新
    oBtn4.onclick=function()
    {
    	window.location.reload(true);
    }
</script>
</body>
</html>

5.History（两个页面）

课程目标： 了解怎么使用 History 形式： window.history.属性. 代表种功能;前进后退… 作用：浏览器的历史信息, 通过History来实现刷新/前进/后退

源代码：

1.html:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
<h1>我是第一个界面</h1>
<button id="btn1">前进</button>
<button id="btn2">刷新</button>
<a href="./2.html">新的界面222</a>
<script type="text/javascript">
 let a=document.querySelector("#btn1");
 let b=document.querySelector("#btn2");
 //点击去下一个页面.
 a.onclick=function()
 {
 	// 相同作用window.history.forward();
 	window.history.go(1);
 }
 //点击刷新
 b.onclick=function()
 {
 	//如果给go方法传递0, 就代表刷新
 	window.history.go(0);
 }
</script>
</body>
</html>

2.html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<h2>我是第2222个页面</h2>
	<button id="btn1">后退</button>
	<script type="text/javascript">
		let c=document.querySelector("#btn1");
		//点击去上一个页面
		c.onclick=function()
		{
			window.history.go(-1);
			//相同作用：window.history.back();
		}
	</script>
</body>
</html>

效果：1.html

2.html

总结:

history：代表页面的切换.

6：通过getComputedStyle来获取宽高

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{padding: 0px;margin: 0px;}
		div
		{
			width: 400px;
			height: 400px;
			background: url(./images/ad1.jpg);
			padding: 50px;
			border: 5px dashed blue;
			background-clip: content-box;
		}
	</style>
</head>
<body>
	<div id="box" style="width: 500px"></div>
	<script type="text/javascript">
		var q=document.getElementById("box");
		var style=getComputedStyle(q);
		console.log(style.width);
		console.log(style.height);
		
	</script>
</body>
</html>

总结;

1:getComputedStyle只获取content的宽高. 2:只是获取. 3:行内的 css的设置的宽高。 4：ie9以上才支持

效果：

7:通过currentStyle属性获取宽高

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{padding: 0px;margin: 0px;}
		div
		{
			width: 400px;
			height: 400px;
			background: url(./images/ad1.jpg);
			padding: 50px;
			border: 5px dashed blue;
			background-clip: content-box;
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<script type="text/javascript">
		var q=document.getElementById("box");
		var style1=q.currentStyle;
		console.log(style1.height);
		console.log(style1.width);

	</script>
</body>
</html>

总结：

1：IE9及以上才支持. 2:只是获取. 3:行内的 css的设置的宽高。 4:1:getComputedStyle只获取content的宽高.

效果：

8.通过style属性获取宽高

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{padding: 0px;margin: 0px;}
		div
		{
			width: 400px;
			height: 400px;
			background: url(./images/ad1.jpg);
			padding: 50px;
			border: 5px dashed blue;
			background-clip: content-box;
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<script type="text/javascript">
		var q=document.getElementById("box");
		q.style.width="300px";
		q.style.height="400px";
		console.log(q.style.width);
		console.log(q.style.height);

	</script>
</body>
</html>

总结：

1：支持获取+设置 2：兼容所有的浏览器 3：只能获取行内的.

效果：

9.offsetWidth和offsetHeight

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{padding: 0px;margin: 0px;}
		div
		{
			width: 400px;
			height: 400px;
			background: url(./images/ad1.jpg);
			padding: 50px;
			border: 5px dashed blue;
			background-clip: content-box;
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<script type="text/javascript">
		var q=document.getElementById("box");
		console.log(q.offsetWidth);
		console.log(q.offsetHeight);
	</script>
</body>
</html>

总结： 4.1获取的宽高包含边框 + 内边距 + 元素宽高 4.2即可以获取行内设置的宽高也可以获取CSS设置的宽高 4.3只支持获取, 不支持设置 4.4高级低级浏览器都支持

效果：

大总结：

1.getComputedStyle/currentStyle/style 获取的宽高不包括边框和内边距 2.offsetWidth/offsetHeight 获取的宽高包括边框和内边距 3.getComputedStyle/currentStyle/offsetXXX 只支持获取, 不支持设置 4.style 可以获取, 也可以设置 5.getComputedStyle/currentStyle/offsetXXX 即可以获取行内,也可以获取外链和内联样式 6.style 只能获取行内样式

10：获取标签位置的方式

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		 *{
            margin: 0;
            padding: 0;
        }
        #father{
            width: 200px;
            height: 200px;
            margin-top: 100px;
            margin-left: 100px;
            background: blue;
            overflow: hidden;
            position: relative;
        }
        #son{
            width: 100px;
            height: 100px;
            margin-top: 100px;
            margin-left: 100px;
            background: red;
        }
	</style>
</head>
<body>
	<div id="father">
    <div id="son"></div>
</div>
	<script type="text/javascript">
		var q=document.getElementById("son");
		q.onclick=function()
		{
				console.log(q.offsetLeft);
		console.log(q.offsetTop);
		}
	
	</script>
</body>
</html>

总结：

1：offsetLeft/Top为元素边框外侧到父元素边框内侧的距离

效果：

11.offsetParent

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{
            margin: 0;
            padding: 0;
        }
        .grand-father{
            width: 300px;
            height: 300px;
            margin-top: 100px;
            margin-left: 100px;
            background: deeppink;
            overflow: hidden;
            position: relative;
        }
        .father{
            width: 200px;
            height: 200px;
            margin-top: 100px;
            margin-left: 100px;
            background: blue;
            overflow: hidden;
            position: relative;
        }
        .son{
            width: 100px;
            height: 100px;
            margin-top: 100px;
            margin-left: 100px;
            background: red;
        }
	</style>
</head>
<body>
	<div class="grand-father">
    <div class="father">
        <div class="son"></div>
    </div>
</div>
<script type="text/javascript">
	 let oSDiv = document.querySelector(".son");
    oSDiv.onclick = function () {
        console.log(oSDiv.offsetParent);
    }
</script>
</body>
</html>

总结：

1:找祖先元素是定位的，如果都没有，body. 2:获取的是标签.

效果：

12.client

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            padding: 50px;
            border: 50px solid #000;
            background: red;
            background-clip: content-box;/*内容外的裁减掉.*/
        }
    </style>
</head>
<body>
	<div id="box"></div>
<script type="text/javascript">
	let oDiv = document.querySelector("div");
	console.log(oDiv.clientWidth);
	console.log(oDiv.clientHeight);
	console.log(oDiv.clientLeft);
	console.log(oDiv.clientTop);
</script>
</body>
</html>

总结：

1：clientLeft/clientTop: 相当于border-left/top的值 2：宽度/高度+padding 效果：

13.scroll属性:

源代码;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            padding: 50px;
            border: 50px solid #000;
            background: red;
            background-clip: content-box;
            color: deepskyblue;
            overflow: auto;
        }
    </style>
</head>
<body>
	<div id="box">
    我是内容<br/>
    我是内容<br/>
    我是内容<br/>
    我是内容<br/>
    我是内容<br/>
    我是内容<br/>
    我是内容<br/>
    我是内容<br/>
    我是内容<br/>
    我是内容<br/>
    我是内容<br/>
    我是内容<br/>
    我是内容<br/>
    我是内容<br/>
</div>
<script type="text/javascript">
	 let oDiv = document.querySelector("div");
     console.log(oDiv.scrollWidth);
     console.log(oDiv.scrollHeight);
	  oDiv.onscroll = function () {
        console.log("oDiv.scrollTop="+oDiv.scrollTop);
    }
</script>
</body>
</html>

总结：

**1.内容没有超出元素范围时**
*scrollWidth: = 元素宽度 + 内边距宽度 == clientWidth
scrollHeight: = 元素高度 + 内边距的高度 == clientHeight*

 **2.内容超出元素范围时**
*scrollWidth: = 元素宽度 + 内边距宽度 + 超出的宽度
scrollHeight: = 元素高度 + 内边距的高度 + 超出的高度*


**3.scrollTop / scrollLeft**

指的是滚动条相对于其顶部的偏移。

效果：

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-11-05 ，如有侵权请联系 cloudcommunity@tencent.com 删除

node.js

html

css

javascript

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

BOM大详解

BOM大详解

课程目标：

1.什么是BOM？

2.Navigator

3：Location

5.History（两个页面）

总结:

6：通过getComputedStyle来获取宽高

总结;

效果：

7:通过currentStyle属性获取宽高

总结：

效果：

8.通过style属性获取宽高

源代码：

总结：

效果：

9.offsetWidth和offsetHeight

效果：

大总结：

10：获取标签位置的方式

源代码：

总结：

效果：

11.offsetParent

源代码：

总结：

效果：

12.client

源代码：

总结：

13.scroll属性:

源代码;

总结：

效果：

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐