1. ホーム
  2. javascript

[解決済み] JavaScriptでCSS擬似要素のスタイルを変更する [重複].

2023-05-14 19:22:48

質問

CSSの擬似要素のスタイルをJavaScriptで変更することは可能でしょうか?

例えば、スクロールバーの色を動的にこのように設定したいのですが。

document.querySelector("#editor::-webkit-scrollbar-thumb:vertical").style.background = localStorage.getItem("Color");

というように、スクロールバーを隠すように指示することもできるようにしたい。

document.querySelector("#editor::-webkit-scrollbar").style.visibility = "hidden";

しかし、これらのスクリプトの両方が返されます。

Uncaught TypeError: null のプロパティ 'style' を読み取ることができません。

何か他の方法はないでしょうか?

クロスブラウザの相互運用性は重要ではなく、私はそれがwebkitブラウザで動作する必要があるだけです。

どのように解決するのですか?

<ブロッククオート

EDIT : そこで は、技術的にはJavaScriptでCSS擬似要素のスタイルを直接変更する方法であり、例えば この回答が説明している のように、技術的には、ここで提供される方法が望ましいです。

JavaScriptで擬似要素のスタイルを変更する最も近い方法は、クラスを追加・削除し、それらのクラスで擬似要素を使用することです。スクロールバーを非表示にする例です。

CSS

.hidden-scrollbar::-webkit-scrollbar {
   visibility: hidden;
}

JavaScript

document.getElementById("editor").classList.add('hidden-scrollbar');

後で同じクラスを削除するためには

document.getElementById("editor").classList.remove('hidden-scrollbar');