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

Question 1

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?

Question 2

$('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.

Question 3

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.

Question 4

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

Question 5

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.

Question 6

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

Question 7

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');

Question 8

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

Answer 1

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?

Answer 2

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.

Answer 3

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

Answer 4

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

latarnia uliczna

Answer 5

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,

Answer 6

2

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

Makaze,

Answer 7

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.

Answer 8

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.

Answer 9

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')).

Answer 10

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

Answer 11