[解決済み] 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' を読み取ることができません。
何か他の方法はないでしょうか?
どのように解決するのですか?
<ブロッククオート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');
関連
-
[解決済み] 最初の要素にクラスを指定するCSSセレクタ
-
[解決済み] javascript(またはjQuery)を使って::beforeや::afterなどのCSS疑似要素を選択し、操作する。
-
[解決済み] CSSは常にJavascriptより優先されるべきか?
-
[解決済み] hr要素の色を変更する
-
[解決済み] 入力フィールドに :before や :after 疑似要素を使用できますか?
-
[解決済み] 要素のみのCSSスタイルのリセット/削除
-
[解決済み】CSSを使用して、すべてのブラウザでdiv要素を垂直方向に中央に配置するにはどうすればよいですか?
-
[解決済み] jQueryの$という記号の意味は何ですか?
-
[解決済み] なぜjavascriptのES6 Promisesはresolve後も実行を継続するのですか?
-
[解決済み] JavaScriptでDIVを表示・非表示にするには?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] javascript(またはjQuery)を使って::beforeや::afterなどのCSS疑似要素を選択し、操作する。
-
[解決済み] ジェスト あるクラスの特定のメソッドをモックする方法
-
[解決済み] jqueryでdivの要素がオーバーフローしていないかチェックする
-
[解決済み] Google maps API V3 - 同一地点に複数のマーカーを設置する。
-
[解決済み] ExtJS 4のイベントハンドリングについて
-
[解決済み] JavaScriptで:hoverのCSSプロパティを変更する
-
[解決済み] 文字列がhtmlであるかどうかをチェックする
-
[解決済み] Reactメモを使うべきではない場合とは?
-
[解決済み] JavaScriptでjson-objectのキーを取得する [重複].
-
[解決済み] 文字列とラベルのローカライズとグローバリゼーションのベストプラクティス【終了しました