Manipulieren

Die Standardfarbe von Scrollbars ist, dass sie stumpf und hässlich ist - normalerweise ist diese Farbe grau. Wäre es nicht schön, diese Farbe zu ändern, um das Gesamtthema Ihrer Website besser zu passen? Zum Glück können Cascading -Stilblätter und JavaScript verwendet werden, um genau das zu tun!

Verwenden von CSS

Fügen Sie in CSS einfach die folgenden Definitionen zum oberen Rand Ihrer Seite hinzu, um die Bildlaufbuhlfarben des Browsers anzupassen. Das Tolle an CSS ist, dass Browser, die es nicht verstehen, es einfach überspringen. Die Bildlaufleiste wird von IE5.5 und Up unterstützt. Ich wette, Sie haben nie bemerkt, dass die Scrollbar aus diesen vielen Komponenten bestand! Die ersten drei Definitionen sind die wichtigsten, da sie den sichtbarsten Aspekten der Scrollbar entsprechen. Fühlen Sie sich frei, mit den anderen Definitionen herumzuspielen, um zu sehen, was sie beeinflussen.

JavaScript

Sie können auch JavaScript verwenden, um die Bildlauffarbe dynamisch zu ändern. Dies ist nützlich, wenn Sie etwas Schickeses tun möchten, z. B. die Bildlaufleiste von einer Farbe zur anderen wechseln. Die JavaScript -Übersetzung der Scrollbar CSS -Definitionen lauten: 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" Hier ist ein Beispiel für eine "blinkende" Bildlaufleiste, die jede Sekunde die Farbe ändert: <script> var modus = 0 Funktion blinkscroll () { if (modus == 0) document.body.style.scrollBarfacecolor = "Blau" anders document.body.style.scrollBarfacecolor = "Green" modus = (modus == 0)? 1: 0 } setInterval ("blinkscroll ()", 1000) </script> Ein aufwändigeres Beispiel für die Manipulation von Scrollbar unter Verwendung von JavaScript, das als Onmouseover -Scrollbar -Effekt bezeichnet wird, wurde von Svetlin Staev geschrieben. Dies ändert die Bildlauffarbfarben, wenn Sie Ihre Maus über und weg bewegen. Ich sehe immer mehr Websites, die die Bildlauffarbe anpassen, um sich in den Rest ihrer Websites zu mischen. Ich hoffe, Sie finden diese Tipps nützlich, um Ihnen dabei zu helfen, dasselbe zu tun!

häufig gestellte Fragen zu CSS und JavaScript -Farben

Wie kann ich die Farbe der Bildlaufleiste mit CSS ändern? Sie können das Pseudo-Element ::-Webkit-Scrollbar verwenden, um die Bildlaufleiste auszuwählen und dann Ihre gewünschten Stile anzuwenden. Hier ist ein Beispiel:

::-webkit-scrollBar {
width: 10px; #888;
}

::-webkit-scrollBar-Damb: Hover {
Hintergrund: #555;
}
In diesem Beispiel ist die Breite des Scrollbar auf 10px, der Track (der Teil, dass der Griff mit einem leichten grauen Farbton eingestellt ist) auf eine helle graue Farbe eingestellt ist, und das Griff (oder „Thumbum“). Wenn Sie über dem Griff schweben, ändert sich es zu einem noch dunkleren Grau.

Kann ich JavaScript verwenden, um die Farbe von Elementen auf einer Webseite zu ändern? Sie können dies tun, indem Sie auf die Style -Eigenschaft eines Elements zugreifen und dann seine Farbeigenschaft ändern. Hier ist ein Beispiel:

document.getElementById ("myelement"). Style.color = "rot";
In diesem Beispiel wird die Textfarbe des Elements mit der ID "Myelement" in rot geändert. Gradientenfarbeneffekt. Hier ist ein Beispiel:

Hintergrund: Linear-Gradient (rechts, rot, orange, gelb, grün, blau, Indigo, Violett);

In diesem Beispiel wird der Hintergrund des Elements ein Gradient sein, der von rotes Übergang zu Violett überträgt. Um die Hintergrundfarbe eines Elements zu ändern. Sie können dies tun, indem Sie auf die Style -Eigenschaft eines Elements zugreifen und anschließend seine Hintergrund -Color -Eigenschaft ändern. Hier ist ein Beispiel:

document.getElementById ("myelement"). Style.backgroundcolor = "blau"; ein Element. Hier ist ein Beispiel:

.MyElement {
Opazität: 0.5;
}

In diesem Beispiel wird das Element mit der Klasse „Myelement“ seine Opazität auf 0,5 einstellen, wodurch es semi-transparent ist. Opazität eines Elements. Sie können dies tun, indem Sie auf die Style -Eigenschaft eines Elements zugreifen und dann seine Opazitätseigenschaft ändern. Hier ist ein Beispiel:

document.getElementById ("myelement"). Style.opacity = "0,5"; Sie können die Randfarbe eines Elements einstellen. Hier ist ein Beispiel:

.MyElement {
Grenzfarbe: Rot;

Kann ich JavaScript verwenden, um die Grenzfarbe eines Elements zu ändern? Sie können dies tun, indem Sie auf die Style -Eigenschaft eines Elements zugreifen und dann seine BorderColor -Eigenschaft ändern. Hier ist ein Beispiel:

document.getElementById ("myelement"). Style.bordercolor = "rot";
In diesem Beispiel wird die Randfarbe des Elements mit der ID "Myelement" in rot geändert. Element. Hier ist ein Beispiel:

.MyElement {

Farbe: Blau;

}

In diesem Beispiel wird das Element mit der Klasse „Myelement“ seine Textfarbe auf blau eingestellt. Sie können dies tun, indem Sie auf die Style -Eigenschaft eines Elements zugreifen und dann seine Farbeigenschaft ändern. Hier ist ein Beispiel:

document.getElementById ("myelement"). Style.color = "blau";
In diesem Beispiel wird die Textfarbe des Elements mit der ID "Myelement" in Blau geändert.

Das obige ist der detaillierte Inhalt vonManipulieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!