前端碎語(6)

2021-09-19 11:04:48 字數 818 閱讀 7724

在頁面裡,螢幕上游標的樣式我們可以用css的'cursor'屬性進行定義。一般來講,只要游標hover到指定的元素上面其樣式就會按我們指定的進行顯示,但是如果我們指定的元素被其他元素「遮住了」呢?來看看下面這個demo:

demo

可以看到,雖然我們給div1自定義了游標樣式,但在被div2蓋住的那部分,我們預設的效果就沒有了,或者說這個效果是不能「穿透」div2的。這也就提示我們,當我們的一些互動需要我們自定義游標樣式的時候(比如拖動),一定要注意元素間的堆疊順序,否則很有可能會出現你移動到某個位置上時你的游標效果突然消失的現象。

至於css本身是如何決定元素間堆疊順序的,這還是個比較複雜的問題,具體地可以看看張鑫旭這篇文章。

offsetwidthclientwidthscrollwidthoffsetheightclientheightscrollheight這幾個屬性的特點一直傻傻分不清,這次就好好把他們弄清楚吧。先看demo:

demo

先分析一下div1和待滾動條的div2兩個普通元素的情況,在不同瀏覽器下(不考慮ie8-)執行上面這個demo後,在控制台可以看到各瀏覽器的結果都是一樣的:

可以得出結論:

上面的結論只是針對頁面普通元素,如果使用這幾個屬性的是整個頁面(html元素,這裡用document.documentelement訪問),那輸出的情況就複雜了,沒有明顯的規律,找的不同的資料說法也不太相同、並不能解釋我測試的結果。所以這裡只講一些我測試之後比較固定的結果,僅供參考:

前端碎語(4)

鍵盤事件最基本的應用場合是控制文字框元素,而我們要討論的,就是幾個鍵盤事件 keydown keypress keyup textinput發生的時機與文字輸入的過程的關係。先看一段 檢視控制台可以看到鍵盤事件的執行順序,這裡事件的執行分為兩種情況,一種是按下字元鍵,chrome下執行的順序為key...

快取碎語二

快取很多條資料,但只讀取其中的一部分資料,如何處理?比如在快取中儲存了100條資料,但讀取分頁資料,比如每次分頁只讀取10條資料。這種情況下,可以把這100條資料拆分成10次分別儲存起來。每乙個快取項的key需要特別的設計,比如 01 10 products,02 10 products.如何避免快...

碎語,安魂詞。。。 偷懶

早上12起床 輕聲嘆 起早了 摸了點吃了 沙發裡漫無目的換著臺 晚上 心空laolao的 發誓 再也不過這樣的週末了 後來又到週末了 沙發依然 吃一塊冰糖 呀!真甜 渴了,喝半舀子京巴涼水 啊!真過癮 早上6點起來 7點到了車站 9點才搭上車 靠,怎麼才來啊 花都謝了 發一條簡訊 隔半分鐘看看 隔半...