Alter Definicja reguły CSS za pomocą jQuery

Załóżmy, że chcesz zmienić szerokość wielu elementów, na przykład, aby zasymulować tabelę. Zdaję sobie sprawę, można to zrobić:Alter Definicja reguły CSS za pomocą jQuery

$(".class").css('width', '421px');

Zmienia to inline style='width: 421px;' atrybut dla każdego elementu. Teraz, co chciałbym zrobić: to zmienić rzeczywistą definicję reguły CSS:

.class { 
    width: 375px; ==[change to]==> 421px; 
}

Jeśli chodzi o 100 jeśli nie 1000 na zagnieżdżonego <ul> i <li> które muszą zostać zmienione, wydaje się, że byłoby to lepsze dla wydajności niż próba umożliwienia jQuery wykonania pracy za pomocą metody .css().

Znalazłem this example - To, co próbuję zrobić:

var style = $('<style>.class { width: 421px; }</style>') 
$('html > head').append(style);

ja nie staram się zamieniać klas ($el.removeClass().addClass()), bo nie mogę mieć klasę dla każdego optymalne szerokość (379px, 387px, 402px ..).

Mogę utworzyć element <style> i dynamicznie ustawić szerokość, jednak myślę, że jest lepszy sposób.

Źródło

2012-02-09 Mike Lewis

Naprawdę myślę, że powinieneś napisać dwie klasy w swoim CSS, i dodać/usunąć odpowiednie w razie potrzeby. Nie powinieneś mieszać ze swoim arkuszem stylów w JS, szybko stanie się niemożliwym do utrzymania. – kapa

@kapa, to ma swoje ograniczenia, ponieważ wszystkie CSS muszą być zdefiniowane z góry. Nie można na przykład podświetlić dowolnych elementów nth-child: '#root> div: nth-child ('+ Nth +') {background: red; } ' –

Native JS metoda: can jquery manipulate the global css definition of the document?

jQuery Plugin Ariel Flesler: https://github.com/flesler/jquery.rule

Źródło

2012-02-09 01:24:47 Joe

' document.styleSheets [0] .addRule (". Abc", "display: none;"); 'To powinno zadziałać, dziękuję! Będę musiał sprawdzić wtyczkę jQuery. Mam nadzieję, że ta funkcjonalność zostanie wykorzystana w jQuery! –

document.styleSheets [0] .addRule działa w Chrome, 'nie jest funkcją' w FF

Źródło

2013-09-05 03:45:55 user2360953

Co dla mnie ma być pusty nagłówek stylu w nagłówku:

<style id="custom-styles"></style>

A następnie manipulować, że z czymś takim:

$('#custom-styles').text('h1 { background: red }')

Przetestowałem to wydaje się działać w obecnej wersji Chrome (dobrze, chrom - 63,0) oraz Firefox (57.0.4).

Źródło

2018-01-19 11:20:09

Odpowiedz

Powiązane problemy