Muszę dynamicznie utworzyć klasę arkusza stylów CSS w JavaScript i przypisać ją do niektórych elementów HTML, takich jak - div, table, span, tr itp., Oraz do niektórych elementów sterujących, takich jak asp: Textbox, Dropdownlist i datalist.
Czy to możliwe?
Byłoby miło z próbką.
javascript
css
stylesheet
Himadri
źródło
źródło
Odpowiedzi:
Chociaż nie jestem pewien, dlaczego chcesz tworzyć klasy CSS za pomocą JavaScript, oto opcja:
źródło
Znaleziono lepsze rozwiązanie, które działa we wszystkich przeglądarkach.
Używa document.styleSheet do dodawania lub zastępowania reguł. Zaakceptowana odpowiedź jest krótka i przydatna, ale działa to również w IE8 i mniej.
Funkcja jest używana w następujący sposób.
źródło
var styleSheetLength = styleSheet.cssRules ? styleSheet.cssRules.length : 0
i zastąpieniu jej użyciem implementacją funkcji.Krótka odpowiedź, jest kompatybilny „we wszystkich przeglądarkach” (w szczególności IE8 / 7):
I ten ostatni bit stosuje klasę do elementu:
Oto także mała strona testowa: https://gist.github.com/shadybones/9816763
Najważniejsze jest to, że elementy stylu mają właściwość „styleSheet” / „sheet”, za pomocą której można dodawać / usuwać reguły.
źródło
Istnieje lekka wtyczka jQuery, która pozwala generować deklaracje CSS: jQuery-injectCSS
W rzeczywistości używa JSS (CSS opisany przez JSON), ale jest dość łatwy w obsłudze, aby wygenerować dynamiczne arkusze stylów css.
źródło
YUI ma zdecydowanie najlepsze narzędzie arkuszy stylów , jakie widziałem. Zachęcam do sprawdzenia, ale oto smak:
Istnieją oczywiście inne, znacznie prostsze sposoby zmiany stylów w locie, takie jak te sugerowane tutaj. Jeśli mają sens dla twojego problemu, mogą być najlepsze, ale są zdecydowanie powody, dla których modyfikacja css jest lepszym rozwiązaniem. Najbardziej oczywistym przypadkiem jest modyfikacja dużej liczby elementów. Innym ważnym przypadkiem jest sytuacja, w której zmiany stylu wymagają kaskady. Użycie dom do zmodyfikowania elementu zawsze będzie miało wyższy priorytet. Jest to młot kowalski i jest równoważne z użyciem atrybutu stylu bezpośrednio na elemencie HTML. To nie zawsze jest pożądany efekt.
źródło
Począwszy od IE 9. Możesz teraz załadować plik tekstowy i ustawić właściwość style.innerHTML. Zasadniczo możesz teraz załadować plik css przez ajax (i uzyskać wywołanie zwrotne), a następnie po prostu ustawić tekst wewnątrz takiego stylu.
Działa to w innych przeglądarkach, nie wiem, jak daleko wstecz. Ale tak długo, jak nie potrzebujesz obsługiwać IE8, działałoby.
i wtedy możesz poprosić go o pobranie zewnętrznego pliku, takiego jak myCss.css
źródło
Oto rozwiązanie Vishwanath nieco przepisane z komentarzami:
źródło
Ciekawym projektem, który może ci pomóc w zadaniu, jest JSS .
Biblioteka JSS umożliwia wstrzykiwanie do sekcji DOM / head za pomocą
.attach()
funkcji.Zamień wersję online do oceny.
Więcej informacji o JSS .
Przykład:
źródło
Za pomocą zamknięcia google:
możesz po prostu użyć modułu ccsom:
Kod javascript próbuje przeniknąć przez przeglądarkę do węzła css w nagłówku dokumentu.
źródło
https://jsfiddle.net/xk6Ut/256/
Jedna opcja dynamicznego tworzenia i aktualizowania klasy CSS w JavaScript:
klasę CSS
.....
...
źródło
Przejrzałem odpowiedzi i brakuje najbardziej oczywistego i bezpośredniego: użyj,
document.write()
aby napisać potrzebną część CSS.Oto przykład (zobacz go na codepen: http://codepen.io/ssh33/pen/zGjWga ):
źródło
źródło
Oto moje rozwiązanie modułowe:
Zasadniczo gdziekolwiek w kodzie robisz:,
addNewStyle('body', 'color: ' + color1);
gdziecolor1
jest zdefiniowana zmienna.Jeśli chcesz „opublikować” bieżący plik CSS, po prostu robisz
submitNewStyle()
,a następnie nadal możesz dodać więcej CSS.
Jeśli chcesz dodać go do „zapytań o media”, masz taką opcję.
Po „dodaniu nowych stylów” po prostu używasz
submitNewStyleWithMedia('min-width: 1280px');
.Było to bardzo przydatne w moim przypadku użycia, ponieważ zmieniałem CSS publicznej (nie mojej) strony internetowej zgodnie z bieżącym czasem. Przesyłam jeden plik CSS przed użyciem „aktywnych” skryptów, a resztę później (sprawia, że strona wygląda trochę tak, jak powinna przed uzyskaniem dostępu do elementów
querySelector
).źródło
Z korzyścią dla poszukiwaczy; jeśli używasz jQuery, możesz wykonać następujące czynności:
Oczywiście możesz zmienić wewnętrzny css na cokolwiek chcesz.
Doceń to, że niektórzy wolą czysty JavaScript, ale działa i jest dość niezawodny do dynamicznego pisania / nadpisywania stylów.
źródło
Przeglądałem niektóre odpowiedzi tutaj i nie mogłem znaleźć niczego, co automatycznie dodałoby nowy arkusz stylów, jeśli go nie ma, a jeśli nie, po prostu modyfikuje istniejący, który zawiera już potrzebny styl, więc utworzyłem nową funkcję ( powinien działać we wszystkich przeglądarkach, choć nie został przetestowany, używa addRule, a poza tym tylko podstawowy natywny JavaScript, daj mi znać, jeśli to działa):
następnie po prostu dodaj te 2 funkcje pomocnicze w ramach powyższej funkcji lub w dowolnym innym miejscu:
(zauważ, że w obu z nich używam pętli for zamiast .filter, ponieważ klasy listy stylów / reguł CSS mają tylko właściwość length i nie mają metody .filter).
Następnie nazwij to:
Daj mi znać, czy to działa w twojej przeglądarce lub daje błąd.
źródło