亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

前端碎語（6）

edagarli / 3383人閱讀

摘要：和屬性數(shù)值對應(yīng)的是元素的內(nèi)容加所占據(jù)的視覺面積，有滾動條時(shí)還要加上滾動條，不含。和仍要分有沒有滾動，有滾動時(shí)指的是整個(gè)頁面內(nèi)容的大小沒滾動時(shí)在下指視口的大小和下則是和一樣。與屬性在下都和原來一樣指整個(gè)元素的可視寬高。

光標(biāo)效果不見了？

在頁面里，屏幕上光標(biāo)的樣式我們可以用css的"cursor"屬性進(jìn)行定義。一般來講，只要光標(biāo)hover到指定的元素上面其樣式就會按我們指定的進(jìn)行顯示，但是如果我們指定的元素被其他元素“遮住了”呢？來看看下面這個(gè)demo：

demo

可以看到，雖然我們給div1自定義了光標(biāo)樣式，但在被div2蓋住的那部分，我們預(yù)設(shè)的效果就沒有了，或者說這個(gè)效果是不能“穿透”div2的。這也就提示我們，當(dāng)我們的一些交互需要我們自定義光標(biāo)樣式的時(shí)候（比如拖動），一定要注意元素間的堆疊順序，否則很有可能會出現(xiàn)你移動到某個(gè)位置上時(shí)你的光標(biāo)效果突然消失的現(xiàn)象。

至于css本身是如何決定元素間堆疊順序的，這還是個(gè)比較復(fù)雜的問題，具體地可以看看張鑫旭這篇文章。

js里幾個(gè)獲取元素寬高屬性的比較

offsetWidth、clientWidth、scrollWidth、offsetHeight、clientHeight、scrollHeight這幾個(gè)屬性的特點(diǎn)一直傻傻分不清，這次就好好把他們弄清楚吧。先看demo：

demo

先分析一下div1和待滾動條的div2兩個(gè)普通元素的情況，在不同瀏覽器下（不考慮IE8-）運(yùn)行上面這個(gè)demo后，在控制臺可以看到各瀏覽器的結(jié)果都是一樣的：

可以得出結(jié)論：

offsetWidth和offsetHeight屬性：數(shù)值對應(yīng)的是元素的可視寬高，含元素本身寬高、padding、（有滾動條時(shí)）滾動條、border。

clientHeight和clientWidth屬性：數(shù)值對應(yīng)的是元素的內(nèi)容加padding所占據(jù)的視覺面積，有滾動條時(shí)還要加上滾動條，不含border。

scrollHeight和scrollWidth屬性：由div1的結(jié)果可見，沒有滾動條時(shí)執(zhí)行結(jié)果和clientHeight、clientWidth一樣。有滾動條的情況則復(fù)雜一點(diǎn)，上面這個(gè)例子中div2的內(nèi)容足夠大、能產(chǎn)生滾動，故此時(shí)結(jié)果為content的大小；而如果把content這個(gè)div調(diào)小、直到不能產(chǎn)生滾動時(shí)結(jié)果應(yīng)該是和clientHeight、clientWidth一樣的。

上面的結(jié)論只是針對頁面普通元素，如果使用這幾個(gè)屬性的是整個(gè)頁面（html元素，這里用document.documentElement訪問），那輸出的情況就復(fù)雜了，沒有明顯的規(guī)律，找的不同的資料說法也不太相同、并不能解釋我測試的結(jié)果。所以這里只講一些我測試之后比較固定的結(jié)果，僅供參考：

首先clientHeight和clientWidth的行為普通元素的不太一樣，在所有瀏覽器里基本指的都是頁面視口的大小。

scrollHeight和scrollWidth仍要分有沒有滾動，有滾動時(shí)指的是整個(gè)頁面內(nèi)容的大?。粵]滾動時(shí)在chrome下指視口的大小、IE和FF下則是和offsetWidth、offsetHeight一樣。

