亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

js檢測(cè)瀏覽器夜晚/黑暗（dark）模式方法

 更新時(shí)間：2022年10月15日 15:55:11   投稿：wdc  
這篇文章主要介紹了js檢測(cè)瀏覽器夜晚（dark）模式方法,需要的朋友可以參考下

使用CSS，我們可以使用preferreds-color-scheme媒體查詢來檢測(cè)暗模式。

但是..如果我們必須使用JavaScript怎么辦？ 我最近偶然發(fā)現(xiàn)了這個(gè)問題，因?yàn)槲矣幸恍㎎avaScript代碼向頁面添加了圖像，但是我想基于明暗模式顯示不同的圖像。

這是俺的解決辦法。

首先，檢測(cè)matchMedia對(duì)象是否存在（否則瀏覽器不支持夜晚模式（dark mode），您可以退回到白天模式（light mode））。

使用以下命令檢查其是否為夜晚模式（dark mode）：

window.matchMedia('(prefers-color-scheme: dark)').matches

如果啟用了暗模式，則將返回true。

這是一個(gè)完整的示例，如果圖像為夜晚模式（dark mode），我將反轉(zhuǎn)圖像的顏色：

const img = document.querySelector('#myimage')
if (window.matchMedia && 
    window.matchMedia('(prefers-color-scheme: dark)').matches) {
  img.style.filter="invert(100%)";
}

但是，存在一個(gè)小問題：如果用戶在使用我們的網(wǎng)站時(shí)更改了模式怎么辦？

我們可以使用事件偵聽器檢測(cè)模式更改，實(shí)現(xiàn)代碼如下所示：

window.matchMedia('(prefers-color-scheme: dark)')
      .addEventListener('change', event => {
  if (event.matches) {
    //dark mode
  } else {
    //light mode
  }
})

更多關(guān)于js檢測(cè)瀏覽器夜晚（dark）模式方法請(qǐng)查看下面的相關(guān)鏈接

相關(guān)文章

最新評(píng)論