nadpisanie css za pomocą JS, zmienna + !important

Question

cześć,

muszę nadpisać style css. wnętrze mojej funkcji to:

var sliderHeight = screen.height - 150;
              
                $(".slider_content").css("height", sliderHeight + "!important");

przeszukałam internet. Z tego co wyczytałam to powino działać, ale niestey - nie działa.

Funkcja działa jeśli usunę "!important", więc coś tutaj jest nie tak :/

 

Comments

Wejdź do przeglądarki, kliknij F12, wybierz konsolę JS i zobacz, czy nie wyskoczył tam jakiś błąd

Answer 1

Wystarczy spojrzeć do dokumentacji: 

Note: .css() ignores !important declarations. So, the statement $( "p" ).css( "color", "red !important" ) does not turn the color of all paragraphs in the page to red. It's strongly advised to use classes instead; otherwise use a jQuery plugin.

Jeśli jesteś autorem tego CSSa, polecam poczytać o specyficzności selektorów - !important nic dobrego w kodzie nie wnosi

Answer 2

Pragnę tylko zauważyć, że zaakceptowana odpowiedź jest najgorszą możliwą. Sama informacja z dokumentacji przecież mówi wyraźnie, żeby przesiąść się na operowanie klasami ($elem.toggleClass( 'klasa' )). A najlepiej, jak Argeento już wspomniał, zapoznać się ze specyficznością selektorów.

Answer 3

To po co ci ten important jak działa?
Znalazłeś jakies rozwiazanie i kopiujesz.

Comments

wyraziłam się może zbyt skrótowo.

Potrzebuję tego important po rozbudowaniu strony. Skrypt działa na uproszczonej wersji.

Zrobiłam uproszczoną wersję, żeby sprawdzić gdzie jest błąd w funkcji.

Answer 4

Nie jest to możliwe.

Note: .css() ignores !important declarations. So, the statement $( "p" ).css( "color", "red !important" ) does not turn the color of all paragraphs in the page to red. It's strongly advised to use classes instead; otherwise use a jQuery plugin.

jQuery ignoruje deklaracje !important. Nie jest to błąd jQuery tylko same przeglądarki ignorują w JavaScript deklaracje !important. Jedyną opcją jest dość ryzykowna metoda, ponieważ czyści ona wszystkie style (oprócz stylu klas) elementu:

$(".slider_content").css("cssText", "height: 300px !important;");