Di chuyển một phong cách nội tuyến cụ thể với Javascript | jQuery

Question

Tôi có đoạn mã sau trong html của tôi:

<p id='foo' style='text-align:center; font-size:14pt; font-family:verdana; color:red'>hello world</p> 

và rằng trong css bên ngoài của tôi:

#foo{ font-size:11pt; font-family:arial; color:#000; } 

Tôi muốn loại bỏ tất cả "in- kích thước "và" font-family "trong thuộc tính" style ", nhưng không phải là" color "và những thứ khác được đặt trong css bên ngoài.

Kết quả mong đợi:

<p id='foo' style='text-align:center; color:red'>hello world</p> 

Đã thử:

$('#foo').removeAttr('style'); // That removes all inline 
$('#foo').css('font-family',''); // That remove the css setted too 

Answer 1

Đối với những người không sử dụng jQuery, bạn có thể xóa kiểu cụ thể từ kiểu nội tuyến bằng phương pháp removeProperty gốc.Ví dụ:

elem.style.removeProperty('font-family'); 

Tất nhiên, IE < 9 không hỗ trợ này, do đó bạn sẽ phải sử dụng

elem.style.removeAttribute('font-family'); 

do đó, một trình duyệt cách chéo để làm điều đó sẽ là:

if (elem.style.removeProperty) { 
    elem.style.removeProperty('font-family'); 
} else { 
    elem.style.removeAttribute('font-family'); 
} 

Answer 2

Tôi nghĩ rằng không có giải pháp thích hợp cho vấn đề này (mà không thay đổi đánh dấu của bạn). Bạn có thể tìm kiếm và thay thế giá trị của thuộc tính kiểu:

var element = $('#foo'); 
element.attr('style', element.attr('style').replace(/font-size:[^;]+/g, '').replace(/font-family:[^;]+/g, '')) 

Đến nay, giải pháp tốt nhất là loại bỏ kiểu nội tuyến và quản lý kiểu bằng cách sử dụng lớp học.

Answer 3

Đề xuất của tôi sẽ tránh xa việc thiết lập nội dung này bằng cách sử dụng kiểu nội tuyến. Tôi sẽ đề nghị sử dụng các lớp và sau đó sử dụng jQuery để chuyển đổi giữa chúng:

CSS:

#foo{ font-size:11pt; font-family:arial; color:#000; } 
#foo.highlight {text-align:center; font-size:14pt; font-family:verdana; color:red} 

HTML:

<p id="foo" class="highlight">hello world</p> 

Javascript:

$('#foo').removeClass('highlight'); 
$('#foo').addClass('highlight'); 

Answer 4

Đặt các thuộc tính để inherit :

$('#foo').css('font-family','inherit').css('font-size','inherit'); 

Answer 5

Từ những gì tôi có thể thấy bạn thực sự cần hai kiểu khác nhau cho đoạn văn. Nó có thể được dễ dàng hơn để thiết lập những lên trong CSS và sau đó chỉ cần sử dụng jQuery để xóa/thêm như bạn cần:

#styleOne { color: red; font: normal 14pt Verdana; text-align: center; } 

#styleTwo{ color: #000; font: normal 11pt Arial; text-align: center; } 

html ban đầu của bạn sẽ trông giống như:

<p id="styleOne">hello world</p> 

Và sau đó để trở lại styleTwo trong jQuery

$('p#styleOne').removeClass('styleOne').addClass('styleTwo');