前端基本功：JS(十)client 家族

1、client 家族

client 可視區(qū)域

offsetWidth: width + padding + border （披著羊皮的狼）
clientWidth： width + padding 不包含border
scrollWidth: 大小是內(nèi)容的大小

client 可視區(qū)域
1/檢測屏幕寬度(可視區(qū)域)

ie9及其以上的版本
window.innerWidth

標準模式
document.documentElement.clientWidth

怪異模式
document.body.clientWidth

封裝可視區(qū)域大小的函數(shù):
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>
<script>
    function client() {
        if(window.innerWidth != null)  // ie9 +  最新瀏覽器
        {
            return {
                width: window.innerWidth,
                height: window.innerHeight
            }
        }
        else if(document.compatMode === "CSS1Compat")  // 標準瀏覽器
        {
            return {
                width: document.documentElement.clientWidth,
                height: document.documentElement.clientHeight
            }
        }
        return {   // 怪異瀏覽器
            width: document.body.clientWidth,
            height: document.body.clientHeight

        }
    }

    document.write(client().width);
</script>
2/ window.onresize 改變窗口事件

昨天 window.onscroll = function() {} 屏幕滾動事件
今天 window.onresize = function() {} 窗口改變事件
onresize 事件會在窗口或框架被調(diào)整大小時發(fā)生

案例：改變頁面顏色

要求：
當我們的頁面寬度大于 960 像素的時候 頁面顏色是紅色
當我們的頁面寬度 大于 640 小于 960 頁面的顏色是 綠色
剩下的顏色是 藍色
案例源碼：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>
<script>
    function client() {
        if(window.innerWidth != null)  // ie9 +  最新瀏覽器
        {
            return {
                width: window.innerWidth,
                height: window.innerHeight
            }
        }
        else if(document.compatMode === "CSS1Compat")  // 標準瀏覽器
        {
            return {
                width: document.documentElement.clientWidth,
                height: document.documentElement.clientHeight
            }
        }
        return {   // 怪異瀏覽器
            width: document.body.clientWidth,
            height: document.body.clientHeight

        }
    }
    reSize();  // 頁面一加載先調(diào)用函數(shù) 一次
    window.onresize = reSize;  // 不帶括號，只要屏幕觸發(fā)，就調(diào)用 reSzie 函數(shù)
    //alert(reSize);
    function reSize() {
         var clientWidth = client().width;
         if(clientWidth > 960)
         {
             document.body.style.backgroundColor = "red";
         }
         else if(clientWidth > 640 )
         {
             document.body.style.backgroundColor = "green";
         }
         else
         {
             document.body.style.backgroundColor = "blue";
         }

    }
</script>

function fun() { 語句 }
fun 是函數(shù)體的意思

fun() 調(diào)用函數(shù) 的意思

function fun() {
    return 3;
}
console.log(fun);  // 返回函數(shù)體 function fun() { retrun 3}
console.log(fun()); // 調(diào)用函數(shù)  3  返回的是結(jié)果
fun();
window.onresize = 3
window.onresize = function fun() { retrun 3}

2、檢測屏幕寬度(分辨率)

clientWidth 返回的是 可視區(qū) 大小 瀏覽器內(nèi)部的大小
window.screen.width 返回的是我們電腦的 分辨率 跟瀏覽器沒有關(guān)系

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>
<script>
    document.write(window.screen.width);
</script>

3、簡單冒泡機制


事件冒泡: 當一個元素上的事件被觸發(fā)的時候，比如說鼠標點擊了一個按鈕，同樣的事件將會在那個元素的所有祖先元素中被觸發(fā)。這一過程被稱為事件冒泡；這個事件從原始元素開始一直冒泡到DOM樹的最上層。

順序:

E 6.0:
div -> body -> html -> document

其他瀏覽器:
div -> body -> html -> document -> window

不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload

1/阻止冒泡的方法

標準瀏覽器 和 ie瀏覽器

w3c的方法是event.stopPropagation()
proPagation 傳播 傳遞

IE則是使用event.cancelBubble = true
bubble 冒泡 泡泡 cancel 取消

兼容的寫法：

1  if(event && event.stopPropagation)
2          {
3              event.stopPropagation();  //  w3c 標準
4          }
5          else
6          {
7              event.cancelBubble = true;  // ie 678  ie瀏覽器
8   }
2/ 小案例 點擊空白處隱藏盒子

點擊空白處案例.gif

這個案例就是說，一個盒子，點擊除了自己之外的任何一個地方，就會隱藏。
原理：
點擊自己不算 ( 怎么證明我是我 點擊的這個對象id 正好和自己一樣 )
點擊空白處 就是點擊 document

3/判斷當前對象

火狐 谷歌 等 event.target.id
ie 678 event.srcElement.id
兼容性寫法：

