国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端碎語(6)

edagarli / 3312人閱讀

摘要:和屬性數值對應的是元素的內容加所占據的視覺面積,有滾動條時還要加上滾動條,不含。和仍要分有沒有滾動,有滾動時指的是整個頁面內容的大小沒滾動時在下指視口的大小和下則是和一樣。與屬性在下都和原來一樣指整個元素的可視寬高。

光標效果不見了?

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

demo

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

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

js里幾個獲取元素寬高屬性的比較

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

demo

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

可以得出結論:

offsetWidthoffsetHeight屬性:數值對應的是元素的可視寬高,含元素本身寬高、padding、(有滾動條時)滾動條、border。

clientHeightclientWidth屬性:數值對應的是元素的內容加padding所占據的視覺面積,有滾動條時還要加上滾動條,不含border。

scrollHeightscrollWidth屬性:由div1的結果可見,沒有滾動條時執行結果和clientHeightclientWidth一樣。有滾動條的情況則復雜一點,上面這個例子中div2的內容足夠大、能產生滾動,故此時結果為content的大小;而如果把content這個div調小、直到不能產生滾動時結果應該是和clientHeightclientWidth一樣的。

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

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

scrollHeightscrollWidth仍要分有沒有滾動,有滾動時指的是整個頁面內容的大小;沒滾動時在chrome下指視口的大小、IE和FF下則是和offsetWidthoffsetHeight一樣。

offsetWidthoffsetHeight屬性在chrome、FF、IE11下都和原來一樣指整個元素的可視寬高。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/115087.html

相關文章

  • 前端碎語6

    摘要:和屬性數值對應的是元素的內容加所占據的視覺面積,有滾動條時還要加上滾動條,不含。和仍要分有沒有滾動,有滾動時指的是整個頁面內容的大小沒滾動時在下指視口的大小和下則是和一樣。與屬性在下都和原來一樣指整個元素的可視寬高。 光標效果不見了? 在頁面里,屏幕上光標的樣式我們可以用css的cursor屬性進行定義。一般來講,只要光標hover到指定的元素上面其樣式就會按我們指定的進行顯示,但是如...

    Youngs 評論0 收藏0
  • 前端碎語(2)

    摘要:和并不是一個標準的屬性,才是,所以火狐長久以來都不支持,同時也不支持。 這個系列保持開坑不埋的狀態已經過去三個月了,而在這幾個月中我才算第一次認真地深入理解js。雖然期間筆記是記了不少,但寫博文又不應是簡單的復制粘貼,還是得保證有討論價值、有干貨的。而我面對的現實是:一來基礎差導致識別和撈出有討論價值的干貨得自身功夫練到一定階段,二來又因為記的雜亂且缺乏日常整理,整理一下就是拖一下,再...

    FrancisSoung 評論0 收藏0
  • 前端碎語(4)

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

    zhiwei 評論0 收藏0
  • 前端碎語(5)

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

    xiaoqibTn 評論0 收藏0
  • 前端碎語(5)

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

    xialong 評論0 收藏0

發表評論

0條評論

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