Kodavsnitt 2025, September

Modern händelsehantering - CSS-tricks

Modern händelsehantering - CSS-tricks

Det här är bättre än att göra den traditionella "window.onload" -händelsen, eftersom den kan koppla flera händelsehanterare till en enda händelse och alla blir ringda.

Ljusare / mörkare färg - CSS-tricks

Ljusare / mörkare färg - CSS-tricks

CSS-förprocessorerna Sass and Less kan ta vilken färg som helst och göra mörkare () eller ljusare () med ett specifikt värde. Men ingen sådan förmåga är inbyggd i JavaScript. "

Flytta markören till slutet av inmatningen - CSS-tricks

Flytta markören till slutet av inmatningen - CSS-tricks

Där el är en hänvisning till en inmatning eller textområde. function moveCursorToEnd (el) (if (typeof el.selectionStart == "number") (el.selectionStart = "

Flervalssträngvariabler i JavaScript - CSS-tricks

Flervalssträngvariabler i JavaScript - CSS-tricks

Detta fungerar: var htmlString = "Detta är en sträng."; Detta misslyckas: var htmlSTring = "Detta är en sträng."; Ibland är detta önskvärt för läsbarheten. Lägg till"

Få HTML5-element att fungera i gamla IE - CSS-tricks

Få HTML5-element att fungera i gamla IE - CSS-tricks

Så att DOM (och därmed CSS) känner igen dem som verkliga element: (funktion () (om (! / * @ Cc_on! @ * / 0) returnerar; var e = "

Loop Over-frågaSelectorAll Matches - CSS-tricks

Loop Over-frågaSelectorAll Matches - CSS-tricks

Låt oss titta på några alternativ för iterering över en NodeList, när du kommer tillbaka från att köra ett document.querySelectorAll. Vi har skrivit en uppdaterad artikel om "

Loop Through Array utan slösaktiga sökningar - CSS-tricks

Loop Through Array utan slösaktiga sökningar - CSS-tricks

Hitta längden på matrisen innan du använder den i funktionen för så att den inte behöver räkna längden på matrisen varje iteration (förutsatt att längden "

KeyboardEvent Value (keyCodes, metaKey, etc) - CSS-tricks

KeyboardEvent Value (keyCodes, metaKey, etc) - CSS-tricks

När ett KeyboardEvent utlöses kan du testa vilken tangent som tryckts på eftersom den händelsen innehåller information som du kan skriva logik mot. "

Hämta URL- och URL-delar i JavaScript - CSS-tricks

Hämta URL- och URL-delar i JavaScript - CSS-tricks

JavaScript kan komma åt den aktuella webbadressen i delar. För denna URL: https://css-tricks.com/exempel/index.html?s=flexbox window.location.protocol = "

JavaScript MD5 - CSS-tricks

JavaScript MD5 - CSS-tricks

Var MD5 = funktion (sträng) (funktion RotateLeft (lValue, iShiftBits) (retur (lValue> (32-iShiftBits));) -funktion AddUnsigned (lX, lY) (var "

JavaScript Array innehåller - CSS-tricks

JavaScript Array innehåller - CSS-tricks

Javascript-objekt är riktigt trevliga, men ibland saknas några användbara små funktioner / metoder. Exemplet ovan är med Arrays. Det är verkligen"

Ingång med försvinnande bakgrundsbild - CSS-tricks

Ingång med försvinnande bakgrundsbild - CSS-tricks

Detta replikerar funktionaliteten hos de vanliga inbäddningsbara Google-sökfälten. De har en bild i bakgrunden och när ingången klickas "

Intervall - CSS-tricks

Intervall - CSS-tricks

Standard Du behöver inte skapa variabeln, men det är en bra metod eftersom du kan använda variabeln med clearInterval för att stoppa den aktuella körningen "

Injicera HTML från en sträng av HTML - CSS-tricks

Injicera HTML från en sträng av HTML - CSS-tricks

Anta att du har lite HTML som är en sträng: låt string_of_html = `

Cool
`; Kanske kommer det från ett API eller så har du konstruerat det själv från "

Injicera nya CSS-regler - CSS-tricks

Injicera nya CSS-regler - CSS-tricks

Om du behöver ändra stilen för ett element med JavaScript är det oftast bättre att ändra klassnamn och ha CSS redan på sidan "

"Gå tillbaka" -knapp - CSS-tricks

"Gå tillbaka" -knapp - CSS-tricks

Webbläsare har redan "bakåt" -knappar, så du borde ha en bra anledning att behöva lägga en på din sida! Inmatningsknapp med inbyggt JavaScript "

Hämta YouTube-nyckel från en länk - CSS-tricks

Hämta YouTube-nyckel från en länk - CSS-tricks

Exempel på länk: // Youtube-länk var youtubeLink = document.getElementById ('myLink'). Href; var youtubeVideoKey = "

HtmlEntities för JavaScript - CSS-tricks

HtmlEntities för JavaScript - CSS-tricks

Htmlentities () är en PHP-funktion som omvandlar specialtecken (som <) till sina undantagna / kodade värden (som <). Detta låter dig visa "

Hämta URL-variabler - CSS-tricks

Hämta URL-variabler - CSS-tricks

Funktion getQueryVariable (variabel) (var fråga = window.location.search.substring (1); var vars = query.split ("&"); för (var i = 0; i "

Globala variabler - CSS-tricks

Globala variabler - CSS-tricks

Förklara variabel utanför funktionen ... var oneVariable; function setVariable () (oneVariable = "Variabel uppsättning inifrån en funktion!";) function "

Få alla möjliga DOM-evenemang - CSS-tricks

Få alla möjliga DOM-evenemang - CSS-tricks

Du kan få en rad med alla händelser som börjar med "på" (t.ex. onclick) genom att köra detta i Firefox-konsolen. .filter (funktion (i) (return "

Hämta objektstorlek - CSS-tricks

Hämta objektstorlek - CSS-tricks

Som i, antalet tangenter. funktion objectSize (the_object) (/ * funktion för att validera förekomsten av varje nyckel i objektet för att få antalet giltiga "

Samtalsfunktion med slumpmässig timer - CSS-tricks

Samtalsfunktion med slumpmässig timer - CSS-tricks

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

Formatera valuta - CSS-tricks

Formatera valuta - CSS-tricks

Denna funktion avrundar siffror till två decimaler och säkerställer att det returnerade värdet har två decimaler. Till exempel kommer 12.006 att returnera 12.01, "

Fixa IE 10 på Windows Phone 8 Viewport - CSS-tricks

Fixa IE 10 på Windows Phone 8 Viewport - CSS-tricks

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

Töm en matris - CSS-tricks

Töm en matris - CSS-tricks

Detta är ett av de snabbaste och enklaste sätten att tömma en matris. Naturligtvis finns det andra sätt, men de inkluderar vanligtvis skapandet av en ny matris. "

JavaScript-obligatoriskt innehåll med reservinnehåll - CSS-tricks

JavaScript-obligatoriskt innehåll med reservinnehåll - CSS-tricks

JavaScript-obligatoriskt område döljs med inbyggt CSS och visas sedan efter att det laddats med ett litet JavaScript-utdrag. Nedanför används noscript-taggar "

Felfri konsolloggning - CSS-tricks

Felfri konsolloggning - CSS-tricks

Var Fb = (); // Ett tomt objekt bokstavligt för att hålla funktionen Fb.log = funktion (obj, consoleMethod) (om (window.console && window.console.firebug && "

Olika stilark i väntan på tid på dagen - CSS-tricks

Olika stilark i väntan på tid på dagen - CSS-tricks

Namnge dina css-filer i enlighet med detta: night.css, day.css, etc ... En cool bonus är att eftersom JavaScript får tiden från den lokala maskinen istället för från "