能使用html/css解決的問題就不要使用JS

時間  2019-11-12
標籤 能使 html css 解決 問題 不要 使用 欄目 HTML 简体版
原文   原文鏈接

  借用Effective之名，開始寫Effective系列，總結一些前端的心得。css

爲何說能使用html/css解決的問題就不要使用JS呢？兩個字，由於簡單。簡單就意味着更快的開發速度，更小的維護成本，同時每每具備更好的體驗，下面介紹幾個實例。html

1. 導航高亮

導航高亮是一種很常見的問題，包括當前頁面的導航在菜單裏面高亮和hover時高亮。你能夠用js控制，可是用一點CSS技巧就能夠達到這個目的，不須要使用JS。

前端

在正常態時，每一個導航的默認樣式爲：html5

當前頁面的導航透明度爲1. 爲了實現這個目的：css3

首先經過body給不一樣的頁面添加不一樣的類，用來標誌不一樣的頁面git

全部的li也用class標誌，爲了有一個一一對應的關係：github

而後就能夠設置當前頁面的樣式，覆蓋掉默認的樣式：ajax

這樣子，若是當前頁面是home，則body.home na li.home這條規則生效，home的導航將高亮瀏覽器

這個技藝在《精通CSS》這種書裏面有說起。若是你用js控制，那麼在腳本加載好以前，當前頁面是不會高亮的，而腳本加載好以後忽然就高亮了。因此用js吃力不討好。app

 

hover時的高亮，能夠用css的:hover選擇器：

加上:hover選擇器的優先級將會高於本來的，鼠標hover的時候將會覆蓋默認樣式，即高亮。

你也能夠用mouse事件，mouseover的時候添加一個類，mouseleave的時候移除掉這個類，這樣就變複雜了，用CSS甚至能夠兼容不支持JS的瀏覽器，用戶可能把瀏覽器的js禁掉了。我一個純展現的靜態頁面，爲啥要寫js呢，是吧。

注意這個hover選擇器特別好用，幾乎適用於全部須要用鼠標懸浮時顯示的場景。

 

2. 鼠標懸浮時顯示

鼠標懸浮的場景十分常見，例如導航的菜單：

以及在《Google地圖開發總結》一文提到的，marker詳情框的顯示：
通常要把隱藏的東西如菜單做爲hover目標的子元素或者相鄰元素，才方便用css控制，例如上面的菜單，是把menu看成導航的一個相鄰元素：

menu在正常態下是隱藏的：

而當導航hover時顯示：

注意這裏使用了一個相鄰選擇器，這也是上面說的爲何要寫成相鄰的元素。menu的位置能夠用absolute定位。

同時menu自已自己hover的時候也要顯示，不然鼠標一離開導航的時候，菜單就消失了：

這裏會有一個小問題，即menu和導航須要挨着一塊兒，不然中間有空隙的話，上面添加的菜單hover就不能發揮做用了，可是實際狀況下從美觀的角度，二者是要有點距離的。這個其實也好解決，只要在menu上面再畫一個透明的區域就行了，以下藍色的方塊：
能夠用before/after僞類用absoute定位實現：

若是我既寫了css的hover，又監聽了mouse事件，用mouse控制顯示隱藏，雙重效果會有什麼狀況發生，若是按正常套路，在mouse事件裏面hover的時候，添加了一個display: block的style，會覆蓋掉CSS的設置。也就是說，只要hover一次，css的代碼就無論用了，由於內聯樣式的優先級會高於外鏈的。可是實際狀況下會有意外發生，那就是在移動端iphone上面，觸摸會觸發CSS的hover，而且這個的觸發會很高几率地先於touchstart事件，在這個事件裏面會判斷當前是顯示仍是隱藏的狀態，因爲css的hover發揮了做用，因此判斷爲顯示，而後又把它隱藏了。也就是說，點一次不出來，要點兩次。因此最好別兩個同時寫。
第二種場景，使用子元素，這個更簡單。把hover的目標和隱藏的對象看成同一個父容器的子元素，而後hover寫在這個父容器上面就能夠了，不用像上面那樣，隱藏元素也要寫個hover：

 

3. 自定義radio/checkbox的樣式

咱們知道，使用原生的radio/checkbox是不能夠改變它的樣式的，得本身用div/span去畫，而後再去監聽點擊事件。可是這樣須要本身去寫邏輯控制，例如radio只能選一個的功能，另外一個是沒有辦法使用change事件。就是沒有用原生的方便。

可是實際上能夠用一點CSS3的技巧實現自定義的目的，以下，就是用原生實現的radio：

這個主要是藉助了CSS3提供的一個僞類:checkd，只要radio/checkbox是選中狀態，這個僞類就會生效，所以能夠利用選中和非選中的這兩種狀態，去切換不一樣的樣式。以下把一個checkbox和一個用來自定義樣式的span寫在一個label裏面，checkbox始終隱藏：

