Jak mogę usunąć wszystkie wbudowane style za pomocą javascript i pozostawić tylko style określone w arkuszu stylów css?

94

Jeśli mam następujące informacje w moim html:

<div style="height:300px; width:300px; background-color:#ffffff;"></div>

A to w moim arkuszu stylów css:

div {
    width:100px;
    height:100px;
    background-color:#000000;
}

Czy za pomocą javascript / jquery można w jakiś sposób usunąć wszystkie wbudowane style i pozostawić tylko style określone w arkuszu stylów css?

— Matt
źródło

166

$('div').attr('style', '');

lub

$('div').removeAttr('style');(Z odpowiedzi Andresa )

Aby to trochę zmniejszyć, spróbuj tego:

$('div[style]').removeAttr('style');

Powinno to trochę przyspieszyć, ponieważ sprawdza, czy elementy div mają atrybut style.

Tak czy inaczej, przetwarzanie może trochę potrwać, jeśli masz dużą liczbę elementów div, więc możesz rozważyć inne metody niż javascript.

— Tyler Carter
źródło

Jeśli będzie musiał usunąć atrybut style, będzie musiał go również szukać, więc ostatnie rozwiązanie wydaje się tylko uczynić kod bardziej brudnym imho. Najlepszym rozwiązaniem byłoby oczywiście wybranie tylko tych elementów, które mają być usunięte, być może za pomocą identyfikatora.

— Jose Faeti

Będzie to dotyczyło tylko elementów DIV. A jeśli chcesz skupić się na wszystkim?

— latarnia uliczna

1

Poza tym wywołanie .css()z pustym ciągiem znaków jako drugą wartością usunie tylko podaną wartość ze stylów wbudowanych, np. $ ('Div'). Css ('display', ''); usunie tylko wbudowaną właściwość wyświetlania (jeśli jest ustawiona).

— Tom Davies,

2

@streetlight Służy $('*').removeAttr('style')do kierowania na wszystko.

— Makaze,

Nie, właściwie drugi powinien być trochę szybszy, ponieważ jeśli JQuery ma jakiś sens, to będzie używał standardowego removeattribute. Zapominasz też o ogromnym, nieefektywnym narzucie pętli, mimo większej liczby elementów DOM, co sprawia, że druga metoda jest nawet szybsza niż pierwsza.

35

Zwykły JavaScript:

Nie potrzebujesz jQuery do zrobienia czegoś tak trywialnego. Po prostu użyj .removeAttribute()metody.

Zakładając, że celujesz w pojedynczy element, możesz łatwo użyć następującego: (przykład)

document.querySelector('#target').removeAttribute('style');

Jeśli kierujesz reklamy na wiele elementów, po prostu przejrzyj wybraną kolekcję elementów: (przykład)

var target = document.querySelectorAll('div');
Array.prototype.forEach.call(target, function(element){
    element.removeAttribute('style');
});

Array.prototype.forEach()- IE9 i nowsze / .querySelectorAll()- IE 8 (częściowe) IE9 i nowsze.

— Josh Crozier
źródło

1

Alternatywą do Array.prototype.forEach.calljest dość dobrze obsługiwany operator ikona, która zapisuje wiersz: [... document.querySelectorAll('div')].forEach(div => div.removeAttribute('style')).

22

$('div').removeAttr('style');

— andres descalzo
źródło

Czy jest to bardziej wydajne niż wykonywanie attr („style”, „”)?

— Matt,

z $ ('div'). attr ('style', ''); <div style = ""> </div> z $ ('div'). removeAttr ('style'); <div> </div> jest bardziej

— przejrzysty

prawdopodobnie dlatego, że nie ustawia go na wartość null, ale tak czy inaczej, otrzymasz długi czas przetwarzania, ponieważ musi przejść przez każdy element div w treści.

— Tyler Carter

tak, to jasne, należy to zmienić na identyfikator $ ("# id") lub klasę $ (".classDivs)

— andres descalzo

3

Używałem tej $('div').attr('style', '');techniki i nie działała w IE8.

Wyprowadziłem atrybut style przy użyciu alert()i nie usuwał on stylów wbudowanych.

.removeAttr ostatecznie załatwił sprawę w IE8.

— rtvenge
źródło

3

Jeśli chcesz po prostu opróżnić styleelement, to:
element.style.cssText = null;
To powinno wystarczyć. Mam nadzieję, że to pomoże!

— Tushar Shukla
źródło

Podobna logika wydaje się mieć zastosowanie, gdy próbuję „opróżnić” tylko jedną właściwość stylu dla elementu: element.style.display = null;- tego właśnie potrzebowałem: D

— Bilal Akil

2

Można to zrobić w dwóch krokach:

1: wybierz element, który chcesz zmienić, za pomocą zmiennej, identyfikatora, klasy itp.

var element = document.getElementsByTagName('h2')[0];

usuń atrybut stylu

element.removeAttribute('style');

— JRulle
źródło

-2

Możesz także spróbować wymienić css w arkuszu stylów jako! Ważne

— BoringCode
źródło

3

chociaż to by zadziałało, to okropna praktyka zastępowanie stylów wbudowanych za pomocą!

— Important