Fragmenty kodu 2025, Styczeń

Interfejs API .classList () - CSS-Tricks

Interfejs API .classList () - CSS-Tricks

Zakładając, że masz element w DOM:

Pobierz odniesienie do tego elementu DOM: const el = document.querySelector ("# el"); Wtedy ty "

Sprawdź, czy komputer Mac lub PC z JavaScript - CSS-Tricks

Sprawdź, czy komputer Mac lub PC z JavaScript - CSS-Tricks

Testowanie agenta użytkownika jest do bani, ale czasami potrzebujesz go do subtelnych rzeczy. W moim przypadku użyłem go do dostosowania tego, co pokazywałem dla klawiszy skrótów klawiaturowych ”

Sprawdź, czy element obsługuje atrybut - CSS-Tricks

Sprawdź, czy element obsługuje atrybut - CSS-Tricks

Nie wszystkie przeglądarki obsługują wszystkie atrybuty wszystkich elementów. W HTML5 pojawiło się wiele nowych atrybutów, więc pomysł na przetestowanie, aby zobaczyć, jakiego rodzaju przeglądarka ”

Obsługa kart w obszarach tekstowych - CSS-Tricks

Obsługa kart w obszarach tekstowych - CSS-Tricks

Zwykle klawisz tabulatora przechodzi do następnej pozycji, na której można zaznaczyć. Zamiast tego wstawia znak tabulacji. HTMLTextAreaElement.prototype.getCaretPosition = function "

Usuń odstępy od ciągu - CSS-Tricks

Usuń odstępy od ciągu - CSS-Tricks

Białe spacje, czyli tabulatory i spacje. Waniliowy JavaScript (przycinanie wiodących i końcowych) var str = "abcdefg"; var newStr = str.trim (); // "Alfabet"

Usuń znaczniki HTML w JavaScript - CSS-Tricks

Usuń znaczniki HTML w JavaScript - CSS-Tricks

Let strippedString = originalString.replace (/ (<(+)>) / gi, ""); CodePen Embed Fallback ”

Sprawdź, czy zdarzenie dragenter / dragover zawiera pliki - CSS-Tricks

Sprawdź, czy zdarzenie dragenter / dragover zawiera pliki - CSS-Tricks

Przeciąganie i upuszczanie HTML5 doskonale nadaje się do obsługi przesyłania plików. Ale jeśli to jedyna rzecz, do której go używasz, dobrze jest wiedzieć, czy jakiś konkretny dragenter "

Przetestuj Internet Explorera w JavaScript - CSS-Tricks

Przetestuj Internet Explorera w JavaScript - CSS-Tricks

