版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)
文檔簡介
1、定位定位元素尺寸元素尺寸獲取元素尺寸可以使用下面幾種方式?元素的style屬性width,height,但這些屬性往往返回空值,因為它們只能返回使用行內(nèi)style屬性定義在元素上的樣式?元素的currentStyle屬性width,height(IE),getComputedStyle(objnull)返回對象的width,height,這樣可以獲取元素的實際CSS定義的寬度和高度,但當元素沒有使用CSS定義外觀時,雖然元素仍然有大?。?/p>
2、只要其中有字符或其它元素),這些屬性的返回值是不確定的,如IE返回auto而火狐則返回一個看似理想的值。?對象的clientWidth和clientHeight屬性給出元素的可視部分的寬度和高度當有滾動條時,只返回可見區(qū)域大小對于塊級元素將返回元素的所設(shè)置的寬度和高度加上填充(padding),這一點幾乎所有瀏覽器都達成一致.但當塊級元素并沒有設(shè)置寬和高以及填充時就出現(xiàn)不同了谷歌瀏覽器和火狐瀏覽器的報告一致IE報告都為0而Opera則有
3、所偏差.再將這兩個屬性應(yīng)用到行內(nèi)元素上IE和火狐都報告為0谷歌報告了一個看似理想的數(shù)字而Opera竟會一個為正另一個負!?對象的offsetWidth和offsetHeight屬性用來取得對象在頁面中的實際所占區(qū)域大小(所設(shè)置的寬高加邊框加填充,當有滾動條時還會算上滾動條)似乎這個屬性對于設(shè)置了寬和高的塊級元素幾乎沒有什么瀏覽器兼容問題但不得不說的是火狐的一個BUG.火狐瀏覽器有個可將頁面放大縮小的功能當將頁面縮小后對象的offsetW
4、idth和offsetHeight屬性會發(fā)生細微的變化變小幾像素!盡管這對JS編程來講幾乎沒影響但似乎這個BUG也太明顯了.這兩個屬性變非總是那么讓人信任當對象并沒設(shè)置寬高或它是一個行內(nèi)元素時它的報告就顯得相當復(fù)雜不同瀏覽器都有自己一套標準(但是仍然可以肯定的是這兩個屬性報告的仍然是該元素占據(jù)的的空間大小只不過會因字體和空格的默認大小不同而不同)最讓人摸不著頭腦的是Opera對于一個body的子塊級元素當body和它自身沒設(shè)置寬高時Op
5、era報告的它的寬度相當大6千多像素!?還有就是scrollWidth和scrollWidth了就目前來講對于一個沒有滾動條和溢出的元素其它瀏覽器對這個屬性的報告還算有規(guī)律:對象的clientWidthbder=scrollWidth.對象的clientHeightbder=scrollHeight只有IE報告有問題!它以元素中的內(nèi)容為準如果元素內(nèi)沒有其它內(nèi)容雖然IE并不會報0但會報告一個非常小的值!再看看當元素有滾動條時怎么樣吧!唯一
6、值得高興的是它們對有滾動條的元素的clientWidth和clientHeight都報告一致(但仍有一點要注意那就是火狐的一BUG頁面縮放功能帶來的郁悶而且這次變化非常大).而對于scrollWidth和scrollHeight真是五花八門:先說好的盡管各不一樣但它們對scrollWidth不知為什么相差不大那么壞完全可以不做任何瀏覽器檢測w=document.documentElement.clientWidthh=document.
7、documentElement.clientHeight元素邊框?qū)挾仍剡吙驅(qū)挾全@取元素邊框?qū)挾瓤梢允褂孟旅鎺追N方式?元素style屬性的bderWidth,但同樣它只能返回使用HTML行內(nèi)style屬性定義的邊框樣式?使用currentStyle屬性或getComputedStyle方法,可以獲取元素CSS定義的實際邊框樣式,如果CSS沒有定義元素的邊框,一般的元素是沒有邊框的,但部分元素,如表單控件,仍然具有默認的邊框?qū)挾龋τ诖祟?/p>
8、情況,也是不能依靠這種方法來獲取元素的邊框大小的!?對象的clientLeft和clientTop屬性。不能不說clientLeft和clientTop的名字起的太奇怪了事實上它們的名字更應(yīng)該這樣:clientBderLeftWidth和clientBderTopWidth(難道是太長了的原因)更奇怪的是它們只能取得設(shè)置在元素上的左邊框和上邊框的粗細而沒有返回右邊和下邊的邊框?qū)挾鹊膶傩?另外對于文檔根元素(documentElement
9、)在IE中它有默認的兩像素邊框?qū)挾榷渌鼮g覽器中報告為0.元素坐標元素坐標獲取元素坐標方法:?元素style屬性的lefttop屬性,不但這種方法僅適用于使用HTMLstyle屬性聲明樣式的元素,并且只有當元素使用定位(position設(shè)置為relativeabsolutefixed但不包含static)時,才會存在這些值?元素currentStyle屬性或getComputedStyle方法返回的Style對象的lefttop屬性,但
10、這種方法僅對采用定位的元素有作用?元素的offsetLeft與offsetTop屬性返回元素在頁面中相對于父元素的坐標。一般對于進行了定位的元素(即position為不是static的值或沒有設(shè)置),這兩個屬性的返回值為CSS中定義的元素的lefttop值,當其自身有邊距時(margin),還會加上邊距。而對于沒有采用定位的元素則顯得比較復(fù)雜,我們只能考慮下設(shè)置了寬度和高度的塊級元素,因為沒有設(shè)置寬高,及行內(nèi)元素,沒有辦法獲取它的寬高,
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 眾賞文庫僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- javascript
- javascript javascript 初級到高級 筆記
- javascript表單
- javascript節(jié)點
- javascript 語言-
- javascript樣式
- javascript詳解-
- javascript表格
- javascript學習筆記
- javascript string對象
- javascript筆試題
- javascript習題庫
- 11 javascript基礎(chǔ)
- javascript-ppt
- javascript經(jīng)典實例
- javascript經(jīng)典實例
- javascript中的cookie
- javascript中的bom
- javascript習題帶答案
- javascript練習題
評論
0/150
提交評論