CSSとJavaScriptの記事を使用して、Scrollbarの色を操作します

スクロールバーのデフォルトの色についてのことは、それが鈍くて醜いことです - 通常、この色は灰色です。あなたのサイトの全体的なテーマに適してこの色を変更するのはいいことではないでしょうか？幸いなことに、カスケードスタイルのシートとJavaScriptを使用して、まさにそれを行うことができます！

css

を使用します CSSでは、以下の定義をページの上部に追加して、ブラウザのスクロールバーの色をカスタマイズするだけです。 CSSの素晴らしいところは、それを理解していないブラウザがそれをスキップするだけだということです。スクロールバーの絵画は、IE5.5以上でサポートされています。 Scrollbarがその多くのコンポーネントで構成されていることに気付かなかったに違いない！最初の3つの定義は、スクロールバーの最も目に見える側面に対応するため、最も重要です。他の定義を自由に遊んで、それらが影響するものを確認してください。 JavaScript

を使用して

JavaScriptを使用して、Scrollbarの色を動的に変更することもできます。これは、ある色から別の色に巻物を交互にするなど、派手なことをしたいときに役立ちます。 Scrollbar CSS定義のJavaScript翻訳は次のとおりです。 document.body.style.scrollbarfacecolor = "colorname" document.body.style.scrollbararrowcolor = "colorname" document.body.style.scrollbartrackcolor = "colorname" document.body.style.scrollbarshadowcolor = "colorname" document.body.style.scrollbarhighlightcolor = "colorname" document.body.style.scrollbar3dlightcolor = "colorname" document.body.style.scrollbardarkshadowcolor = "colorname" これは、毎秒色を変える「点滅」の巻物の例です。 varモード= 0 function blinkscroll（）{ if（mode == 0） document.body.style.scrollbarfacecolor =” blue” それ以外 document.body.style.scrollbarfacecolor =” green” モード=（モード== 0）？ 1：0 } setInterval（“ Blinkscroll（）”、1000） Svetlin Staevによって書かれた、OnMouseover Scrollbar Effectと呼ばれるJavaScriptを使用したScrollbar操作のより精巧な例が書かれています。これにより、マウスを上に移動して離れたときに、スクロールバーの色が変わります。 Scrollbarの色をカスタマイズして、他のサイトと溶け込むサイトが増えています。これらのヒントがあなたが同じことをするのを助けるのに役立つと思うことを願っています！

CSSとjavaScriptの色についてよく尋ねる質問

CSSを使用してスクロールバーの色を変更するにはどうすればよいですか？

CSSを使用してScrollbarの色を変更するのは非常に簡単です。 :: --webkit-scrollbar pseudo-elementを使用して、Scrollbarを選択してから、目的のスタイルを適用できます。例は次のとおりです。

:: -webkit-scrollbar {
width：10px;
}

:: - webkit-scrollbar-track {
clults> ＃888;
}

:: -webkit-scrollbar-thumb：Hover { background：＃555;
}
この例では、スクロールバーの幅は10pxに設定されています。ハンドルの上にホバリングすると、さらに暗い灰色に変わります。

JavaScriptを使用して、Webページ上の要素の色を変更できますか？これを行うには、要素のスタイルプロパティにアクセスしてから、その色プロパティを変更できます。例は次のとおりです。

document.getElementById（ "myElement"）。style.color= "red";

この例では、IDの「myElement」の要素のテキスト色が赤に変更されます。グラデーションカラー効果。例は次のとおりです。

背景：線形勾配（右、赤、オレンジ、緑、青、青、バイオレット）;
この例では、要素の背景は赤から紫への移行、左から右に移動する勾配になります。要素の背景色を変更します。これを行うには、要素のスタイルプロパティにアクセスしてから、バックグラウンドカラープロパティを変更できます。例は次のとおりです。
document.getElementById（ "myElement"）。style.backgroundcolor= "blue";

この例では、IDの「myElement」の要素の背景色は青に変更されます。要素。例は次のとおりです。

.myElement {

ofacity：0.5;
}
この例では、クラス「MyElement」の要素は0.5に設定され、半透明になります。要素の。これを行うには、要素のスタイルプロパティにアクセスして、その不透明なプロパティを変更することができます。例は次のとおりです。
document.getElementbyId（ "myElement"）。style.opacity= "0.5";

この例では、IDの「myElement」の要素の不透明度が0.5に変更され、半透明になります。要素の境界色の色を設定するために使用できること。例は次のとおりです。

.myElement {

border-color：red;
}
この例では、クラス「myElement」の要素は境界色の色を赤に設定します。

JavaScriptを使用して要素の境界色の色を変更できますか？

​​

はい、JavaScriptを使用して要素の境界色の色を変更できます。これを行うには、要素のスタイルプロパティにアクセスしてから、BorderColorプロパティを変更できます。例は次のとおりです。
document.getElementbyId（ "myElement"）。style.bordercolor= "red";
この例では、IDの「myElement」の要素の境界色が赤に変更されます。 要素。例は次のとおりです。

.myElement {

color：blue;

}

この例では、クラス「myElement」の要素にはテキスト色が青に設定されます。これを行うには、要素のスタイルプロパティにアクセスしてから、その色プロパティを変更できます。例は次のとおりです。

document.getElementById（ "myElement"）。style.color= "blue";
この例では、IDの「myElement」の要素のテキスト色が青に変更されます。

以上がCSSとJavaScriptの記事を使用して、Scrollbarの色を操作しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。