offsetWidth與offsetHeight屬性在chrome、FF、IE11下都和原來一樣指整個(gè)元素的可視寬高。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/115087.html

相關(guān)文章

  • 前端碎語（6）

    摘要：和屬性數(shù)值對應(yīng)的是元素的內(nèi)容加所占據(jù)的視覺面積，有滾動條時(shí)還要加上滾動條，不含。和仍要分有沒有滾動，有滾動時(shí)指的是整個(gè)頁面內(nèi)容的大小沒滾動時(shí)在下指視口的大小和下則是和一樣。與屬性在下都和原來一樣指整個(gè)元素的可視寬高。 光標(biāo)效果不見了？ 在頁面里，屏幕上光標(biāo)的樣式我們可以用css的cursor屬性進(jìn)行定義。一般來講，只要光標(biāo)hover到指定的元素上面其樣式就會按我們指定的進(jìn)行顯示，但是如...

    Youngs 評論0 收藏0

  • 前端碎語（2）

    摘要：和并不是一個(gè)標(biāo)準(zhǔn)的屬性，才是，所以火狐長久以來都不支持，同時(shí)也不支持。 這個(gè)系列保持開坑不埋的狀態(tài)已經(jīng)過去三個(gè)月了，而在這幾個(gè)月中我才算第一次認(rèn)真地深入理解js。雖然期間筆記是記了不少，但寫博文又不應(yīng)是簡單的復(fù)制粘貼，還是得保證有討論價(jià)值、有干貨的。而我面對的現(xiàn)實(shí)是：一來基礎(chǔ)差導(dǎo)致識別和撈出有討論價(jià)值的干貨得自身功夫練到一定階段，二來又因?yàn)橛浀碾s亂且缺乏日常整理，整理一下就是拖一下，再...

    FrancisSoung 評論0 收藏0

  • 前端碎語（4）

    摘要：鍵盤事件與文本框變化的過程鍵盤事件最基本的應(yīng)用場合是控制文本框元素，而我們要討論的，就是幾個(gè)鍵盤事件發(fā)生的時(shí)機(jī)與文本輸入的過程的關(guān)系。可以看到，除了外，事件并不會輸出剛按下的字符，說明他們在文本框變化之前發(fā)生而在之后發(fā)生。 鍵盤事件與文本框變化的過程 鍵盤事件最基本的應(yīng)用場合是控制文本框元素，而我們要討論的，就是幾個(gè)鍵盤事件：keydown、keypress、keyup、textInp...

    zhiwei 評論0 收藏0

  • 前端碎語（5）

    摘要：禁止用戶選擇文字在一些應(yīng)用場合，我們不希望用戶能夠選擇文字。在下使用透明效果雖然已經(jīng)停止對的技術(shù)支持了，然而做前端的還得被它惡心一段時(shí)間，有些兼容性的問題是我們?nèi)砸鎸Φ?。但是，前端界被虐了這么多年，解決問題的方法總是有的。 禁止用戶選擇文字 在一些應(yīng)用場合，我們不希望用戶能夠選擇文字。比如在拖動交互中，如果用戶能選擇元素內(nèi)部的文字，也就意味著能拖動它們，這樣就會干擾對元素的拖動、影響...

    xiaoqibTn 評論0 收藏0

  • 前端碎語（5）

    摘要：禁止用戶選擇文字在一些應(yīng)用場合，我們不希望用戶能夠選擇文字。在下使用透明效果雖然已經(jīng)停止對的技術(shù)支持了，然而做前端的還得被它惡心一段時(shí)間，有些兼容性的問題是我們?nèi)砸鎸Φ?。但是，前端界被虐了這么多年，解決問題的方法總是有的。 禁止用戶選擇文字 在一些應(yīng)用場合，我們不希望用戶能夠選擇文字。比如在拖動交互中，如果用戶能選擇元素內(nèi)部的文字，也就意味著能拖動它們，這樣就會干擾對元素的拖動、影響...

    xialong 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<