Codefragmenten 2025, Januari-

Afhandeling van moderne evenementen - CSS-trucs

Afhandeling van moderne evenementen - CSS-trucs

Dit is beter dan de traditionele "window.onload" -gebeurtenis, aangezien het meerdere gebeurtenishandlers aan een enkele gebeurtenis kan koppelen en ze allemaal worden gebeld. "

Kleur lichter / donkerder maken - CSS-trucs

Kleur lichter / donkerder maken - CSS-trucs

De CSS-preprocessors Sass en Less kunnen elke kleur aannemen en deze donkerder () of lichter () maken met een specifieke waarde. Maar zo'n mogelijkheid is niet in JavaScript ingebouwd. "

Verplaats cursor naar einde invoer - CSS-trucs

Verplaats cursor naar einde invoer - CSS-trucs

Waar el een verwijzing is naar een invoer- of tekstgebied. functie moveCursorToEnd (el) (if (typeof el.selectionStart == "number") (el.selectionStart = "

Multiline String-variabelen in JavaScript - CSS-trucs

Multiline String-variabelen in JavaScript - CSS-trucs

Dit werkt: var htmlString = "Dit is een string."; Dit mislukt: var htmlSTring = "Dit is een string."; Soms is dit wenselijk voor de leesbaarheid. Toevoegen"

Laat HTML5-elementen werken in het oude IE - CSS-trucs

Laat HTML5-elementen werken in het oude IE - CSS-trucs

Zodat de DOM (en dus CSS) ze herkent als echte elementen: (function () (if (! / * @ Cc_on! @ * / 0) return; var e = "

Loop Over querySelectorAll Matches - CSS-trucs

Loop Over querySelectorAll Matches - CSS-trucs

Laten we eens kijken naar enkele opties voor het herhalen van een NodeList, terwijl u terugkeert van het uitvoeren van een document.querySelectorAll. We hebben een bijgewerkt artikel geschreven over "

Loop door matrix zonder verspilde zoekopdrachten - CSS-trucs

Loop door matrix zonder verspilde zoekopdrachten - CSS-trucs

Zoek de lengte van de array voordat u deze in de for-functie gebruikt, zodat het niet bij elke iteratie de lengte van de array hoeft te tellen (uitgaande van de lengte "

KeyboardEvent-waarde (keyCodes, metaKey, enz.) - CSS-trucs

KeyboardEvent-waarde (keyCodes, metaKey, enz.) - CSS-trucs

Wanneer een KeyboardEvent wordt geactiveerd, kunt u testen welke toets is ingedrukt, omdat die gebeurtenis informatie bevat waartegen u logica kunt schrijven. "

URL- en URL-onderdelen ophalen in JavaScript - CSS-trucs

URL- en URL-onderdelen ophalen in JavaScript - CSS-trucs

JavaScript heeft in delen toegang tot de huidige URL. Voor deze URL: https://css-tricks.com/example/index.html?s=flexbox window.location.protocol = "

JavaScript MD5 - CSS-trucs

JavaScript MD5 - CSS-trucs

Var MD5 = functie (string) (functie RotateLeft (lValue, iShiftBits) (return (lValue> (32-iShiftBits));) functie AddUnsigned (lX, lY) (var "

JavaScript-matrix bevat - CSS-trucs

JavaScript-matrix bevat - CSS-trucs

Javascript-objecten zijn erg leuk, maar soms missen ze enkele handige kleine functies / methoden. Het bovenstaande voorbeeld is met arrays. Het is werkelijk"

Invoer met verdwijnende achtergrondafbeelding - CSS-trucs

Invoer met verdwijnende achtergrondafbeelding - CSS-trucs

Dit repliceert de functionaliteit van de standaard insluitbare velden van Google Zoeken. Ze hebben een afbeelding op de achtergrond en wanneer op de invoer wordt geklikt "

Intervallen - CSS-trucs

Intervallen - CSS-trucs

Standaard U hoeft de variabele niet te maken, maar het is een goede gewoonte, aangezien u die variabele met clearInterval kunt gebruiken om de huidige actieve "

HTML injecteren vanuit een HTML-string - CSS-trucs

HTML injecteren vanuit een HTML-string - CSS-trucs

Stel dat je HTML hebt die een string is: let string_of_html = `

Cool
`; Misschien komt het van een API of heeft u het zelf gemaakt van "

Nieuwe CSS-regels invoegen - CSS-trucs

Nieuwe CSS-regels invoegen - CSS-trucs

Als u de stijl van een element met JavaScript moet wijzigen, is het doorgaans beter om de naam van een klas te wijzigen en de CSS al op de pagina te laten opnemen "

"Ga terug" -knop - CSS-trucs

"Ga terug" -knop - CSS-trucs

Browsers hebben al "terug" -knoppen, dus u kunt maar beter een goede reden hebben om er een op uw pagina te plaatsen! Invoerknop met inline JavaScript '

Haal YouTube Key op via een link - CSS-trucs

Haal YouTube Key op via een link - CSS-trucs

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

HtmlEntities voor JavaScript - CSS-trucs

HtmlEntities voor JavaScript - CSS-trucs

Htmlentities () is een PHP-functie die speciale tekens (zoals <) omzet in hun escapete / gecodeerde waarden (zoals <). Hiermee kun je laten zien "

URL-variabelen ophalen - CSS-trucs

URL-variabelen ophalen - CSS-trucs

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

Globale variabelen - CSS-trucs

Globale variabelen - CSS-trucs

Declareer variabele buiten de functie ... var oneVariable; function setVariable () (oneVariable = "Variabelenset vanuit een functie!";) functie "

Alle mogelijke DOM-evenementen ophalen - CSS-trucs

Alle mogelijke DOM-evenementen ophalen - CSS-trucs

U kunt een reeks van alle gebeurtenissen die beginnen met "on" (bijv. Onclick) krijgen door dit in de console van Firefox uit te voeren. .filter (function (i) (return "

Objectgrootte ophalen - CSS-trucs

Objectgrootte ophalen - CSS-trucs

Zoals in het aantal sleutels. function objectSize (the_object) (/ * functie om het bestaan ​​van elke sleutel in het object te valideren om het aantal geldige "

Oproepfunctie met willekeurige timer - CSS-trucs

Oproepfunctie met willekeurige timer - CSS-trucs

Functie randRange (data) (var newTime = data; return newTime;) functie toggleSomething () (var timeArray = new Array (200, 300, 150, 250, 2000, 3000, "

Opmaak valuta - CSS-trucs

Opmaak valuta - CSS-trucs

Deze functie rondt getallen af ​​op twee decimalen en zorgt ervoor dat de geretourneerde waarde twee decimalen heeft. 12.006 retourneert bijvoorbeeld 12.01, "

Fix IE 10 op Windows Phone 8 Viewport - CSS-trucs

Fix IE 10 op Windows Phone 8 Viewport - CSS-trucs

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

Maak een array leeg - CSS-trucs

Maak een array leeg - CSS-trucs

Dit is een van de snelste en gemakkelijkste manieren om een ​​array te legen. Natuurlijk zijn er nog andere manieren, maar die omvatten meestal het maken van een nieuwe array. "

JavaScript-vereiste inhoud met reserve-inhoud - CSS-trucs

JavaScript-vereiste inhoud met reserve-inhoud - CSS-trucs

Het JavaScript-vereiste gebied wordt verborgen met inline CSS en wordt vervolgens weergegeven nadat het is geladen met een klein JavaScript-fragment. Daaronder worden noscript-tags gebruikt "

Foutloze consolelogging - CSS-trucs

Foutloze consolelogging - CSS-trucs

Var Fb = (); // Een leeg object dat letterlijk de functie Fb.log = function (obj, consoleMethod) bevat (if (window.console && window.console.firebug && "

Verschillende stylesheets in afwachting van de tijd - CSS-trucs

Verschillende stylesheets in afwachting van de tijd - CSS-trucs

Geef uw css-bestanden een passende naam: night.css, day.css, enz ... Een leuke bonus is dat, aangezien JavaScript de tijd van de lokale machine krijgt in plaats van van "