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

成都創(chuàng)新互聯(lián)從2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元華容做網(wǎng)站,已為上家服務(wù),為華容各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792

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

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

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

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

CSS可以自動(dòng)檢測(cè)，但是有時(shí)候，在JS中，我們也需要根據(jù)不同的系統(tǒng)主題，然后實(shí)現(xiàn)不同的交互邏輯，或者渲染出不一樣的內(nèi)容。

怎么辦？似乎一時(shí)間也找不到現(xiàn)成的JS API來檢測(cè)系統(tǒng)模式，只能借助于CSS中傳參了。這就是一個(gè)典型的場(chǎng)景，類似的場(chǎng)景還有很多。

例如：

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

我們?cè)谧鲰憫?yīng)式布局的時(shí)候，經(jīng)常會(huì)需要設(shè)定一個(gè)臨界寬度值，例如當(dāng)設(shè)備的寬度小于640像素的時(shí)候，我們就認(rèn)為是進(jìn)入了移動(dòng)端；或者是寬度小于480的像素的時(shí)候，就使用移動(dòng)端布局等。

此時(shí)，JavaScript代碼也需要根據(jù)這個(gè)臨界寬度實(shí)現(xiàn)不同的交互效果，大于多少的時(shí)候是PC的交互，小于多少的時(shí)候是移動(dòng)端布局下的交互。

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

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

要是這種約定會(huì)有一個(gè)問題，等項(xiàng)目過了一段時(shí)間之后，發(fā)現(xiàn)這個(gè)臨界寬度有問題，比方說手機(jī)橫屏的時(shí)候，它的寬度是大于 480px 的，也應(yīng)該是移動(dòng)端的布局方式，于是開發(fā)就改成了 640px 。

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

結(jié)果忘記JS代碼中也有這一茬判斷，結(jié)果就會(huì)出現(xiàn)bug。

如果原先實(shí)現(xiàn)的時(shí)候，我們的JavaScript代碼中的屏幕判斷是基于CSS傳參的話，那就不會(huì)有這樣子的維護(hù)問題出現(xiàn)。

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

我們會(huì)開發(fā)一些ui組件，希望在桌面端和移動(dòng)端，以及物聯(lián)網(wǎng)設(shè)備上通用。

有些組件在桌面當(dāng)我們使用 mouseenter 或者 mouseover 事件來實(shí)現(xiàn)體驗(yàn)還是很不錯(cuò)的，非常便捷。但是如果這些東西用在移動(dòng)端以及其他一些觸屏設(shè)備上，則這個(gè)世界就有問題啊，因?yàn)闆]有這種hover的說法。

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

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

可惜JS中并沒有這樣的API直接判斷。很多人應(yīng)該是通過判斷瀏覽器是否支持 touchstart 之類的事件來進(jìn)行判斷的。不過可惜這種判斷方法是不準(zhǔn)確的。因?yàn)楹芏嘤|摸設(shè)備也是可以連接鼠標(biāo)設(shè)備的，此時(shí)hover事件也應(yīng)該被良好支持。

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

好啦，下面問題來了，上面舉了這三個(gè)案例，我們?nèi)绾瓮ㄟ^CSS把我們的參數(shù)傳遞給JS代碼呢？

二、CSS傳參給JS的方法

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

1. content偽元素內(nèi)容傳參

例如：

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

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

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

本文就預(yù)埋了上面這樣的CSS代碼，因此，Chrome瀏覽器下，打開控制臺(tái)，進(jìn)入移動(dòng)端預(yù)覽模式，輸入JS測(cè)試下，可以看到我們CSS傳遞的字符串信息被JS獲取到了。

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

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

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

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

: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檢測(cè)代碼：

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

例如在我這個(gè)電腦上運(yùn)行的結(jié)果是下圖這個(gè)：

在Mac OS X或者移動(dòng)端設(shè)備上應(yīng)該會(huì)顯示其他的值，歡迎幫忙測(cè)試截個(gè)圖發(fā)我，我更新到文章中。

使用CSS自定義屬性傳統(tǒng)的好處是非常靈活，我們可以定義很多很多的變量都可以。而且其實(shí)我們也沒有任何必要擔(dān)心兼容性的問題。為什么呢？因?yàn)榉彩侵С趾谝鼓Ｊ降脑O(shè)備瀏覽器，一定支持CSS自定義屬性。

因此，綜合來看，使用CSS自定義屬性傳參在黑暗模式這個(gè)場(chǎng)景中是最佳的實(shí)現(xiàn)。但是，如果是基于設(shè)備寬度傳參響應(yīng)式布局這場(chǎng)場(chǎng)景，還是使用CSS content 屬性傳參為佳。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何通過CSS向JS傳參”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!