js中getBoundingClientRect()方法詳解
getBoundingClientRect獲取元素位置
getBoundingClientRect用於獲得頁面中某個元素的左,上,右和下分別相對瀏覽器視窗的位置。
getBoundingClientRect是DOM元素到瀏覽器可視範圍的距離(不包含文檔卷起的部分)。
該函式返回一個Object物件,該物件有6個屬性:top,lef,right,bottom,width,height;
這裡的top、left和css中的理解很相似,width、height是元素自身的寬高,但是right,bottom和css中的理解有點不一樣。right是指元素右邊界距視窗最左邊的距離,bottom是指元素下邊界距視窗最上面的距離。
var box=document.getElementById('box'); // 獲取元素
alert(box.getBoundingClientRect().top); // 元素上邊距離頁面上邊的距離
alert(box.getBoundingClientRect().right); // 元素右邊距離頁面左邊的距離
alert(box.getBoundingClientRect().bottom); // 元素下邊距離頁面上邊的距離
alert(box.getBoundingClientRect().left); // 元素左邊距離頁面左邊的距離
注意:IE、Firefox3+、Opera9.5、Chrome、Safari支援,在IE中,預設座標從(2,2)開始計算,導致最終距離比其他瀏覽器多出兩個畫素,我們需要做個相容。
document.documentElement.clientTop; // 非IE為0,IE為2
document.documentElement.clientLeft; // 非IE為0,IE為2
functiongGetRect (element) {
var rect = element.getBoundingClientRect();
var top = document.documentElement .clientTop;
var left= document.documentElement.clientLeft;
return{
top : rect.top - top,
bottom : rect.bottom - top,
left : rect.left - left,
right : rect.right - left
}
}
相關推薦
js中getBoundingClientRect()方法詳解
getBoundingClientRect獲取元素位置 getBoundingClientRect用於獲得頁面中某個元素的左,上,右和下分別相對瀏覽器視窗的位置。 getBoundingClientRect是DOM元素到瀏覽器可視範圍的距離(不包含文檔卷起
JavaScript中getBoundingClientRect()方法詳解
script otto java chrome 頁面 支持 urn client fire getBoundingClientRect() 這個方法返回一個矩形對象,包含四個屬性:left、top、right和bottom。分別表示元素各邊與頁面上邊和左邊的距離。
JS中陣列方法詳解
JS中陣列的方法有很多,但是自己一直沒有抽時間進行整理分類,故單獨寫一篇博文,對目前我所掌握的JS中陣列相關的方法進行整理,夯實一下自己的基礎。 我將陣列相關的方法分為兩類 1.方法會改變原陣列 相應的方法有:shift、unshift、pop、push、rev
js中的attribute詳解
介紹 特點 奇怪 使用方式 get inner () input 關於 Attribute是屬性的意思,文章僅對部分兼容IE和FF的Attribute相關的介紹。 attributes:獲取一個屬性作為對象 getAttribute:獲取某一個屬性的值setAttribu
JS中的showModelDialog詳解和實例
cti 信息 創建 字符 非模態窗口 tle cin dialog ima 1.<a href="#" onclick="SeePic(‘${list.PATH}‘)"><font color="blue">預覽</font></a
JS中document.cookie詳解
一個 參數 position 函數實現 some document urn 重新 地址 什麽是cookie? cookie 是存儲於訪問者的計算機中的變量。每當同一臺計算機通過瀏覽器請求某個頁面時,就會發送這個 cookie。你可以使用 JavaScript 來創建和取回
boost庫中sleep方法詳解
seconds boost庫 color sys 在線 TP 方法 轉載 details 博客轉載自:https://blog.csdn.net/huang_xw/article/details/8453506 boost庫中sleep有兩個方法: 1. 這個方法只能在線程
js中的繼承詳解
js中的繼承 假設我們有一個Animal類,我們想構造Cat類,Cat類可以繼承Animal類的屬性和方法。以這個場景為列,我來講一講我所理解的js的繼承。 構造繼承 function Animal(name){ this.name = name; th
Java 的String中intern方法詳解及測試樣例
intern public String intern() 返回字串物件的規範化表示形式。 一個初始時為空的字串池,它由類 String 私有地維護。 當呼叫 intern 方法時,如果池已經包含一個等於此 String 物件的字串(該物件由 equals(Obj
python中list方法詳解說明
序號 分類 關鍵字/函式/方法 描述 1 新增 list.insert(索引,資料) 在指定位置插入資料 list.append(資料)
JS進階篇--JS陣列reduce()方法詳解及高階技巧
去除巢狀的思路: 用遞迴、reduce()、concat()來實現。 遞迴解決多層巢狀,reduce()解決每層陣列的迭代拼接,concat()來拼接陣列即拆除一層巢狀。 let sum = [0, 1, 2, 3].reduce(function(acc, val)
Python-JS中的事件詳解
err 右鍵 win 樣式 重新 形參 stop can 失去 目錄一、JS中的事件二、JS中的事件分類: 1.事件初級: 2.事件參數 Event 3.鼠標事件 4.鍵盤事件 *** 5.表單事件 *** 6.文檔事件 * 7.圖
java中compareTo方法詳解
Compares two strings lexicographically. The comparison is based on the Unicode value of each character in the strings. The character sequence represented
Spring4.0MVC學習資料,ApplicationContext中的方法詳解(三)
做為java開源的一部分,spring框架一直排在老大的位置。Spring4.0 是 Spring 推出的一個重大版本升級,進一步加強了 Spring 作為 Java 領域第一開源平臺的地位。Spring4.0 引入了眾多 Java 開發者期盼的新特性,如泛型依賴注入、Sp
js中的this詳解
this是js中的一個關鍵字。 在瞭解this之前,先了解一下js中的執行環境。執行環境是js中最為重要的一個概念,js中的執行環境主要有兩種:全域性執行環境和函式執行環境。執行環境(Execution Context )簡稱EC,可以將其看作一個物件,它由變數物件、thi
python中new方法詳解。
new_ 方法是什麼? __new__方法其實就是建立物件的方法 new()方法是在類準備將自身例項化時呼叫。 一個類可以有多個位置引數和多個命名引數,而在例項化開始之後,在呼叫 init()方法之前,Python首先呼叫new()方法: def new(cls, *args, **kw
PHP迴圈二維陣列 。php中__autoload()方法詳解
PHP迴圈二維陣列 PHP程式碼: <?php $arr1=array(100,200,300,400); $arr2=array("num"=>100,"name"=>"Liuxy","score"=>98); print_r($arr1); e
D3.js中Stream graph詳解
var n = 20, // number of layers 層的總數 m = 200, // number of samples per layer 每層的樣本數目 k = 10; // number of bumps per layer 每層的顛簸總數 // d3.stack()
Pandas中resample方法詳解
Pandas中的resample,重新取樣,是對原樣本重新處理的一個方法,是一個對常規時間序列資料重新取樣和頻率轉換的便捷的方法。 方法的格式是: DataFrame.resample(rule, h
javascript中call方法詳解
轉載自http://www.cnblogs.com/sweting/archive/2009/12/21/1629204.html 應用於:Function 物件 要求 版本 5.5 呼叫一個物件的一個方法,以另一個物件替換當前物件。 call([thisObj[,arg1[, arg2[, [,.