如何通過CSS向JS傳參

這篇文章主要介紹了如何通過CSS向JS傳參，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

一、需要通過CSS傳參的背景

CSS中有很多媒體查詢的用法，例如設備尺寸判別，是否支持鼠標行為，是否是黑暗模式，是否是省電模式等。

比方說最近經常提到的黑暗模式，深色主題：

@media (prefers-color-scheme: dark) {
    /* 黑暗模式，深色主題 */
}
@media (prefers-color-scheme: light) {
    /* 淺色主題 */
}

CSS可以自動檢測，但是有時候，在JS中，我們也需要根據不同的系統主題，然后實現不同的交互邏輯，或者渲染出不一樣的內容。

怎么辦？似乎一時間也找不到現成的JS API來檢測系統模式，只能借助于CSS中傳參了。這就是一個典型的場景，類似的場景還有很多。

例如：

1. CSS和JS邊界寬度一致性

我們在做響應式布局的時候，經常會需要設定一個臨界寬度值，例如當設備的寬度小于640像素的時候，我們就認為是進入了移動端；或者是寬度小于480的像素的時候，就使用移動端布局等。

此時，JavaScript代碼也需要根據這個臨界寬度實現不同的交互效果，大于多少的時候是PC的交互，小于多少的時候是移動端布局下的交互。

很多人在實際開發的時候就CSS代碼和JS代碼約定一下，例如：

@media screen and (max-width: 480px) {
    /* 小屏幕寬度下的響應式布局 */
}
if (screen.width < 480) {
    /* 小屏幕寬度下的交互行為 */
}

要是這種約定會有一個問題，等項目過了一段時間之后，發現這個臨界寬度有問題，比方說手機橫屏的時候，它的寬度是大于 480px 的，也應該是移動端的布局方式，于是開發就改成了 640px 。

@media screen and (max-width: 640px) {
    /* 小屏幕寬度下的響應式布局 */
}

結果忘記JS代碼中也有這一茬判斷，結果就會出現bug。

如果原先實現的時候，我們的JavaScript代碼中的屏幕判斷是基于CSS傳參的話，那就不會有這樣子的維護問題出現。

2. 瀏覽器是否支持:hover偽類交互

我們會開發一些ui組件，希望在桌面端和移動端，以及物聯網設備上通用。

有些組件在桌面當我們使用 mouseenter 或者 mouseover 事件來實現體驗還是很不錯的，非常便捷。但是如果這些東西用在移動端以及其他一些觸屏設備上，則這個世界就有問題啊，因為沒有這種hover的說法。

好在CSS代碼中是有關于瀏覽器是否支持:hover偽類交互媒體查詢判斷（此查詢有專門文章介紹，點擊這里）：

@media (any-hover: none) {
    /* 設備不支持hover事件 */
}

可惜JS中并沒有這樣的API直接判斷。很多人應該是通過判斷瀏覽器是否支持 touchstart 之類的事件來進行判斷的。不過可惜這種判斷方法是不準確的。因為很多觸摸設備也是可以連接鼠標設備的，此時hover事件也應該被良好支持。

因此，最后的方法還是通過CSS媒體查詢判斷，然后把這個判斷結果以參數形式傳遞給js。

好啦，下面問題來了，上面舉了這三個案例，我們如何通過CSS把我們的參數傳遞給JS代碼呢？

二、CSS傳參給JS的方法

通常借助CSS向JS傳參，我都是使用下面這兩種方法。

1. content偽元素內容傳參

例如：

@media (any-hover: none) {
    body::before {
        content: 'hoverNone';
        display: none;
    }
}

此時就可以通過JS代碼獲取body偽元素傳遞的信息是什么了：

var strContent = getComputedStyle(document.body, '::before').content;
// strContent結果是'none'則表示支持hover
// strContent結果是'"hoverNone"'則表示不支持hover經過，需要換成click事件

本文就預埋了上面這樣的CSS代碼，因此，Chrome瀏覽器下，打開控制臺，進入移動端預覽模式，輸入JS測試下，可以看到我們CSS傳遞的字符串信息被JS獲取到了。

此時，我們就可以根據 ::before , ::after 偽元素配合 content 屬性，獲知CSS中傳遞的信息了。

這種傳參方式的優點在于兼容性相對較好，但是不足卻也很明顯，那就是我們傳遞的參數值的數量是有限的，如果我們想一次性傳多個值，就有些捉襟見肘，此時可以試試下面這種方法，借助CSS自定義屬性。

2. CSS自定義屬性（CSS變量）傳參

直接上代碼，有了 CSS自定義屬性（CSS變量） ，黑暗模式和淺色模式的開發和維護工作就變得相對容易很多，除此之外，這個CSS自定義屬性我們還可以用來給JS做模式識別。

:root {
    --mode: 'unknown';
}
@media (prefers-color-scheme: dark) {
    /* 黑暗模式 */
    :root {
         --mode: 'dark';
         --colorLink: #bfdbff;
         --colorMark: #cc0000;
         --colorText: #ffffff;
         --colorLight: #777777;
    }
}
@media (prefers-color-scheme: light) {
    /* 淺色主題 */
    :root {
         --mode: 'light';
         --colorLink: #34538b;
         --colorMark: #cc0000;
         --colorText: #000000;
         --colorLight: #cccccc;
    }
}

JS檢測代碼：

var mode = getComputedStyle(document.documentElement).getPropertyValue('--mode').trim();
// mode結果是'"dark"'則表示黑夜主題，深色模式，黑暗風格，護眼模式。
// mode結果是其他表示默認模式

例如在我這個電腦上運行的結果是下圖這個：

在Mac OS X或者移動端設備上應該會顯示其他的值，歡迎幫忙測試截個圖發我，我更新到文章中。

使用CSS自定義屬性傳統的好處是非常靈活，我們可以定義很多很多的變量都可以。而且其實我們也沒有任何必要擔心兼容性的問題。為什么呢？因為凡是支持黑夜模式的設備瀏覽器，一定支持CSS自定義屬性。

因此，綜合來看，使用CSS自定義屬性傳參在黑暗模式這個場景中是最佳的實現。但是，如果是基于設備寬度傳參響應式布局這場場景，還是使用CSS content 屬性傳參為佳。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何通過CSS向JS傳參”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!