輕松更改所選文本顏色？

Question

我正在嘗試為我的網站開發暗模式和亮模式。 我已經這樣做了，但現在選定的文本在淺色模式下看起來很奇怪。 我想使用 JavaScript 更改它的選定文本顏色。 我已經看到這個代碼發布了，所以我不確定它是否有幫助。 但無論如何我都會提供。

<style>
::selection {
    color:blue;
    background:yellow;
    font-size:14px;
}

::-moz-selection {
    color:blue;
    background:yellow;
    font-size:14px;
}
</style>

重申一下，我正在嘗試使用 JavaScript 設置選定的文本顏色 css 。 有誰知道如何做到這一點？

Answer 1

CSS 自定義屬性 / CSS 變量將是更好的方法。

你可以這樣做：

 const root = document.documentElement; const darkMode = document.getElementById("darkMode"); darkMode.addEventListener("click", () => { root.style.setProperty("--selectionBG", "blueviolet"); root.style.setProperty("--selectionColor", "turquoise"); document.body.style.backgroundColor = "#111"; document.body.style.color = "#eee"; });

 :root { --selectionBG: cyan; --selectionColor: navy; }::selection { color: var(--selectionColor); background: var(--selectionBG); }

 <body> <button id="darkMode">Dark Mode</button> <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet natus quia minus cum.</h1> </body>

在 Codepen 上檢查它

Answer 2

 #Mytext { color: #FF0000; }

 <b id ="Mytext">Your text<b>

GO TO https://www.w3schools.com/cssref/css_colors.asp對於我使用的colors！

輕松更改所選文本顏色？

問題描述

2 個解決方案

解決方案1
2 已采納 2021-03-26 13:42:00

CSS 自定義屬性 / CSS 變量將是更好的方法。

解決方案2
-2 2021-05-25 18:39:40

輕松更改所選文本顏色？

問題描述

2 個解決方案

解決方案1 2 已采納 2021-03-26 13:42:00

CSS 自定義屬性 / CSS 變量將是更好的方法。

解決方案2 -2 2021-05-25 18:39:40

解決方案1
2 已采納 2021-03-26 13:42:00

解決方案2
-2 2021-05-25 18:39:40