js中g(shù)etBoundingClientRect( )方法案例詳解
更新時(shí)間：2021年07月29日 09:53:47 作者：stay_少年與夢
這篇文章主要介紹了js中g(shù)etBoundingClientRect( )方法案例詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
一.getBoundingClientRect() 解析
getBoundingClientRect() 方法返回元素的大小及其相對于視口的位置。
語法
rectObject = object.getBoundingClientRect();
值
rectObject.top：元素上邊到視窗上邊的距離; rectObject.right：元素右邊到視窗左邊的距離; rectObject.bottom：元素下邊到視窗上邊的距離; rectObject.left：元素左邊到視窗左邊的距離; rectObject.width：是元素自身的寬度 rectObject.height是元素自身的高度
跨瀏覽器兼容
如果需要更好的跨瀏覽器兼容性，請使用 window.pageXOffset 和 window.pageYOffset 代替 window.scrollX 和 window.scrollY。不能訪問這些屬性的腳本可以使用下面的代碼：
// For scrollX (((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft // For scrollY (((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.scrollTop == 'number' ? t : document.body).scrollTop
示例
// rect 是一個(gè)具有四個(gè)屬性 left、top、right、bottom 的 DOMRect 對象
注：DOMRect 是 TextRectangle 或 ClientRect 的標(biāo)準(zhǔn)名稱，他們是相同的。
var rect = obj.getBoundingClientRect();
到此這篇關(guān)于js中g(shù)etBoundingClientRect( )方法案例詳解的文章就介紹到這了,更多相關(guān)js中g(shù)etBoundingClientRect( )內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JSON格式本就發(fā)自于JavaScript中的對象和數(shù)組,所以js操作起來自然也是最為簡單原始,接下來我們就來看一些常用的JavaScript中對JSON對象的基本操作示例2016-05-05
有關(guān)于JS輔助函數(shù)inherit()的問題
本篇為大家介紹有關(guān)于JS輔助函數(shù)inherit()的一些問題。2013-04-04
JS中attr和prop屬性的區(qū)別以及優(yōu)先選擇示例介紹
這篇文章主要介紹了JS中attr和prop屬性的區(qū)別以及優(yōu)先選擇,需要的朋友可以參考下2014-06-06
Knockoutjs是一個(gè)JavaScript實(shí)現(xiàn)的MVVM框架.主要有如下幾個(gè)功能1. Declarative bindings2. Observables and dependency tracking3. Templating,需要了解的朋友可以參考下2012-12-12
這篇文章主要介紹了javascript中return的作用，有需要的朋友可以參考一下2013-12-12
先來學(xué)習(xí)一下Javascript語言中的基礎(chǔ)知識問題其時(shí)對于每種編程語言來說基礎(chǔ)知識都是大同小異的，對變量，函數(shù)，條件語句塊，循環(huán)語句塊等等,本文簡要介紹一下，感興趣的朋友可以了解下2013-01-01
jQuery中文入門指南，翻譯加實(shí)例，jQuery的起點(diǎn)教程
jQuery中文入門指南，翻譯加實(shí)例，jQuery的起點(diǎn)教程...2007-01-01
JavaScript高級程序設(shè)計(jì)（第3版）學(xué)習(xí)筆記 概述
在JavaScript面世之初，沒有人會想到它會被應(yīng)用的如此廣泛，也遠(yuǎn)比一般人想象中的要復(fù)雜強(qiáng)大的多，在我自己學(xué)習(xí)的過程中，曾經(jīng)有過多次震撼2012-10-10
無符號右移賦值操作 (>>>=)是對變量值根據(jù)表達(dá)式值所規(guī)定的位數(shù)進(jìn)行無符號右移，并將結(jié)果賦給該變量。2009-04-04
js關(guān)閉子窗體刷新父窗體實(shí)現(xiàn)方法
本文將詳細(xì)介紹js關(guān)閉子窗體刷新父窗體實(shí)現(xiàn)方法，需要了解的朋友可以參考下2012-12-12