Code Ausschnitte 2025, April

Modernes Event Handling - CSS-Tricks

Modernes Event Handling - CSS-Tricks

Dies ist besser als das herkömmliche Ereignis "window.onload", da mehrere Ereignishandler an ein einzelnes Ereignis angehängt werden können und alle aufgerufen werden. "

Farbe aufhellen / abdunkeln - CSS-Tricks

Farbe aufhellen / abdunkeln - CSS-Tricks

Die CSS-Präprozessoren Sass und Less können jede Farbe annehmen und um einen bestimmten Wert abdunkeln () oder aufhellen (). In JavaScript ist jedoch keine solche Fähigkeit integriert. "

Bewegen Sie den Cursor zum Ende der Eingabe - CSS-Tricks

Bewegen Sie den Cursor zum Ende der Eingabe - CSS-Tricks

Wobei el ein Verweis auf eine Eingabe oder einen Textbereich ist. Funktion moveCursorToEnd (el) (if (typeof el.selectionStart == "number") (el.selectionStart = "

Mehrzeilige Zeichenfolgenvariablen in JavaScript - CSS-Tricks

Mehrzeilige Zeichenfolgenvariablen in JavaScript - CSS-Tricks

Dies funktioniert: var htmlString = "Dies ist eine Zeichenfolge."; Dies schlägt fehl: var htmlSTring = "Dies ist eine Zeichenfolge."; Manchmal ist dies für die Lesbarkeit wünschenswert. Hinzufügen"

Stellen Sie sicher, dass HTML5-Elemente im alten IE funktionieren CSS-Tricks

Stellen Sie sicher, dass HTML5-Elemente im alten IE funktionieren CSS-Tricks

Damit das DOM (und damit CSS) sie als reale Elemente erkennt: (function () (if (! / * @ Cc_on! @ * / 0) return; var e = "

Loop Over querySelectorAll Übereinstimmungen - CSS-Tricks

Loop Over querySelectorAll Übereinstimmungen - CSS-Tricks

Schauen wir uns einige Optionen zum Durchlaufen einer NodeList an, wenn Sie von der Ausführung einer document.querySelectorAll zurückkehren. Wir haben einen aktualisierten Artikel über "

Durchlaufen Sie das Array ohne verschwenderische Suche CSS-Tricks

Durchlaufen Sie das Array ohne verschwenderische Suche CSS-Tricks

Suchen Sie die Länge des Arrays, bevor Sie es in der for-Funktion verwenden, damit die Länge des Arrays nicht bei jeder Iteration gezählt werden muss (unter der Annahme der Länge ".

KeyboardEvent-Wert (keyCodes, metaKey usw.) - CSS-Tricks

KeyboardEvent-Wert (keyCodes, metaKey usw.) - CSS-Tricks

Wenn ein KeyboardEvent ausgelöst wird, können Sie testen, welche Taste gedrückt wurde, da dieses Ereignis Informationen enthält, gegen die Sie Logik schreiben können. "

URL und URL-Teile in JavaScript abrufen - CSS-Tricks

URL und URL-Teile in JavaScript abrufen - CSS-Tricks

JavaScript kann teilweise auf die aktuelle URL zugreifen. Für diese URL: https://css-tricks.com/example/index.html?s=flexbox window.location.protocol = "

JavaScript MD5 - CSS-Tricks

JavaScript MD5 - CSS-Tricks

Var MD5 = Funktion (Zeichenfolge) (Funktion RotateLeft (lValue, iShiftBits) (Rückgabe (lValue> (32-iShiftBits));) Funktion AddUnsigned (lX, lY) (var "

JavaScript-Array enthält - CSS-Tricks

JavaScript-Array enthält - CSS-Tricks

Javascript-Objekte sind wirklich nett, aber manchmal fehlen ihnen einige nützliche kleine Funktionen / Methoden. Das obige Beispiel ist mit Arrays. Es ist wirklich"

Eingabe mit verschwundenem Hintergrundbild - CSS-Tricks

Eingabe mit verschwundenem Hintergrundbild - CSS-Tricks

Dadurch wird die Funktionalität der standardmäßig einbettbaren Google-Suchfelder repliziert. Sie haben ein Bild im Hintergrund und wenn auf die Eingabe geklickt wird "

Intervalle - CSS-Tricks

Intervalle - CSS-Tricks

Standard Sie müssen die Variable nicht erstellen, aber es ist eine gute Vorgehensweise, da Sie diese Variable mit clearInterval verwenden können, um die aktuelle Ausführung zu stoppen. "

HTML aus einer HTML-Zeichenfolge einfügen - CSS-Tricks

HTML aus einer HTML-Zeichenfolge einfügen - CSS-Tricks

Angenommen, Sie haben HTML-Code, der eine Zeichenfolge ist: let string_of_html = `

Cool `; Vielleicht kommt es von einer API oder Sie haben es selbst erstellt aus "

Neue CSS-Regeln einfügen - CSS-Tricks

Neue CSS-Regeln einfügen - CSS-Tricks

Wenn Sie den Stil eines Elements mit JavaScript ändern müssen, ist es normalerweise besser, einen Klassennamen zu ändern und das CSS bereits auf der Seite zu übernehmen. "

Schaltfläche "Zurück" - CSS-Tricks

Schaltfläche "Zurück" - CSS-Tricks

Browser haben bereits "Zurück" -Schaltflächen, also sollten Sie einen verdammt guten Grund haben, eine auf Ihre Seite zu setzen! Eingabeschaltfläche mit Inline-JavaScript "

Holen Sie sich den YouTube-Schlüssel von einem Link - CSS-Tricks

Holen Sie sich den YouTube-Schlüssel von einem Link - CSS-Tricks

Beispiellink: // Youtube-Link var youtubeLink = document.getElementById ('myLink'). Href; var youtubeVideoKey = "

HtmlEntities für JavaScript - CSS-Tricks

HtmlEntities für JavaScript - CSS-Tricks

Htmlentities () ist eine PHP-Funktion, die Sonderzeichen (wie <) in ihre maskierten / codierten Werte (wie <) konvertiert. Dies ermöglicht es Ihnen zu zeigen "

URL-Variablen abrufen - CSS-Tricks

URL-Variablen abrufen - CSS-Tricks

Funktion getQueryVariable (Variable) (var query = window.location.search.substring (1); var vars = query.split ("&"); for (var i = 0; i "

Globale Variablen - CSS-Tricks

Globale Variablen - CSS-Tricks

Variable außerhalb der Funktion deklarieren ... var oneVariable; Funktion setVariable () (oneVariable = "Variablensatz innerhalb einer Funktion!";) Funktion "

Alle möglichen DOM-Ereignisse abrufen - CSS-Tricks

Alle möglichen DOM-Ereignisse abrufen - CSS-Tricks

Sie können ein Array aller Ereignisse abrufen, die mit "on" beginnen (z. B. onclick), indem Sie dies in der Konsole von Firefox ausführen. .filter (Funktion (i) (return "

Objektgröße abrufen - CSS-Tricks

Objektgröße abrufen - CSS-Tricks

Wie in der Anzahl der Schlüssel. Funktion objectSize (the_object) (/ * Funktion zum Überprüfen der Existenz jedes Schlüssels im Objekt, um die Anzahl der gültigen "

Aufruffunktion mit Random Timer - CSS-Tricks

Aufruffunktion mit Random Timer - CSS-Tricks

Funktion randRange (Daten) (var newTime = Daten; return newTime;) Funktion toggleSomething () (var timeArray = neues Array (200, 300, 150, 250, 2000, 3000, "

Währung formatieren - CSS-Tricks

Währung formatieren - CSS-Tricks

Diese Funktion rundet Zahlen auf zwei Dezimalstellen und stellt sicher, dass der zurückgegebene Wert zwei Dezimalstellen hat. Beispiel: 12.006 gibt 12.01 zurück. "

Fix IE 10 unter Windows Phone 8 Viewport - CSS-Tricks

Fix IE 10 unter Windows Phone 8 Viewport - CSS-Tricks

(function () (if (navigator.userAgent.match (/IEMobile/10.0/)) (var msViewportStyle = document.createElement ("style"); msViewportStyle.appendChild ("

Array leeren - CSS-Tricks

Array leeren - CSS-Tricks

Dies ist eine der schnellsten und einfachsten Möglichkeiten, ein Array zu leeren. Natürlich gibt es auch andere Möglichkeiten, aber diese beinhalten normalerweise die Erstellung eines neuen Arrays. "

Erforderlicher JavaScript-Inhalt mit Fallback-Inhalt - CSS-Tricks

Erforderlicher JavaScript-Inhalt mit Fallback-Inhalt - CSS-Tricks

Der für JavaScript erforderliche Bereich wird mit Inline-CSS ausgeblendet und nach dem Laden mit einem kleinen Ausschnitt aus JavaScript angezeigt. Darunter werden Noscript-Tags verwendet "

Fehlerfreie Konsolenprotokollierung - CSS-Tricks

Fehlerfreie Konsolenprotokollierung - CSS-Tricks

Var Fb = (); // Ein leeres Objektliteral zum Halten der Funktion Fb.log = function (obj, consoleMethod) (if (window.console && window.console.firebug && ")

Unterschiedliches Stylesheet bis zur Tageszeit - CSS-Tricks

Unterschiedliches Stylesheet bis zur Tageszeit - CSS-Tricks

Benennen Sie Ihre CSS-Dateien entsprechend: night.css, day.css usw. Ein cooler Bonus ist, dass JavaScript die Zeit vom lokalen Computer erhält, anstatt von "