JS——client


clientTop、clientLeft:

clientTop:盒子的上boder

clientLeft:盒子的左border

clientWidth與clientHeight

1、在有DTD情況下:

document.body.clientWidth、document.body.clientHeight:顯示的是body的寬和高,document.documentElement.clientWidth、document.documentElement.clientHeight:顯示的是body可視范圍的寬和高,

2、在無DTD情況下:

document.body.clientWidth、document.body.clientHeight顯示的是body可視范圍的寬和高;

document.documentElement.clientWidth、document.documentElement.clientHeight顯示的是body的高和body可視范圍的寬(IE中顯示的都是body可視范圍的寬和高)

3、不管有沒有DTD:

window.innerWidth、window.innerHeight:顯示的都是瀏覽器可視范圍的寬和高,包括瀏覽器的頭部和滾動條部分(IE678無法識別window.innerWidth)

調用者的區別:

1、clientTop、clientLeftclientWidth、clientHeight調用者是元素

2、clientX、clientY調用者是event對象

client、scroll、offset區別:

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

scrollWidth = 內容寬度(不包含border)

scrollHeight = 內容高度(不包含border)

注意事項:IE67,scrollHeight即使不超出盒子,它的值也是內容的高度

兼容寫法:

<script>
    document.title = client().width + "    " + client().height;
    //新事件:瀏覽器大小變化事件(瀏覽器哪怕大小變化1px也會觸動這個事件)
    window.onresize = function () {
        document.title = client().width + "    " + client().height;
    }

    //獲取屏幕可視區域的寬高
    function client() {
        if (window.innerHeight !== undefined) {
            return {
                "width": window.innerWidth,
                "height": window.innerHeight
            }
        } else if (document.compatMode === "CSS1Compat") {
            return {
                "width": document.documentElement.clientWidth,
                "height": document.documentElement.clientHeight
            }
        } else {
            return {
                "width": document.body.clientWidth,
                "height": document.body.clientHeight
            }
        }
    }
</script>

注意事項:window.innerWidth、window.innerHeight:顯示的都是瀏覽器可視范圍的寬和高,包括瀏覽器的頭部和滾動條部分


免責聲明!

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



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