Bagaimana saya bisa menghapus semua gaya sebaris dengan javascript dan hanya menyisakan gaya yang ditentukan dalam lembar gaya css?

94

Jika saya memiliki yang berikut di html saya:

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

Dan ini di lembar gaya css saya:

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

Apakah ada cara, dengan javascript / jquery, untuk menghapus semua gaya sebaris dan hanya menyisakan gaya yang ditentukan oleh lembar gaya css?

javascript jquery css inline Matt
sumber

Jawaban:

166

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

atau

$('div').removeAttr('style');(Dari Jawaban Andres )

Untuk membuatnya sedikit lebih kecil, coba ini:

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

Ini akan mempercepatnya sedikit karena memeriksa bahwa div memiliki atribut style.

Bagaimanapun, ini mungkin memerlukan sedikit waktu untuk diproses jika Anda memiliki div dalam jumlah besar, jadi Anda mungkin ingin mempertimbangkan metode lain selain javascript.

Tyler Carter
sumber
Jika harus menghapus atribut style, itu juga harus mencarinya, jadi solusi terakhir sepertinya hanya membuat kode imho lebih kotor. Yang terbaik tentu saja adalah hanya memilih elemen yang Anda perlukan untuk menghapus gayanya, mungkin melalui ID.
Jose Faeti
Ini hanya akan menargetkan div. Bagaimana jika Anda ingin menargetkan semuanya?
lampu jalan
1
Sebagai tambahan terkait, memanggil .css()dengan string kosong sebagai nilai kedua akan menghapus hanya nilai bernama dari gaya sebaris, misalnya $ ('div'). Css ('display', ''); hanya akan menghapus properti tampilan sebaris (jika disetel).
Tom Davies
2
@streetlight Gunakan $('*').removeAttr('style')untuk menargetkan semuanya.
Makaze
Tidak, sebenarnya yang kedua seharusnya sedikit lebih cepat karena jika JQuery memiliki pengertian maka itu akan menggunakan atribut remove standar. Selain itu, Anda melupakan overhead looping yang sangat tidak efisien melalui lebih banyak elemen DOM yang membuat metode kedua lebih cepat daripada yang pertama.
33

JavaScript biasa:

Anda tidak perlu jQuery untuk melakukan sesuatu yang sepele seperti ini. Gunakan saja .removeAttribute()metodenya.

Dengan asumsi Anda hanya menargetkan satu elemen, Anda dapat dengan mudah menggunakan berikut ini: (contoh)

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

Jika Anda menargetkan beberapa elemen, cukup putar melalui koleksi elemen yang dipilih: (contoh)

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

Array.prototype.forEach()- IE9 dan yang lebih baru / .querySelectorAll()- IE 8 (sebagian) IE9 dan yang lebih baru.

Josh Crozier
sumber
1
Sebuah alternatif untuk Array.prototype.forEach.calladalah operator percikan didukung dengan baik cukup, yang menyimpan baris: [... document.querySelectorAll('div')].forEach(div => div.removeAttribute('style')).
22 
$('div').removeAttr('style');
andres descalzo
sumber
Apakah ini lebih efisien daripada melakukan attr ('style', '')?
Matt
dengan $ ('div'). attr ('style', ''); <div style = ""> </div> dengan $ ('div'). removeAttr ('style'); <div> </div> lebih bersih
andres descalzo
mungkin, karena ini tidak menyetelnya ke nilai null, tetapi bagaimanapun juga Anda akan mendapatkan waktu pemrosesan yang besar karena harus melalui setiap div di badan.
Tyler Carter
ya, itu jelas, itu harus diubah menjadi ID $ ("# id") atau kelas $ (".classDivs)
andres descalzo
3

Saya menggunakan $('div').attr('style', '');teknik ini dan tidak berfungsi di IE8.

Saya mengeluarkan atribut style menggunakan alert()dan itu tidak menghapus gaya inline.

.removeAttr akhirnya melakukan trik di IE8.

rtvenge
sumber
3

Jika Anda hanya perlu mengosongkan styleelemen maka:
element.style.cssText = null;
Ini harus dilakukan dengan baik. Semoga membantu!

Tushar Shukla
sumber
Logika serupa tampaknya berlaku jika mencoba "mengosongkan" hanya satu properti gaya untuk sebuah elemen: element.style.display = null;- itulah yang saya butuhkan: D
Bilal Akil
2

Ini dapat dilakukan dengan dua langkah:

1: pilih elemen yang ingin Anda ubah dengan tagname, id, class dll.

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

  1. hapus atribut gaya

element.removeAttribute('style');

JRulle
sumber
-2

Anda juga dapat mencoba mencantumkan css di style sheet sebagai! Penting

BoringCode
sumber
3
sementara ini akan berhasil, adalah praktik yang buruk untuk hanya mengganti gaya sebaris dengan! penting untuk menghapusnya
joshvermaire