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

Question

Nếu tôi có những điều sau đây trong html của tôi:

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

Và điều này trong css style sheet 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 phong cách nội tuyến và chỉ để lại các kiểu được chỉ định bởi biểu định kiểu css?

Answer 1

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

hoặc

$('div').removeAttr('style'); (Từ Andres's Answer)

Để làm nhỏ này một chút, hãy thử này:

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

này cần đẩy nó lên 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, quá trình này có thể mất một chút thời gian để xử lý nếu bạn có số 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.

Answer 2

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

Answer 3

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

Answer 4

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

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

.removeAttr đã kết thúc thực hiện thủ thuật trong IE8.

Answer 5

Plain JavaScript:

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 phương thức .removeAttribute().

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

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

Nếu bạn đang nhắm mục tiêu nhiều yếu tố, chỉ cần lặp qua các bộ sưu tập được lựa chọn của các yếu tố: (example)

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.

Answer 6

Điều này có thể được thực hiện theo 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ỏ các thuộc tính style

element.removeAttribute('style');

Answer 7

Nếu bạn cần chỉ là trống style của một nguyên tố thì:
element.style.cssText = null;
này nên làm tốt. Hy vọng nó giúp!