Schlagwort: javascript

[Snippet/Javascript] toggleClass ohne jQuery

André Ein Kommentar

Ich habe vor kurzem eine Javascript Funktion gebracht um schnell CSS KLassen zu Tauschen. In jQuery gibt es dafür die Funktion „toggleClass“. Leider stand mir in dieser Situation das Framework nicht zur Verfügung also habe ich mir die Funktion kurzerhand selber geschrieben.

Das Problem bei der Sache ist das man nicht einfach den Attribut Classname ersetzen darf da das HTML-Element vielleicht noch andere Klassen besitzt. In meiner Funktion können entweder zwei oder eine CSS-Klasse übergeben werden.
Bei zwei werden sie, falls vorhanden, getauscht, wenn noch keine von beiden vorhanden ist, wird die erste angefügt.
Bei dem Fall das nur eine Klasse übergeben wurde, wird zuerst geguckt ob die diese schon gesetzt ist. Falls ja wird sie mit nichts ersetzt andernfalls wird sie angefügt. Meine Funtion müsste sich also genauso wie das jQuery Pendant verhalten.

/**
 *
 * Wechselt die CSS-Klasse eines übergebenen Elements
 *
 * @param HTMLElement Element dessen Klasse gewechselt wird
 * @param cls1 Klasse die gesetzt oder weg gemacht wird
 * @param cls2 Klasse mit der getauscht wird. Falls dieser Parameter
 *             nicht gesetzt ist wird cls1 durch nichts ersetzt
 */

function toggleClass(elm, cls1, cls2) {
    if (!cls2) cls2 = "";
    elm.ersetzeKlasse = function (haystack, needle) {
        var re = new RegExp(haystack, "g");
        this.className = this.className.replace(haystack, needle);
    }

    if (elm.className.indexOf(cls1) > -1) elm.ersetzeKlasse(cls1, cls2);
    else if (elm.className.indexOf(cls2) > -1) elm.ersetzeKlasse(cls2, cls1);
    else elm.className += " " + cls1;
}

[Snippet/Javascript] Zufallsfarbe

André Ein Kommentar

Ich werde in Zukunft öfter mal Snippets in verschiedenen Sprachen posten.

Falls ihr fragen habt schreibt doch ein Kommentar 🙂

Erklärung

In diesem Javasctipt-Snippet wird eine Zufallsfarbe im Hex-Format erzeugt:

Farben bestehen aus drei RGB-Werten. Die RGB-Tripel müssen zwschen 0 umd 255 liegen.

255 wäre weiß und 0 Schwarz. Durch die Mischung dieser 3 Farbwerte kann man

32-Bit tiefe Farben darstellen. Jede Zahl wird in einen Hex-Wert umgerechnet (toString(16)).

Die so errechneten Hex-Werte werden aneinander gereit und es wird eine Raute vorangestellt.

Code

/**
 *
 * Zufallsfarbe im Hex-Format berechnen
 *
 * @return String Gibt eine Zufallsfarbe im Hex-Format
 *                zurück z.B. #EFEFEF
 *
 */

function zufallsFarbe() {
    var farbe = "#";
    for (var i in [0, 1, 2]) {
        farbe += (Math.ceil(255 * Math.random()).toString(16).toUpperCase());
    }
    return farbe;
}