資訊專欄INFORMATION COLUMN
摘要：和屬性數(shù)值對(duì)應(yīng)的是元素的內(nèi)容加所占據(jù)的視覺(jué)面積，有滾動(dòng)條時(shí)還要加上滾動(dòng)條，不含。和仍要分有沒(méi)有滾動(dòng)，有滾動(dòng)時(shí)指的是整個(gè)頁(yè)面內(nèi)容的大小沒(méi)滾動(dòng)時(shí)在下指視口的大小和下則是和一樣。與屬性在下都和原來(lái)一樣指整個(gè)元素的可視寬高。
光標(biāo)效果不見(jiàn)了？
在頁(yè)面里，屏幕上光標(biāo)的樣式我們可以用css的"cursor"屬性進(jìn)行定義。一般來(lái)講，只要光標(biāo)hover到指定的元素上面其樣式就會(huì)按我們指定的進(jìn)行顯示，但是如果我們指定的元素被其他元素“遮住了”呢？來(lái)看看下面這個(gè)demo：
demo
可以看到，雖然我們給div1自定義了光標(biāo)樣式，但在被div2蓋住的那部分，我們預(yù)設(shè)的效果就沒(méi)有了，或者說(shuō)這個(gè)效果是不能“穿透”div2的。這也就提示我們，當(dāng)我們的一些交互需要我們自定義光標(biāo)樣式的時(shí)候（比如拖動(dòng)），一定要注意元素間的堆疊順序，否則很有可能會(huì)出現(xiàn)你移動(dòng)到某個(gè)位置上時(shí)你的光標(biāo)效果突然消失的現(xiàn)象。
至于css本身是如何決定元素間堆疊順序的，這還是個(gè)比較復(fù)雜的問(wèn)題，具體地可以看看張?chǎng)涡襁@篇文章。
js里幾個(gè)獲取元素寬高屬性的比較offsetWidth、clientWidth、scrollWidth、offsetHeight、clientHeight、scrollHeight這幾個(gè)屬性的特點(diǎn)一直傻傻分不清，這次就好好把他們弄清楚吧。先看demo：
demo
先分析一下div1和待滾動(dòng)條的div2兩個(gè)普通元素的情況，在不同瀏覽器下（不考慮IE8-）運(yùn)行上面這個(gè)demo后，在控制臺(tái)可以看到各瀏覽器的結(jié)果都是一樣的：
可以得出結(jié)論：
offsetWidth和offsetHeight屬性：數(shù)值對(duì)應(yīng)的是元素的可視寬高，含元素本身寬高、padding、（有滾動(dòng)條時(shí)）滾動(dòng)條、border。
clientHeight和clientWidth屬性：數(shù)值對(duì)應(yīng)的是元素的內(nèi)容加padding所占據(jù)的視覺(jué)面積，有滾動(dòng)條時(shí)還要加上滾動(dòng)條，不含border。
scrollHeight和scrollWidth屬性：由div1的結(jié)果可見(jiàn)，沒(méi)有滾動(dòng)條時(shí)執(zhí)行結(jié)果和clientHeight、clientWidth一樣。有滾動(dòng)條的情況則復(fù)雜一點(diǎn)，上面這個(gè)例子中div2的內(nèi)容足夠大、能產(chǎn)生滾動(dòng)，故此時(shí)結(jié)果為content的大?。欢绻?b>content這個(gè)div調(diào)小、直到不能產(chǎn)生滾動(dòng)時(shí)結(jié)果應(yīng)該是和clientHeight、clientWidth一樣的。
上面的結(jié)論只是針對(duì)頁(yè)面普通元素，如果使用這幾個(gè)屬性的是整個(gè)頁(yè)面（html元素，這里用document.documentElement訪問(wèn)），那輸出的情況就復(fù)雜了，沒(méi)有明顯的規(guī)律，找的不同的資料說(shuō)法也不太相同、并不能解釋我測(cè)試的結(jié)果。所以這里只講一些我測(cè)試之后比較固定的結(jié)果，僅供參考：
首先clientHeight和clientWidth的行為普通元素的不太一樣，在所有瀏覽器里基本指的都是頁(yè)面視口的大小。
scrollHeight和scrollWidth仍要分有沒(méi)有滾動(dòng)，有滾動(dòng)時(shí)指的是整個(gè)頁(yè)面內(nèi)容的大??；沒(méi)滾動(dòng)時(shí)在chrome下指視口的大小、IE和FF下則是和offsetWidth、offsetHeight一樣。
offsetWidth與offsetHeight屬性在chrome、FF、IE11下都和原來(lái)一樣指整個(gè)元素的可視寬高。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115087.html
摘要：和屬性數(shù)值對(duì)應(yīng)的是元素的內(nèi)容加所占據(jù)的視覺(jué)面積，有滾動(dòng)條時(shí)還要加上滾動(dòng)條，不含。和仍要分有沒(méi)有滾動(dòng)，有滾動(dòng)時(shí)指的是整個(gè)頁(yè)面內(nèi)容的大小沒(méi)滾動(dòng)時(shí)在下指視口的大小和下則是和一樣。與屬性在下都和原來(lái)一樣指整個(gè)元素的可視寬高。 光標(biāo)效果不見(jiàn)了？ 在頁(yè)面里，屏幕上光標(biāo)的樣式我們可以用css的cursor屬性進(jìn)行定義。一般來(lái)講，只要光標(biāo)hover到指定的元素上面其樣式就會(huì)按我們指定的進(jìn)行顯示，但是如...
摘要：和并不是一個(gè)標(biāo)準(zhǔn)的屬性，才是，所以火狐長(zhǎng)久以來(lái)都不支持，同時(shí)也不支持。 這個(gè)系列保持開(kāi)坑不埋的狀態(tài)已經(jīng)過(guò)去三個(gè)月了，而在這幾個(gè)月中我才算第一次認(rèn)真地深入理解js。雖然期間筆記是記了不少，但寫(xiě)博文又不應(yīng)是簡(jiǎn)單的復(fù)制粘貼，還是得保證有討論價(jià)值、有干貨的。而我面對(duì)的現(xiàn)實(shí)是：一來(lái)基礎(chǔ)差導(dǎo)致識(shí)別和撈出有討論價(jià)值的干貨得自身功夫練到一定階段，二來(lái)又因?yàn)橛浀碾s亂且缺乏日常整理，整理一下就是拖一下，再...
摘要：鍵盤(pán)事件與文本框變化的過(guò)程鍵盤(pán)事件最基本的應(yīng)用場(chǎng)合是控制文本框元素，而我們要討論的，就是幾個(gè)鍵盤(pán)事件發(fā)生的時(shí)機(jī)與文本輸入的過(guò)程的關(guān)系?？梢钥吹剑送?，事件并不會(huì)輸出剛按下的字符，說(shuō)明他們?cè)谖谋究蜃兓鞍l(fā)生而在之后發(fā)生。 鍵盤(pán)事件與文本框變化的過(guò)程 鍵盤(pán)事件最基本的應(yīng)用場(chǎng)合是控制文本框元素，而我們要討論的，就是幾個(gè)鍵盤(pán)事件：keydown、keypress、keyup、textInp...
摘要：禁止用戶選擇文字在一些應(yīng)用場(chǎng)合，我們不希望用戶能夠選擇文字。在下使用透明效果雖然已經(jīng)停止對(duì)的技術(shù)支持了，然而做前端的還得被它惡心一段時(shí)間，有些兼容性的問(wèn)題是我們?nèi)砸鎸?duì)滴。但是，前端界被虐了這么多年，解決問(wèn)題的方法總是有的。 禁止用戶選擇文字 在一些應(yīng)用場(chǎng)合，我們不希望用戶能夠選擇文字。比如在拖動(dòng)交互中，如果用戶能選擇元素內(nèi)部的文字，也就意味著能拖動(dòng)它們，這樣就會(huì)干擾對(duì)元素的拖動(dòng)、影響...
摘要：禁止用戶選擇文字在一些應(yīng)用場(chǎng)合，我們不希望用戶能夠選擇文字。在下使用透明效果雖然已經(jīng)停止對(duì)的技術(shù)支持了，然而做前端的還得被它惡心一段時(shí)間，有些兼容性的問(wèn)題是我們?nèi)砸鎸?duì)滴。但是，前端界被虐了這么多年，解決問(wèn)題的方法總是有的。 禁止用戶選擇文字 在一些應(yīng)用場(chǎng)合，我們不希望用戶能夠選擇文字。比如在拖動(dòng)交互中，如果用戶能選擇元素內(nèi)部的文字，也就意味著能拖動(dòng)它們，這樣就會(huì)干擾對(duì)元素的拖動(dòng)、影響...
閱讀 3057·2021-11-22 15:29
閱讀 1741·2021-10-12 10:11
閱讀 1772·2021-09-04 16:45
閱讀 2256·2021-08-25 09:39
閱讀 2801·2021-08-18 10:20
閱讀 2525·2021-08-11 11:17
閱讀 455·2019-08-30 12:49
閱讀 3318·2019-08-30 12:49
