DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> jquery如何獲取元素在浏覽器中的位置
jquery如何獲取元素在浏覽器中的位置
編輯:前端技巧     
1、獲取對象(自定義調整打開新窗口參照元素)
 
var obj = $(”#oButton”);

實例中我獲取的對象是彈出窗口按鈕,這樣創建的新窗口就會根椐按鈕的位置進行調整,實例中將創建的新窗口顯示的按鈕的右下角。

2、獲取對象元素的位置(offset()方法)
 
var offset = obj.offset();

獲取對象元素的位置,分別是元素的top和left,調用方法是:offset.left和offset.top,可知當前對象的左部和頂部位置。

3、獲取對象元素的寬度(width()方法)
 
var right = offset.left+obj.width();

實例中是獲取對象的右下角位置,創建新窗口的左部位置。

4、獲取對象元素的高度(height()方法)
 
var down = offset.top+obj.height();

實例中是獲取對象的右下角位置,創建新窗口的頂部位置。

5、定義CSS樣式,分別設置左部和頂部。
 
‘left’:right,
‘top’:down,

對於上面的代碼,我們可以使用“HTML在線編輯器”進行測試一下。

要注意CSS樣式中margin和padding的值,以及浏覽器IE與firefox兼容等效果。

結合上面實例,jQuery獲取元素位置以及高度與寬度非常簡單,通過內置方法offset(),width()和height()實現我們的動態調整打開新窗口功能,對於其它擴展應用來說也一樣,了解jQuery獲取元素位置以及高度與寬度方法,對於創建新元素,調整元素位置與大小,將非常實用。

本文來源:(http://blog.csdn.net/shaerdong/article/details/7924170)

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved