ฉันจะลบสไตล์อินไลน์ทั้งหมดด้วยจาวาสคริปต์และเหลือเฉพาะสไตล์ที่ระบุในสไตล์ชีต css ได้อย่างไร

หากฉันมีสิ่งต่อไปนี้ใน html ของฉัน:

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

และสิ่งนี้ในสไตล์ชีต css ของฉัน:

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

มีวิธีใดบ้างที่ใช้ javascript / jquery เพื่อลบสไตล์อินไลน์ทั้งหมดและเหลือเฉพาะสไตล์ที่ระบุโดยสไตล์ชีต css

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

หรือ

$('div').removeAttr('style');(จากคำตอบของ Andres )

หากต้องการทำให้เล็กลงให้ลองทำดังนี้:

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

สิ่งนี้ควรเร่งความเร็วขึ้นเล็กน้อยเนื่องจากตรวจสอบว่า div มีแอตทริบิวต์ style

ไม่ว่าจะด้วยวิธีใดการดำเนินการนี้อาจใช้เวลาสักครู่ในการประมวลผลหากคุณมี div จำนวนมากดังนั้นคุณอาจต้องการพิจารณาวิธีอื่นนอกเหนือจากจาวาสคริปต์

JavaScript ธรรมดา:

คุณไม่จำเป็นต้องใช้ jQuery เพื่อทำสิ่งที่ไม่สำคัญเช่นนี้ เพียงแค่ใช้.removeAttribute()วิธี

สมมติว่าคุณกำหนดเป้าหมายเพียงองค์ประกอบเดียวคุณสามารถใช้สิ่งต่อไปนี้: (ตัวอย่าง)

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

หากคุณกำหนดเป้าหมายหลายองค์ประกอบให้วนซ้ำคอลเลกชันขององค์ประกอบที่เลือก: (ตัวอย่าง)

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

Array.prototype.forEach()- IE9 ขึ้นไป / .querySelectorAll()- IE 8 (บางส่วน) IE9 ขึ้นไป

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

ฉันใช้$('div').attr('style', '');เทคนิคนี้และไม่ได้ผลใน IE8

ฉันเอาท์พุทแอตทริบิวต์สไตล์โดยใช้alert()และมันไม่ได้ลอกสไตล์อินไลน์ออก

.removeAttr จบลงด้วยการทำเคล็ดลับใน IE8

หากคุณต้องการเพียงแค่ทำให้styleองค์ประกอบว่างเปล่า:
element.style.cssText = null;
สิ่งนี้ควรทำดี หวังว่าจะช่วยได้!

สามารถทำได้ในสองขั้นตอน:

1: เลือกองค์ประกอบที่คุณต้องการเปลี่ยนโดยใช้ tagname, id, class เป็นต้น

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

2. ลบแอตทริบิวต์สไตล์

element.removeAttribute('style');

คุณสามารถลองแสดงรายการ css ในสไตล์ชีตเป็น! important