Làm cách nào để xóa tất cả các kiểu nội tuyến bằng javascript và chỉ để lại những kiểu được chỉ định trong bảng định kiểu css?

Nếu tôi có những thứ sau trong html của mình:

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

Và điều này trong trang định kiểu css của tôi:

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

Có cách nào, với javascript / jquery, để loại bỏ tất cả các kiểu nội tuyến và chỉ để lại các kiểu được chỉ định bởi bảng định kiểu css không?

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

hoặc là

$('div').removeAttr('style');(Từ câu trả lời của Andres )

Để làm cho điều này nhỏ hơn một chút, hãy thử cách này:

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

Điều này sẽ tăng tốc một chút vì nó kiểm tra xem các div có thuộc tính style hay không.

Dù bằng cách nào, điều này có thể mất một chút thời gian để xử lý nếu bạn có một lượng lớn div, vì vậy bạn có thể muốn xem xét các phương pháp khác ngoài javascript.

JavaScript thuần túy:

Bạn không cần jQuery để làm điều gì đó tầm thường như thế này. Chỉ cần sử dụng .removeAttribute()phương pháp.

Giả sử bạn chỉ nhắm mục tiêu một phần tử duy nhất, bạn có thể dễ dàng sử dụng như sau: (ví dụ)

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

Nếu bạn đang nhắm mục tiêu nhiều phần tử, chỉ cần lặp lại tập hợp các phần tử đã chọn: (ví dụ)

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

Array.prototype.forEach()- IE9 trở lên / .querySelectorAll()- IE 8 (một phần) IE9 trở lên.

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

Tôi đã sử dụng $('div').attr('style', ''); kỹ thuật và nó không hoạt động trong IE8.

Tôi đã xuất thuộc tính style bằng alert() và nó không loại bỏ các kiểu nội tuyến.

.removeAttr cuối cùng đã thực hiện thủ thuật trong IE8.

Nếu bạn chỉ cần làm trống stylephần tử thì:
element.style.cssText = null;
Điều này sẽ làm tốt. Hy vọng nó giúp!

Điều này có thể được thực hiện trong hai bước:

1: chọn phần tử bạn muốn thay đổi theo tên thẻ, id, lớp, v.v.

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

2. loại bỏ thuộc tính style

element.removeAttribute('style');

Bạn cũng có thể thử liệt kê css trong style sheet là! Important