2011年8月4日 星期四

[Javascript]透過getBoundingClientRect method取得Div的left,top,right,bottom,height,width資訊

想想,一般當我們要取得div的樣式設定時,要如何處理.
嗯...我一時也想不到有什麼比較好的方法.腦中出現浮現的第一步,
是先透過document.getElementById()先取得object,再來找找,有沒有對應的屬性.
但,然後呢?

後來發現比較好的方法,是透過getBoundingClientRect().
透過該方法會回傳一個TextRange object, 該object包含了.left,top,right,bottom,height,width資訊

使用方式如下

<html>
    <head>
        <style type="text/css">
            #rect{
                width:200px;
                height:100px;
                margin-top:20px;
                background-color:#cccccc;
            }
        </style>
    </head>
    <body>
        <div id ='rect'>
            this is test area.
        </div>    
        <script>
            var div = document.getElementById("rect");
            if(div.getBoundingClientRect){
                var rect = div.getBoundingClientRect();
                var x = rect.left;
                var y = rect.top;
                var w = rect.right - rect.left;
                var h = rect.bottom - rect.top;
                var width = rect.width;
                var height = rect.height;
                console.log(x,y,w,h,width,height);
            }    
        </script>
    </body>
</html>

該範例輸出結果如下:

8 20 200 100 200 100

更多詳細資料可以參考下列網址
http://help.dottoro.com/ljvmcrrn.php
張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)