個人前端工具集（八）得到html元素在頁面中的位置

個人前端工具集（八）得到html元素在頁面中的位置

 

liuyuhang原創，未經容許禁止轉載

 

目錄

個人前端工具集

 

有時候須要用點擊等操做，來獲取某元素在頁面中的位置，而後在該位置添加某些操做

如進度條，提示框，特效動畫等。（bootstrap提示工具也挺好用的）。

 

1.html代碼

 

    <div style="padding:10px">
        <h2>This is a page to test Postion.</h2>
        <div id="token" style="padding:5px"></div>
        <br>
        <div class="col-lg-3" style="margin-top:20px">
            <button type="button" run="button001" class="btn btn-default" onclick="test(this)">測試</button>
        </div>
    </div>

 固然也能夠用監聽器的方式來獲取當前監聽對象，若是是用onclick，可以使用this方式來獲取當前對象。

 若是是操做其餘元素獲取絕對位置，自行寫吧仍是！

 

2.js代碼

 

    function test(me){
        var top = $(me).offset().top;//獲取該元素相對於瀏覽器的位置top
        var left = $(me).offset().left;//獲取該元素相對於瀏覽器的位置left
        //var top = $(me).position().top;//獲取該元素相對於父元素的位置top
        //var left = $(me).position().left;//獲取該元素相對於父元素的位置left
        console.log(top)
        console.log(left)
        //寫點內容到剛剛獲取到的位置,position:fixed是相對於瀏覽器定位
        $("body").append("<div style=';position:fixed;top:" + top + ";left:" + left + "'><h3>got it</h3></div>")
    }

 

3.測試結果

　　頁面和console

　　點擊測試按鈕後

 

以上！