BOM详解（整个BOM架构体系）

其他 2021-01-31 10:15:14 阅读次数: 0

**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**

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

效果：

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_37805832/article/details/109522229
bom
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022