寫在label裏面是爲了可以點擊span的時候改變checkbox的狀態，而後再改一下選中態的樣式便可：

關鍵在於這一步，添加一個打勾的背景圖也好，使用圖標字體也好。
:checked兼容性仍是比較好的，只要你不用兼容IE8就可使用，或者說只要你能夠用nth-of-type，就能夠用:checked

4. 多列等高

多列等高的問題是這樣的，排成一行的幾列因爲內容長短不一致，致使容器的高度不一致：

你能夠用js算一下，以最高的一列的高度去設置全部列的高度，然而這個會形成頁面閃動，剛開始打開頁面的時候高度不一致，而後發現忽然又對齊了。這個解決辦法主要有兩種：

第一種是每列來一個很大的padding，再來一個很大的負的margin值矯正回去，就對齊了，以下：

效果以下：

你會發現，這個對齊是對齊了，可是底部的border沒有了，設置的圓角也不起做用了，究其緣由，是由於設置了一個很大的padding值，致使它的高度變得很大，如上圖所示。因此若是你想在底部absolute定位放一個連接」更多>>」也是實現不了了。

 

第二種辦法是藉助table的自適應特性 ，每一個div都是一個td，td確定是等高的，html結構不變，CSS改一下：

對齊效果以下：

這樣還有一個好處，就是在響應式開發的時候，能夠藉助媒體查詢動態地改變display的屬性，從而改它排列的方式。例如在小於500px時，每一列佔滿一行，那麼只要把display: table-cell覆蓋掉就行了：

效果以下所示：

若是在pad 1024px的設備上，但願一行顯示2個，那應該怎麼辦呢？因爲上面用的td，一定會排在同一行。其實能夠在第二個和第三個中間加一個tr，讓它換行：

在大屏和小屏時，tr是不顯示的，而在中屏時，tr顯示：

就可以實如今小屏時一行排兩列了，只是這個有個小問題，就是在中屏拉到大屏的時候tr的dipslay: none已經沒有什麼做用，由於table的佈局已經計算好。可是通常應該不用考慮這種拉伸範圍很大的狀況，正常刷新頁面是能夠的，若是真要解決那得藉助下js

5.須要根據個數顯示不一樣樣式

例如說可能有1~3個item顯示在同一行，而item的個數不必定，若是1個，那這個item佔寬100%，2個時每個50%，3個時每個33%，這個你也能夠用js計算一下，可是用CSS3就能夠解決這個問題：

第5行的意思就是選擇li的第一個元素，而且它是倒數第二個元素，第6行的意思是選擇前面有是第一個且是倒數第二個li的全部li，第一行是選擇了第一個，第二行選擇除第一個外的其它全部元素。有三個元素的相似。

6. 使用表單提交

提交請求有兩種方式，一種是ajax，另一種是表單提交。不少人都知道ajax，但每每忽略了還有個form提交。

假設在首頁有一個搜索的表單，點擊search的時候就跳到列表頁

你能夠一個個去獲取全部的input的值，而後把它拼到網址參數重定向一下，可是其實能夠不用這樣，用一個表單提交就行了：

將全部字段的名字寫在input的name裏面，而後form的action爲搜索頁的連接。這樣子不用一行js代碼就可以搜索跳轉。

若是你須要作表單驗證，那就監聽submit事件，而後作驗證，驗證經過則調一下原生的submit就能夠提交了，也是不須要手動去獲取form的值

 

7.自動監聽回車事件

這個的場景是但願按回車的時候可以觸發請求，像第6點，按回車實現跳轉，或者是像下面的，按下回車就送一條聊天消息：

一般的作法是監聽下keypress事件，而後檢查一下keycode是否是回車，若是是則發請求。

可是其實有個特別簡單的辦法，也是不須要一行JS，那就是把表單寫在一個form裏面，按回車會自動觸發submit事件。讀者能夠本身試試。這個就啓示咱們要用語義的html組織，而不是所有都用div。若是用相應的html標籤，瀏覽器會自動作一些優化，特別是表單提交的input。

 

8.巧用CSS3僞類

CSS3的僞類提供了狀態切換，除了第3點提到的checked以外，還有其它幾個很好用的，例如:focus、:invalid等

1.  例以下面的效果：focus的時候把左邊的放大鏡顏色加深：
focus effect
借用:focus實現：

2. 再如，若是用戶輸入不合法，則下一步是半透明不可點的狀態：

實現這一步能夠用html5的input和css3的:invalid

經過input的type和pattern屬性約束合法性，而後觸發:invalid

 

JS是萬能的，幾乎能夠作任何事情，可是有時候會顯得十分笨拙，在js/html/css三者間靈活地切換，每每會極大地簡化開發，沒有誰是最好的語言，只有適不適合。只要用得好，無論黑貓白貓，都是好貓。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程