資訊專欄INFORMATION COLUMN
摘要：和屬性數(shù)值對應(yīng)的是元素的內(nèi)容加所占據(jù)的視覺面積，有滾動條時還要加上滾動條，不含。和仍要分有沒有滾動，有滾動時指的是整個頁面內(nèi)容的大小沒滾動時在下指視口的大小和下則是和一樣。與屬性在下都和原來一樣指整個元素的可視寬高。
光標效果不見了？
在頁面里，屏幕上光標的樣式我們可以用css的"cursor"屬性進行定義。一般來講，只要光標hover到指定的元素上面其樣式就會按我們指定的進行顯示，但是如果我們指定的元素被其他元素“遮住了”呢？來看看下面這個demo：
demo
可以看到，雖然我們給div1自定義了光標樣式，但在被div2蓋住的那部分，我們預(yù)設(shè)的效果就沒有了，或者說這個效果是不能“穿透”div2的。這也就提示我們，當我們的一些交互需要我們自定義光標樣式的時候（比如拖動），一定要注意元素間的堆疊順序，否則很有可能會出現(xiàn)你移動到某個位置上時你的光標效果突然消失的現(xiàn)象。
至于css本身是如何決定元素間堆疊順序的，這還是個比較復(fù)雜的問題，具體地可以看看張鑫旭這篇文章。
js里幾個獲取元素寬高屬性的比較offsetWidth、clientWidth、scrollWidth、offsetHeight、clientHeight、scrollHeight這幾個屬性的特點一直傻傻分不清，這次就好好把他們弄清楚吧。先看demo：
demo
先分析一下div1和待滾動條的div2兩個普通元素的情況，在不同瀏覽器下（不考慮IE8-）運行上面這個demo后，在控制臺可以看到各瀏覽器的結(jié)果都是一樣的：
可以得出結(jié)論：
offsetWidth和offsetHeight屬性：數(shù)值對應(yīng)的是元素的可視寬高，含元素本身寬高、padding、（有滾動條時）滾動條、border。
clientHeight和clientWidth屬性：數(shù)值對應(yīng)的是元素的內(nèi)容加padding所占據(jù)的視覺面積，有滾動條時還要加上滾動條，不含border。
scrollHeight和scrollWidth屬性：由div1的結(jié)果可見，沒有滾動條時執(zhí)行結(jié)果和clientHeight、clientWidth一樣。有滾動條的情況則復(fù)雜一點，上面這個例子中div2的內(nèi)容足夠大、能產(chǎn)生滾動，故此時結(jié)果為content的大??；而如果把content這個div調(diào)小、直到不能產(chǎn)生滾動時結(jié)果應(yīng)該是和clientHeight、clientWidth一樣的。
上面的結(jié)論只是針對頁面普通元素，如果使用這幾個屬性的是整個頁面（html元素，這里用document.documentElement訪問），那輸出的情況就復(fù)雜了，沒有明顯的規(guī)律，找的不同的資料說法也不太相同、并不能解釋我測試的結(jié)果。所以這里只講一些我測試之后比較固定的結(jié)果，僅供參考：
首先clientHeight和clientWidth的行為普通元素的不太一樣，在所有瀏覽器里基本指的都是頁面視口的大小。
scrollHeight和scrollWidth仍要分有沒有滾動，有滾動時指的是整個頁面內(nèi)容的大?。粵]滾動時在chrome下指視口的大小、IE和FF下則是和offsetWidth、offsetHeight一樣。
offsetWidth與offsetHeight屬性在chrome、FF、IE11下都和原來一樣指整個元素的可視寬高。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/78816.html
摘要：和并不是一個標準的屬性，才是，所以火狐長久以來都不支持，同時也不支持。 這個系列保持開坑不埋的狀態(tài)已經(jīng)過去三個月了，而在這幾個月中我才算第一次認真地深入理解js。雖然期間筆記是記了不少，但寫博文又不應(yīng)是簡單的復(fù)制粘貼，還是得保證有討論價值、有干貨的。而我面對的現(xiàn)實是：一來基礎(chǔ)差導(dǎo)致識別和撈出有討論價值的干貨得自身功夫練到一定階段，二來又因為記的雜亂且缺乏日常整理，整理一下就是拖一下，再...
閱讀 2465·2021-09-09 09:33
閱讀 2865·2019-08-30 15:56
閱讀 3119·2019-08-30 14:21
閱讀 891·2019-08-30 13:01
閱讀 855·2019-08-26 18:27
閱讀 3584·2019-08-26 13:47
閱讀 3449·2019-08-26 10:26
閱讀 1583·2019-08-23 18:38
