jak usunąć właściwość css za pomocą javascript?

195

czy można usunąć właściwość CSS elementu za pomocą JavaScript? np. mam div.style.zoom = 1.2, teraz chcę usunąć właściwość zoom poprzez JavaScript?

javascript css

— sob
źródło

3

Wyjaśnij: czy próbujesz usunąć klasę z jakiegoś elementu, czy atrybut z jakiegoś elementu?

— Jan Hančič,

1

Przepraszam za to, nie klasę, atrybut elementu.

— sob.

dlaczego głosować? to wystarczająco przyzwoite pytanie nie?

— Roland Bouman

2

Cześć siedziałem, nie rozumiem - dlaczego oznaczyłeś odpowiedź naiwistów jako „zaakceptowaną odpowiedź”? Mam na myśli, że jego rozwiązanie jest dobre na wypadek, gdybyś chciał znaleźć elementy według klasy, ale wszystko w twoim pytaniu wskazuje, że szukałeś metody zmiany efektu ustawienia właściwości stylu lokalnego. Z pewnością moja odpowiedź lepiej pasuje do problemu? Być może źle zrozumiałem twoje pytanie?

— Roland Bouman

1

@RolandBouman faktycznie zaakceptowana odpowiedź powinna zostać zmieniona na Edvinasa Ilčenko, ponieważ dotyczy ona tego, o co proszono o usunięcie, a nie przejścia na domyślną. Twoja odpowiedź wciąż ma wartość, więc zredagowałem ją, aby wyjaśnić to rozróżnienie.

— Whitneyland

187

Masz dwie opcje:

OPCJA 1:

Możesz użyć metody removeProperty . Usunie styl z elementu.

el.style.removeProperty('zoom');

OPCJA 2:

Możesz ustawić wartość domyślną:

el.style.zoom = "";

Efektywne powiększenie będzie teraz zgodne z definicjami określonymi w arkuszach stylów (poprzez tagi link i style). Tak więc ta składnia zmodyfikuje tylko lokalny styl tego elementu.

— Roland Bouman
źródło

… Wraz z CSS użytkownika i domyślnymi stylami przeglądarki.

— Quentin

Zrozumiałem, że OP oznacza, że chcieli to zrobić tak, jakby nie ustawili właściwości stylu elementu, a dokładnie to, co dostarczyłeś. Próbowałem użyć el.style.removeProperty ('zoom'); (lub „wypełnij”, w rzeczywistości w moim przypadku), które wydają się robić to samo w IE i są ignorowane przez inne przeglądarki. Z jakiegoś powodu byłem zaskoczony, że ustawienie pustego ciągu ma ten sam efekt i wydaje się działać na wszystkich (najnowszych wersjach) przeglądarek.

— Shavais 21.04.16

