Szukam sposobu zmiany zasad CSS mojego arkusza stylów importowanego w dokumencie. Mam więc zewnętrzny arkusz stylów i atrybuty class i div w środku. Chcę zmienić jedną z zasad JavaScript lub jQuery.

Oto przykład :

.red{
    color:red;
}

Więc pomysł jest coś zrobić w JavaScript, a HTML wie, że teraz jest color to inny kolor:

.red{
    color:purple;
}

Ale chcę mieć tę zasadę dla każdego elementu, który dodam w przyszłości przy drodze dołączenia. Więc jeśli dodam span za pomocą klasy CSS .red, tekst musi być fioletowy i nie czerwony.

Mam nadzieję, że wyjaśniłem.

23
Simon 16 sierpień 2012, 19:01

3 odpowiedzi

Najlepsza odpowiedź

Ty jquery .css() Metoda do tego.

$('.red').css('color', 'purple');

Dla wielu zasad:

$('.red').css({
    'color': 'purple',
    'font-size': '20px'
});

Gdy dodasz dynamiczny element w przyszłości, aby uzyskać drogę dołącza, po prostu podaj te elementy, po prostu podaj elementy niektórych class lub id i napisz CSS, takich jak powyżej po ich dołączeniu i będą stosowane dla wszystkich dynamicznie tworzony element.

Próbka robocza

Uwaga

Dodaj dynamiczne reguły nie jest dobrym rozwiązaniem w moim punkcie widzenia. Zamiast tego możesz załadować jakiś zewnętrzny plik CSS.

Ale jeśli potrzebujesz czegoś takiego jak dynamiczne reguły dodać metodę:

$('head').append(
  $('<style/>', {
    id: 'mystyle',
    html: '.red {color: purple }'
  })
);

I na przyszłość:

$('#mystyle').append(' .someother { color: green; font-size: 13px } ');

Próbka robocza

21
thecodeparadox 16 sierpień 2012, 16:10

Możesz wstrzykiwać deklaracje stylowe do domu.

$("head").append('<style>.red { color: purple }</style>');
23
Grim... 16 sierpień 2012, 15:03

Jeśli chcesz dodać regułę, zamiast edytować styl każdego elementu bezpośrednio, możesz użyć CSSStyleSheet.insertRule(). Potrzeba dwóch parametrów: reguła jako łańcucha i gdzie wstawić regułę.

Przykład z powyższego linku:

// push a new rule onto the top of my stylesheet
myStyle.insertRule("#blanc { color: white }", 0);

W tym przypadku myStyle jest członkiem .sheet elementu style.

O ile mogę powiedzieć, element style musi być włożony do dokumentu, zanim będzie można chwycić jego arkusz i nie może być zewnętrznym arkuszem. Możesz także złapać arkusz z document.styleSheets, np.

var myStyle = document.styleSheets[1]; // Must not be a linked sheet.
myStyle.insertRule("#blanc { color: white }", 0);

Uwaga: strona zaleca modyfikowanie elementów, zmieniając swoje zajęcia, zamiast modyfikować reguły.

8
leewz 21 kwiecień 2019, 21:22