您当前的位置： 首页 >  架构

暂无认证

  • 4浏览

    0关注

    92582博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

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

发布时间：2020-11-05 22:39:23 ，浏览量：4

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

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

效果：

在这里插入图片描述

关注
打赏
1653961664
查看更多评论

最近更新

热门博客

[ 申请 ]友情链接：

ClashX教程 绘画宝宝 配音宝宝
立即登录/注册

微信扫码登录

0.4964s