2017-05-10 2 views
1

Ich möchte ein Werkzeug wie gezeigt here, wo der Benutzer in der Lage, den Stil der Webseite dynamisch ändern können.Fähigkeit, die Websites css von einem integrierten Stil Auswahlwerkzeug zu ändern

Ich habe gesucht, bin aber immer noch nicht ganz sicher, wie ich das machen könnte.

Irgendeine Richtung auf, wo man sucht, um so etwas zu erzielen, würde sehr geschätzt werden!

style switcher

+0

Können Sie bitte etwas konkreter sein, was Sie mit Werkzeugen meinen? Wenn Sie eine klare und prägnante Beschreibung geben können, was Sie gerne tun würden - wir können Ihnen besser helfen! :) – Trozza

+0

über den Link, den ich oben gebe, hatte der Link einen Stil-Switcher, den ich nicht hinzufügen kann, – Destiny

Antwort

1

Zuerst müssen Sie eine Möglichkeit für den Benutzer erstellen, um die Farbe, die sie in der Schnittstelle verwenden möchten, auszuwählen, und speichern Sie dann diesen Wert in einer Zeichenfolge, zum Beispiel „userColour“. Sie müssen sicherstellen, dass es sich um einen gültigen CSS-Farbwert handelt, also entweder "# 33aa55" oder "grün" (überprüfen Sie die CSS-Referenz für benannte Farben, die Sie leichter implementieren könnten).

Wenn Sie definieren den HTML-Code der Seite Klassen oder IDs der Divs und Spannweiten usw. verwenden, die die Seite aus gemacht wird, wie folgt aus:

<div class="myColour"> your content </div> 

oder

<div id="myColour"> your content </div> 

Dann Sie können Javascript verwenden, um die CSS-Attribute wie folgt zu ändern:

document.getElementsByClassName("myColour").style.background-color = userColour; 

oder

document.getElementById("myColour").style.background-color = userColour; 

Für Klasse und ID.

Sie könnten auch etwas wie jQuery verwenden, das Ihnen eine wesentlich bessere Browserkompatibilität und eine einfachere DOM-Manipulation bietet, um Stile dynamisch auf Ihr Markup anzuwenden, aber die Prinzipien sind die gleichen.

Verwandte Themen