HTML定位(滾動條、元素,視口)定位


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p onclick=getElementRect(this)>你好</p>
        <p onclick=getElementRect(this)>你好</p>
        <p onclick=getElementRect(this)>你好</p>
        <table border="1" cellspacing="" cellpadding="">
            <tr><th onclick=getElementRect(this)>Header</th></tr>
            <tr><td>Data</td></tr>
            <tr><td>Data</td></tr>
        </table>
    </body>
</html>
<script>
    /**
     * 滾動條的位置
     * @param {Object} w
     */
    function getScrollOffsets(w){
        w = w || window;
        //除了IE 8以及更早的版本以外,其他瀏覽器都支持
        if(w.pageXOffset != null){
            return {x:w.pageXOffset,y:w.pageYOffset};
        }
        /**
         * document.compatMode用來判斷當前瀏覽器采用的渲染方式。
         * BackCompat:標准兼容模式關閉。
         * CSS1Compat:標准兼容模式開啟。
         * 當document.compatMode等於BackCompat時,瀏覽器客戶區寬度是document.body.clientWidth;滾動條的位置document.body.scrollLeft
         * 當document.compatMode等於CSS1Compat時,瀏覽器客戶區寬度是document.documentElement.clientWidth;滾動條的位置 document.documentElement.scrollLeft
         */
        var d = w.document;
        if(document.compatMode == "CSS1Compat"){
            return {x:d.documentElement.scrollLeft,y:d.documentElement.scrollTop};
        }else{
            return {x:d.body.scrollLeft,y:d.body.scrollTop};
        }
    }
    
    //作為一個對象的w和h屬性返回視口的尺寸
    function getViewportSize(w){
        //使用指定的窗口, 如果不帶參數則使用當前窗口
        w = w || window;
    
        //除了IE8及更早的版本以外,其他瀏覽器都能用
        if(w.innerWidth != null){
            return {w: w.innerWidth, h: w.innerHeight};
        }
    
        //對標准模式下的IE(或任意瀏覽器)
        var d = w.document;
        if(document.compatMode == "CSS1Compat"){
            return {w: d.documentElement.clientWidth, h: d.documentElement.clientHeight};
        }else{
            return {w: d.body.clientWidth, h: d.body.clientHeight};
        }
    }
    
    /**
     * 這個方法返回元素在視口坐標中的位置。為了轉換為甚至用戶滾動瀏覽器窗口以后任然有效的文檔坐標,需要加上滾動偏移量:
     * getBoundingClientRect()方法。該方法是在IE5中引入的,而現在當前的所有瀏覽器都實現了。它不需要參數,返回left、right、top、bottom屬性的對象。
     * @param {Object} e
     */
    function getElementRect(e){
        var box = e.getBoundingClientRect();
        var offsets = getScrollOffsets();
        var x = box.left + offsets.x;
        var y = box.top + offsets.y;
        var w = box.width || box.right - box.left;
        var h = box.height || box.bottom - box.top;
        console.log({x:x, y:y ,w:w, h:h})
        return {x:x, y:y ,w:w, h:h};
    }
</script>

 


免責聲明!

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



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