ar targetId = event.target ? event.target.id : event.srcElement.id;
點擊空白處隱藏盒子的完整案例源碼：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            height:2000px;
        }
        #mask {
            width: 100%;
            height: 100%;
            opacity: 0.4;   /*半透明*/
            filter: alpha(opacity = 40);  /*ie 6半透明*/
            background-color: black;
            position: fixed;
            top: 0;
            left: 0;
            display: none;
        }
        #show {
            width: 300px;
            height: 300px;
            background-color: #fff;
            position: fixed;
            left: 50%;
            top: 50%;
            margin: -150px 0 0 -150px;
            display: none;
        }
    </style>
</head>
<body>
<a href="javascript:;" id="login">注冊</a>
<a href="javascript:;">登錄</a>
<div id="mask"></div>
<div id="show"></div>
</body>
</html>
<script>
    function $(id) { return document.getElementById(id);}
    var login = document.getElementById("login");
    login.onclick = function(event) {
        $("mask").style.display = "block";
        $("show").style.display = "block";
        document.body.style.overflow = "hidden";  // 不顯示滾動條
        //取消冒泡
        var event = event || window.event;
        if(event && event.stopPropagation)
        {
            event.stopPropagation();
        }
        else
        {
            event.cancelBubble = true;
        }
    }
    document.onclick = function(event) {

        var event = event || window.event;
        // alert(event.target.id);  // 返回的是點擊的某個對象的id 名字
        // alert(event.srcElement.id);
        var targetId = event.target ? event.target.id : event.srcElement.id;
        // 看明白這個寫法
        if(targetId != "show")  // 不等于當前點點擊的名字
        {
            $("mask").style.display = "none";
            $("show").style.display = "none";
            document.body.style.overflow = "visible"; // 顯示滾動條
        }
    }
</script>
4 /選中之后，彈出層

選定文字彈出層.gif

我們想，選中某些文字之后，會彈出一個彈出框
這個和 我們前面講過的拖拽有點不一樣。
拖拽 是拖著走。 拉著鼠標走 。
選擇文字： 這個彈出的層 選中的時候不出來，彈起鼠標的時候才出現(xiàn) 。
所以這個的事件一定是 onmouseup . 盒子顯示而且盒子的位置 再 鼠標的 clientX 和 clientY 一模一樣
用來判斷選擇的文字.

5/獲得用戶選擇內(nèi)容

window.getSelection() 標準瀏覽器
document.selection.createRange().text; ie 獲得選擇的文字

兼容性的寫法：

if(window.getSelection)
{
    txt = window.getSelection().toString();   // 轉(zhuǎn)換為字符串
}
else
{
    txt = document.selection.createRange().text;   // ie 的寫法
}
選定文字彈出層案例完整源碼：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 400px;
            margin:50px;
        }
        #demo {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
    </style>
</head>
<body>
<span id="demo"></span>
<div id="test">我要復制的文字我要復制的文字我要復制的文字我要復制的文字我要復制的文字我要復制的文字我要復制的文字我要復制的文字我要復制的文字我要復制的文字我要復制的文字我要復制的文字我要復制的文字我要復制的文字我要復制的文字我要復制的文字我要復制的文字我要復制的文字我要復制的文字我要復制的文字</div>
<div id="another">
    我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字
</div>
</body>
</html>
<script>
    function $(id) {return document.getElementById(id)}
    $("test").onmouseup = function(event) {
        var event = event || window.event;
        var x = event.clientX;  //  鼠標的x坐標
        var y = event.clientY;  //  同理
        var txt;  // 用于存貯文字的變量
        if(window.getSelection)  // 獲取我們選中的文字
        {
            txt = window.getSelection().toString();   // 轉(zhuǎn)換為字符串
        }
        else
        {
            txt = document.selection.createRange().text;   // ie 的寫法
        }
        if(txt)   // 所有的字符串都為真  "" 是假    所有的數(shù)字為真  0  為假
        {
            //看看有沒有選中的文字，沒有選中文字為空的，就不應(yīng)該執(zhí)行   點擊一下鼠標 就是空的
            showBox(x,y,txt);  // 調(diào)用函數(shù)
        }
    }
    document.onmousedown = function(event) {  // 點擊空白處隱藏
        var event = event || window.event;
        var targetId = event.target ? event.target.id : event.srcElement.id;
        if(targetId != "demo"){
            $("demo").style.display = "none";
        }
    }
    function showBox(mousex,mousey,contentText) {  // 相關(guān)操作
                setTimeout(function() {
                    $("demo").style.display = "block";
                    $("demo").style.left = mousex + "px";
                    $("demo").style.top = mousey + "px";
                    $("demo").innerHTML = contentText;
                },200)


    }
</script>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容