前端開發之javascript BOM篇


 

主要內容:

1、BOM輸出

2、BOM的對象

3、client的相關屬性

4、offset的相關屬性

5、scroll的相關屬性

 

前情提要: 何謂BOM?

  所謂 BOM 指的就是瀏覽器對象模型 Browser Object Model,它的核心就是瀏覽器。

 

一、BOM輸出

  主要輸出方式有以下幾種:

   

 

二、BOM的對象

  1、open和close方法 --- 打開和關閉網頁的幾種方法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>open_close方法</title>
</head>
<body>
    <!--open打開方法-->
    <button onclick="window.open('https://www.cnblogs.com/schut/')">暮光微涼</button>

    <button onclick="openHtml()">點擊打開</button>

    <button>打開博客</button>



    <!--close關閉方法,不需要參數,直接關閉當前網頁-->
    <button onclick="window.close()">關閉頁面</button>

    <button>關閉頁面</button>


</body>
    <script type="text/javascript">
        // open方法
        function openHtml(){ window.open("https://www.cnblogs.com/schut/") } var openBtn = document.getElementsByTagName('button')[2]; openBtn.onclick = function(){ // open('https://www.cnblogs.com/schut/') // 此處window可省略
 open('about:blank',"_self") // 打開一個空頁面
 } // close方法
        var closeBtn = document.getElementsByTagName('button')[4]; closeBtn.onclick = function(){ if(confirm('是否確認關閉?')){ close(); } } </script>
</html>
View Code

  2、BOM的其他對象方法 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BOM的其他對象</title>
</head>
<body>

</body>
    <script type="text/javascript">
        // 返回瀏覽器的用戶設備信息
 console.log(window.navigator.userAgent); // location方法
 console.log(window.location); window.location.href = 'https://www.cnblogs.com/schut/'; //全局刷新(盡量少用) ===》 局部刷新 // window.location.reload(); // 不間斷全局刷新
 setTimeout(function(){ window.location.reload(); },3000) // 每隔3秒刷新一次
    </script>
</html>

 

三、client的相關屬性

  1、client的相關屬性有如下幾個: 

clientTop        上邊框的高度

clientLeft        左側邊框的寬度

clientWidth      內容區域+左右padding(即可視寬度)

clientHeight      內容區域+上下padding(即可視高度)

  實例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>client相關屬性解讀</title>
    <style type="text/css"> *{ padding:0; margin:0;
        } .box{ width:200px; height:150px; margin:30px 10px; position:absolute; border:5px solid royalblue; padding:10px 20px;

        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
    <script type="text/javascript">
        var Box = document.getElementsByClassName('box')[0]; console.log(Box.clientTop) // 5 對應上邊框的高度
 console.log(Box.clientLeft) // 5 對應左側邊框的寬度
 console.log(Box.clientWidth) // 240 內容區域+左右padding 可視寬度
 console.log(Box.clientHeight) // 170 內容區域+上下padding 可視高度
    </script>
</html>
View Code

  2、屏幕的可視區域

    注意:此處的屏幕可視區域指的是瀏覽器中頁面內容的可視區。

  實例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>屏幕的可視區域</title>
</head>
<body>

</body>
        <script type="text/javascript"> window.onload = function () { // onload表示加載
 console.log("屏幕可視寬度:",document.documentElement.clientWidth); console.log("屏幕可視高度:",document.documentElement.clientHeight); } window.onresize = function () { // 實時顯示屏幕可視區域大小
 console.log("屏幕實時可視寬度:",document.documentElement.clientWidth); console.log("屏幕實時可視高度:",document.documentElement.clientHeight); } </script>
</html>

 

四、offset的相關屬性

  offset的相關屬性有以下幾個: 

offsetTop :如果盒子沒有設置定位,到瀏覽器的頂部距離;設置定位后,以父盒子的位置為基准

offsetLeft :如果盒子沒有設置定位,到瀏覽器的左部距離;設置定位后,以父盒子的位置為基准

offsetWidth:內容+padding+border

offsetHeight:內容+padding+border

  實例:  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>offset系列</title>
    <style type="text/css"> #box1{ position:relative; // 設置定位 background-color: #b3d7ff;
        } #box2{ width:200px; height:200px; border:1px solid green; padding:10px; margin:10px; position:absolute; // 設置定位 background-color: #b1dfbb;
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">

        </div>
    </div>
</body>
    <script type="text/javascript"> window.onload = function(){ var box = document.getElementById('box2'); console.log(box.offsetTop); // 未設置定位:10 設置定位后 :10
 console.log(box.offsetLeft); // 未設置定位:18 設置定位后 :10
 console.log(box.offsetWidth);// 未設置定位:222 設置定位后 :222
 console.log(box.offsetHeight);// 未設置定位:222 設置定位后 :222
 } </script>
</html>

 

五、scroll相關屬性

  scroll 的相關屬性有以下幾個:  

scrollTop        距離瀏覽器內容區頂端的距離

scrollLeft        距離瀏覽器內容區左端的距離

scrollWidth        內容的寬度+padding(注意:不包含邊框)

scrollHeight        內容的高度+padding(注意:不包含邊框)

  實例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scroll系列</title>
    <style type="text/css"> *{ padding:0; margin:0;
        }

    </style>
</head>
<body>
    <div style="width:100%;height:1200px;">
        <div style="height:200px;background-color: palevioletred;"></div>
        <div style="height:200px;background-color: orange;"></div>
        <div style="height:200px;background-color: gold;"></div>
        <div style="height:200px;background-color: greenyellow;"></div>
        <div style="height:200px;background-color: cornflowerblue;"></div>
        
        <div id='scroll' style="height:150px;width:300px;border:3px solid mediumspringgreen;overflow: auto">
            <p>我是一個小標簽</p>
            <p>我是一個小標簽</p>
            <p>我是一個小標簽</p>
            <p>我是一個小標簽</p>
            <p>我是一個小標簽</p>
            <p>我是一個小標簽</p>
            <p>我是一個小標簽</p>
            <p>我是一個小標簽</p>
            <p>我是一個小標簽</p>
            <p>我是一個小標簽</p>
            <p>我是一個小標簽</p>
            </div>
    </div>
</body>
    <script type="text/javascript"> window.onload = function(){ // 實施監聽滾動事件
 window.onscroll= function(){ // 瀏覽器頁面的滾動監聽
 console.log('------------------------------------'); console.log(""+document.documentElement.scrollTop); console.log(""+document.documentElement.scrollLeft); console.log(""+document.documentElement.scrollWidth); console.log(""+document.documentElement.scrollHeight); } // 盒子內容滾動監聽
            var s = document.getElementById('scroll'); s.onscroll = function(){ // scrollHeight:內容的高度+padding(注意:不包含邊框)
 console.log('----------------------'); console.log(''+s.scrollTop); console.log(''+s.scrollLeft); console.log(''+s.scrollWidth); console.log(''+s.scrollHeight); } } </script>
</html>

 

回頂部↑


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM