検索
ホームページウェブフロントエンドCSSチュートリアルJavaScript でスクロールバーなどの CSS 疑似要素を動的にカスタマイズするにはどうすればよいですか?

How Can JavaScript Dynamically Customize CSS Pseudo-Elements like Scrollbars?

JavaScript を使用した CSS 擬似要素の動的カスタマイズ

多くの開発者は、JavaScript を使用して CSS 擬似要素のスタイルを動的に変更するという課題に直面しています。この質問では、JavaScript スクリプトを使用してスクロールバーなどの要素の外観と動作を変更する可能性を検討します。

スクロールバーの色と表示の変更

この質問では、次の 2 つのスクリプトを試みています。スクロールバーの色と可視性を変更する:

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

ただし、これらのスクリプトは次のように実行されます。ブラウザ間の互換性の問題と、選択した要素の null 値によるエラーが返されます。

CSS Vars を使用したブラウザ間の実装

ブラウザの互換性は、懸念がある場合、その答えは CSS 変数 (CSS Vars) を使用した解決策を提案しています。 CSS Vars を使用すると、JavaScript を通じて CSS プロパティを動的に変更できます。

スクロールバーの背景の CSS 変数を定義し、それを擬似要素ルールで使用することで、次を使用してスクロールバーの色を変更できます。 JavaScript:

CSS:

#editor {
  --scrollbar-background: #ccc;
}

#editor::-webkit-scrollbar-thumb:vertical {
  /* Fallback */
  background-color: #ccc;
  /* Dynamic value */
  background-color: var(--scrollbar-background);
}

JavaScript:

document.getElementById("#editor").style.setProperty('--scrollbar-background', localStorage.getItem("Color"));

このアプローチにより、ブラウザの制限に関係なく、スクロールバーの色を指定します。

以上がJavaScript でスクロールバーなどの CSS 疑似要素を動的にカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
アストロコンポーネントとタイプスクリプトで強力なDXを作成しますアストロコンポーネントとタイプスクリプトで強力なDXを作成しますApr 23, 2025 am 09:10 AM

チームが一貫してコードするのを支援するためにできることの1つは、コーディング中に特定のコンポーネントの構成可能なオプションをすべて利用できるように、タイプチェックを提供することです。ブライアンは、AstroCompを使用するときにタイプスクリプトでこれをどのように行うかを示しています

マウスの動きのシミュレーションマウスの動きのシミュレーションApr 22, 2025 am 11:45 AM

ライブトークやクラス中にインタラクティブなアニメーションを表示しなければならなかった場合、スライドと対話するのが必ずしも簡単ではないことを知っているかもしれません

Astro ActionsとFuse.jsでのパワー検索Astro ActionsとFuse.jsでのパワー検索Apr 22, 2025 am 11:41 AM

Astroを使用すると、ビルド中にほとんどのサイトを生成できますが、fuse.jsのようなものを使用して検索機能を処理できるサーバー側のコードが少しあります。このデモでは、ヒューズを使用して、個人の「ブックマーク」セットを検索します。

未定義:3番目のブール値未定義:3番目のブール値Apr 22, 2025 am 11:38 AM

ドキュメントが保存されている間にGoogleドキュメントに表示されるものと同様に、プロジェクトの1つに通知メッセージを実装したかったのです。言い換えれば、a

三元声明の防衛三元声明の防衛Apr 22, 2025 am 11:25 AM

数ヶ月前、私はハッカーのニュースに出演していました(1つのように)。あなたがこのアイデアに慣れていない場合(私のように

多言語翻訳にWeb Speech APIを使用します多言語翻訳にWeb Speech APIを使用しますApr 22, 2025 am 11:23 AM

サイエンスフィクションの初期の頃から、私たちは私たちに話しかける機械について空想してきました。今日は当たり前です。それでも、作成のための技術

Jetpack GutenbergブロックJetpack GutenbergブロックApr 22, 2025 am 11:20 AM

私はその日私たちにワードキャンプにいたので、グーテンバーグがコアにリリースされたときのことを覚えています。数ヶ月が今から経過しているので、ますます私たちのことを想像してください

VUEで再利用可能なページネーションコンポーネントを作成しますVUEで再利用可能なページネーションコンポーネントを作成しますApr 22, 2025 am 11:17 AM

ほとんどのWebアプリケーションの背後にあるアイデアは、データベースからデータを取得し、可能な限り最良の方法でユーザーに提示することです。そこでデータを扱うとき

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)