Czy to zachowanie jest określone gdziekolwiek w standardzie? Nie mogę tego znaleźć :-(

— Oliver Joseph Ash,

@OliverJosephAsh tak, jest to udokumentowane, patrz odpowiedź poniżej stackoverflow.com/a/7901886/700206

— Whitneyland

120

removeProperty usunie styl z elementu.

Przykład:

div.style.removeProperty („zoom”);

Strona dokumentacji MDN:
CSSStyleDeclaration.removeProperty

— Edvinas Ilčenko
źródło

25

div.style.removeProperty('zoom');

— Joe
źródło

10

Możesz użyć obiektu styleSheets:

document.styleSheets[0].cssRules[0].style.removeProperty("zoom");

Zastrzeżenie nr 1: Musisz znać indeks swojego arkusza stylów i indeks swojej reguły.

Zastrzeżenie # 2: Ten obiekt jest implementowany niekonsekwentnie przez przeglądarki; to, co działa w jednym, może nie działać w innych.

— james.garriss
źródło

To wydaje się bardzo kruche. Czy nie pęknie, gdy zmienią się twoje wskaźniki?

— Casey Rodarmor,

Tak. To właśnie mówi zastrzeżenie nr 1.

— james.garriss

Mój Chrome 26 nie ma CSSStyleRule.prototype.removeProperty= (W rzeczywistości CSSStyleRulenie ma żadnych metod. = (

— Rudie,

CSSStyleSheet.prototype.removeRulena pomoc.

— Rudie,

@Rudie, prawda CSSStyleSheet.prototype.deleteRule?

— roka

7

element.style.height = null;

wynik:

<div style="height:100px;"> 
// results: 
<div style="">

— T.Todua
źródło

Wygląda na to, że ustawienie stylu na null nie działa w IE11.

— MaximeW,

1

Dlaczego ktoś powinien dbać o IEprzeglądarki? Celowo ignoruję je już od lat.

— T.Todua

4

Możesz spróbować znaleźć wszystkie elementy, które mają tę klasę i ustawić właściwość „zoom” na „none”.

Jeśli używasz biblioteki javascript jQuery, możesz to zrobić za pomocą $(".the_required_class").css("zoom","")

Edycja: Usunąłem to stwierdzenie, ponieważ okazało się, że to nieprawda, jak wskazano w komentarzu i innych odpowiedziach, że rzeczywiście jest to możliwe od 2010 roku.

Fałsz: nie ma ogólnie znanego sposobu modyfikowania arkuszy stylów z JavaScript.

— naiwiści
źródło

5

Tak jest. Programowa modyfikacja arkuszy stylów za pomocą javascript nie jest trudna. Działa w różnych przeglądarkach z dużą wydajnością i naprawdę ma sens przy zmianie jednej właściwości, która powinna być taka sama na wielu elementach. Podobnie jak w przypadku stycznia 2010 r. Oto krótki przykład: stackoverflow.com/questions/14927706/…

— Clox

Clox: Dodawanie arkuszy stylów, które programowo zastępują niektóre właściwości - oczywiście! Modyfikowanie już załadowanych - o tym nie słyszałem.

— naiwniści

Czy ma to być css (), a nie attr (). A może jest to attr () w IE?

— Alex KeySmith

tak naprawdę powinno być css, nie attr, masz rację.

— naiwiści

1

Możesz to również zrobić w jQuery, mówiąc $(selector).css("zoom", "")

— TryingToImprove
źródło

0

To powinno załatwić sprawę - ustawianie wbudowanego stylu na normalny dla powiększenia:

$ („div”). attr („style”, „zoom: normal;”);

— Matt
źródło

1

Pytanie brzmiało: jak usunąć styl, ta odpowiedź zniszczy wszystkie istniejące style i zastąpi je jednym nowym wpisem.

— Whitneyland

0

właściwie, jeśli już znasz tę właściwość, zrobi to ...

na przykład:

<a href="test.html" style="color:white;zoom:1.2" id="MyLink"></a>

    var txt = "";
    txt = getStyle(InterTabLink);
    setStyle(InterTabLink, txt.replace("zoom\:1\.2\;","");

    function setStyle(element, styleText){
        if(element.style.setAttribute)
            element.style.setAttribute("cssText", styleText );
        else
            element.setAttribute("style", styleText );
    }

    /* getStyle function */
    function getStyle(element){
        var styleText = element.getAttribute('style');
        if(styleText == null)
            return "";
        if (typeof styleText == 'string') // !IE
            return styleText;
        else  // IE
            return styleText.cssText;
    }

Pamiętaj, że działa to tylko dla stylów wbudowanych ... nie stylów określonych przez klasę lub coś w tym stylu ...

Inna uwaga: być może będziesz musiał uciec przed niektórymi postaciami w instrukcji zamiany, ale masz pomysł.

— MaxOvrdrv
źródło

-3

Aby zmienić wszystkie klasy dla elementu:

document.getElementById("ElementID").className = "CssClass";

Aby dodać dodatkową klasę do elementu:

document.getElementById("ElementID").className += " CssClass";

Aby sprawdzić, czy klasa jest już zastosowana do elementu:

if ( document.getElementById("ElementID").className.match(/(?:^|\s)CssClass(?!\S)/) )

— thejustv
źródło

1

Pytanie brzmiało: jak usunąć styl, ta odpowiedź nie ma z tym nic wspólnego.

— Whitneyland