Tüm satır içi stilleri javascript ile nasıl silebilirim ve yalnızca css stil sayfasında belirtilen stilleri nasıl bırakabilirim?

94

HTML'imde aşağıdakiler varsa:

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

Ve bu css stil sayfamda:

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

Tüm satır içi stilleri kaldırmanın ve yalnızca css stil sayfasında belirtilen stilleri bırakmanın javascript / jquery ile herhangi bir yolu var mı?

— Mat
kaynak

166

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

veya

$('div').removeAttr('style');( Andres'in Cevabından )

Bunu biraz küçültmek için şunu deneyin:

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

Bu, div'lerin style özniteliğine sahip olup olmadığını kontrol ettiği için biraz hızlandırmalıdır.

Her iki durumda da, çok miktarda div'iniz varsa bunun işlenmesi biraz zaman alabilir, bu nedenle javascript dışındaki yöntemleri düşünmek isteyebilirsiniz.

— Tyler Carter
kaynak

Style niteliğini kaldırması gerekiyorsa, onu da araması gerekecektir, bu yüzden son çözüm sadece kodu daha kirli yapmak gibi görünür. Elbette en iyisi, muhtemelen ID aracılığıyla yalnızca stili kaldırmanız gereken öğeleri seçmektir.

— Jose Faeti

Bu yalnızca div'leri hedefleyecektir. Ya her şeyi hedeflemek istiyorsanız?

— sokak lambası

1

Bununla ilgili .css()olarak, ikinci değer olarak boş bir dizge ile çağırmak , yalnızca adlandırılmış değeri satır içi stillerden kaldıracaktır, örneğin $ ('div']. Css ('display', ''); yalnızca satır içi görüntüleme özelliğini kaldırır (ayarlanmışsa).

— Tom Davies

2

@streetlight $('*').removeAttr('style')Her şeyi hedeflemek için kullanın .

— Makaze

Hayır, aslında ikincisi biraz daha hızlı olmalı çünkü JQuery'nin herhangi bir anlamı varsa o zaman standart kaldırma özelliğini kullanıyor olacaktır. Ayrıca, ikinci yöntemi birinciden daha hızlı hale getiren daha fazla DOM öğesi olmasına rağmen devasa verimsiz döngü yükünü unutmanız.

35

Düz JavaScript:

Bunun gibi önemsiz bir şey yapmak için jQuery'ye ihtiyacınız yok. Sadece .removeAttribute()yöntemi kullanın .

Yalnızca tek bir öğeyi hedeflediğinizi varsayarsak, aşağıdakileri kolayca kullanabilirsiniz: (örnek)

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

Birden çok öğeyi hedefliyorsanız, seçilen öğe koleksiyonunda dolaşmanız yeterlidir: (örnek)

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

Array.prototype.forEach()- IE9 ve üstü / .querySelectorAll()- IE 8 (kısmi) IE9 ve üstü.

— Josh Crozier
kaynak

1

Bir alternatif Array.prototype.forEach.callbir çizgi kaydeder oldukça iyi destekli splat operatörü olduğu: [... document.querySelectorAll('div')].forEach(div => div.removeAttribute('style')).

22

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

— andres kireç çözücü
kaynak

Bu, attr ('stil', '') yapmaktan daha mı verimli?

— Matt

$ ['div']. attr ('stil', ''); <div style = ""> </div> ile $ ('div'). removeAttr ('style'); <div> </div> daha temiz

— andres descalzo

Muhtemelen, onu boş bir değere ayarlamadığı için, ama her iki durumda da büyük bir işlem süresi elde edeceksiniz çünkü vücuttaki her div'den geçmek zorunda.

— Tyler Carter

evet, bu açık, bir ID $ ("# id") veya bir sınıf $ (".classDivs) olarak değiştirilmelidir

— andres descalzo

3

$('div').attr('style', '');Tekniği kullanıyordum ve IE8'de çalışmıyordu.

Style niteliğini kullanarak çıktıladım ve alert()satır içi stilleri çıkarmıyordu.

.removeAttr IE8'de hile yapmaya başladı.

— intikam almak
kaynak

3

Eğer sadece stylebir elementi boşaltmanız gerekiyorsa :
element.style.cssText = null;
Bu iyi olur. Umarım yardımcı olur!

— Tushar Shukla
kaynak

Bir öğe için yalnızca tek bir stil özelliğini "boşaltmaya" çalışırken de benzer bir mantık geçerli görünüyor: element.style.display = null;- ihtiyacım olan buydu: D

— Bilal Akil

2

Bu, iki adımda gerçekleştirilebilir:

1: değiştirmek istediğiniz öğeyi etiket adı, kimlik, sınıf vb. İle seçin.

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

stil niteliğini kaldır

element.removeAttribute('style');

— JRulle
kaynak

-2

Ayrıca stil sayfasında css'yi! Önemli olarak listelemeyi deneyebilirsiniz.

— BoringCode
kaynak

3

bu işe yarayacak olsa da, onları kaldırmak için! ile satır içi stilleri geçersiz kılmak korkunç bir uygulamadır

— joshvermaire