Var isMSIE = / * @ cc_on! @ * / 0; if (isMSIE) (// robi rzeczy specyficzne dla IE) else (// robi rzeczy nie specyficzne dla IE) "

Element przełączający (pokaż / ukryj) - CSS-Tricks

Element przełączający (pokaż / ukryj) - CSS-Tricks

Użycie w tekście: Kliknij tutaj, aby przełączyć widoczność elementu #foo To jest foo ”

Shuffle Array - CSS-Tricks

Shuffle Array - CSS-Tricks

Technika nr 1, funkcja Shuffle (o) (for (var j, x, i = o.length; i; j = parseInt (Math.random () * i), x = o, o = o, o = x); powrót o;); Wykorzystanie var testArray "

Usuń liczby z ciągu - CSS-Tricks

Usuń liczby z ciągu - CSS-Tricks

Var someString = "Witaj świecie 123!"; newString = someString.replace (// g, ''); // console.log (newString); // "Witaj świecie!";"

Przekieruj urządzenia mobilne - CSS-Tricks

Przekieruj urządzenia mobilne - CSS-Tricks

„mobile.html” zostanie zastąpiony lokalizacją miejsca, w którym znajduje się Twoja wersja mobilna. Technikę tę można dostosować do ładowania alternatywnego arkusza stylów "

Zapisywanie edytowalnych zmian zawartości jako JSON z Ajax - CSS-Tricks

Zapisywanie edytowalnych zmian zawartości jako JSON z Ajax - CSS-Tricks

Elementy z atrybutem contenteditable można edytować na żywo bezpośrednio w oknie przeglądarki. Ale oczywiście te zmiany nie mają wpływu na rzeczywisty dokument ”

Wymagane parametry dla funkcji w JavaScript - CSS-Tricks

Wymagane parametry dla funkcji w JavaScript - CSS-Tricks

Ooo to jest sprytne! Chwytam to z bloga Davida. const isRequired = () => (wyrzuć nowy błąd ('parametr jest wymagany');); const hello = (name = "

Wybierz losowy element z tablicy - CSS-Tricks

Wybierz losowy element z tablicy - CSS-Tricks

Var myArray =; var randomItem = myArray; Zobacz Pen gLJPZv autorstwa Chrisa Coyiera (@chriscoyier) na CodePen ”.

Zamienniki dla setInterval przy użyciu requestAnimationFrame - CSS-Tricks

Zamienniki dla setInterval przy użyciu requestAnimationFrame - CSS-Tricks

Jeśli chodzi o animację, powiedziano nam, że setInterval to zły pomysł. Ponieważ na przykład pętla będzie działać niezależnie od wszystkiego, co się dzieje ”

Usuń ostatni znak z ciągu - CSS-Tricks

Usuń ostatni znak z ciągu - CSS-Tricks

Var origString = 'Wesołego tańca7'; var trimmedString = origString.substring (0, origString.length-1); console.log (trimmedString); // 'Radosny taniec'"

Usuń style wbudowane - CSS-Tricks

Usuń style wbudowane - CSS-Tricks

Ta funkcja zachowuje również ukrytą zawartość. function remove_style (all) (var i = all.length; var j, is_hidden; // Atrybuty prezentacyjne. var attr =; "

Usuń element - CSS-Tricks

Usuń element - CSS-Tricks

Z jakiegoś powodu element nie może sam się zniszczyć w JavaScript. jQuery ma do tego metodę, co jest miłe, ponieważ myślimy tak: „

Usuń duplikaty z tablicy - CSS-Tricks

Usuń duplikaty z tablicy - CSS-Tricks

Opracował Svein Petter Gjøby: const array =; // Metoda 1: użycie Set const unique =; // Metoda 2: Array.prototype.reduce const unique = "

Przekierowanie do SSL - CSS-Tricks

Przekierowanie do SSL - CSS-Tricks

Window.location = "https: //" + window.location.hostname + window.location.pathname + window.location.search; Możesz sprawdzić, czy window.location.href ”

Zapobiegaj błędnej weryfikacji osadzonego kodu JavaScript - CSS-Tricks

Zapobiegaj błędnej weryfikacji osadzonego kodu JavaScript - CSS-Tricks

Widziałeś kiedyś ten plik CDATA w JavaScript i zastanawiałeś się, do czego służy? Ma to na celu uniemożliwienie walidatorowi odczytania tego kodu jako znacznika i niepowodzenia ”

Jak wygenerować losowy kolor w JavaScript - CSS-Tricks

Jak wygenerować losowy kolor w JavaScript - CSS-Tricks

Oto szybki (jest też wersja PHP): var randomColor = Math.floor (Math.random () * 16777215) .toString (16); Zobacz, jak pióro generuje nowy losowy kolor szesnastkowy ”

Drukuj obiekt na ekranie - CSS-Tricks

Drukuj obiekt na ekranie - CSS-Tricks

PHP ma ładną funkcję print_r do drukowania informacji o zmiennej na ekranie. console.log () świetnie się do tego nadaje również w JavaScript, ale „

Zapobiegaj migotaniu obrazu tła w IE - CSS-Tricks

Zapobiegaj migotaniu obrazu tła w IE - CSS-Tricks

Try (document.execCommand ("BackgroundImageCache", false, true);) catch (err) () "

PageVisibility API - CSS-Tricks

PageVisibility API - CSS-Tricks

Demo autorstwa Sagara Ganatry ”

Szablon JavaScript z przestrzenią nazw - CSS-Tricks

Szablon JavaScript z przestrzenią nazw - CSS-Tricks

Samowywołująca się funkcja anonimowa przypisana do zmiennej globalnej yournamespacechoice. Służy efektowi zachowania wszystkich funkcji i zmiennych w tajemnicy „

Wykonywanie funkcji w określonych odstępach czasu - CSS-Tricks

Wykonywanie funkcji w określonych odstępach czasu - CSS-Tricks

Wykonuj funkcję co sekundę: function myFunction () (// zrób coś) var int = setInterval (myFunction, 1000); Anuluj to: clearInterval (int); "

Leniwe ładowanie obrazów - CSS-Tricks

Leniwe ładowanie obrazów - CSS-Tricks

AKTUALIZACJA: To jest dość stare. Jeśli chcesz teraz leniwie ładować obrazy, polecam zapoznać się z: Kompletnym przewodnikiem po leniwym ładowaniu obrazów rodzimych ”