Làm cách nào để bỏ đặt thuộc tính CSS của một phần tử bằng jQuery?

93

Nếu tôi đặt giá trị CSS trên một phần tử cụ thể bằng cách sử dụng:

$('#element').css('background-color', '#ccc');

Tôi muốn có thể bỏ đặt giá trị dành riêng cho phần tử đó và sử dụng giá trị xếp tầng, dọc theo các dòng:

$('#element').css('background-color', null);

Nhưng cú pháp đó dường như không hoạt động - điều này có thể sử dụng một cú pháp khác không?

Chỉnh sửa: Giá trị không được kế thừa từ phần tử mẹ - các giá trị ban đầu đến từ bộ chọn cấp phần tử. Xin lỗi vì bất kỳ sự nhầm lẫn nào!

jquery css

— ngu ngốc
nguồn

141

Từ tài liệu jQuery :

Đặt giá trị của thuộc tính kiểu thành một chuỗi trống - ví dụ $('#mydiv').css('color', '')- xóa thuộc tính đó khỏi một phần tử nếu nó đã được áp dụng trực tiếp, cho dù trong thuộc tính kiểu HTML, thông qua .css()phương thức của jQuery hoặc thông qua thao tác DOM trực tiếp của thuộc styletính. Tuy nhiên, nó không xóa kiểu đã được áp dụng với quy tắc CSS trong biểu định kiểu hoặc <style>phần tử.

— Glenn Moss
nguồn

Tôi đã gặp câu hỏi này khi tôi gặp vấn đề này. Trong trường hợp của tôi, tôi đang đặt thuộc tính css trong một stylethuộc tính trên thẻ, vì vậy phương pháp này không hoạt động. Việc áp dụng kiểu với .css()phương thức thay vì trong thẻ đã cho phép tôi xóa nó sau này.

— Glenn Moss,

14

Tôi nghĩ bạn cũng có thể làm:

$('#element').css('background-color', '');

Đó là những gì tôi đã từng làm cách đây rất lâu để thuộc displaytính trong javascript thuần-cũ hiển thị / ẩn một trường.

— FryGuy
nguồn

4

Trên thực tế, cú pháp mà tôi nghĩ là không chính xác (với null) dường như đang hoạt động - bộ chọn của tôi được tạo không đúng cách và do đó không mang lại phần tử nào. Ôi!

— ngu ngốc
nguồn

21

Tính đến jquery 1.4.3 css(..., null)không làm việc và css(..., '')nên được sử dụng thay - bugs.jquery.com/ticket/7233

— Tim Sylvester

3

Thử cái này:

$('#element').css('background-color', 'inherit');

— HectorMac
nguồn

1

Kế thừa là tiếc không phải là hành vi của tôi đang tìm kiếm "tài sản có giá trị tính toán tương tự như các tài sản cho cha mẹ của phần tử" từ w3.org/TR/CSS2/cascade.html

— cdleary

Có nhiều khả năng là 'ban đầu' hơn 'kế thừa'. 'Inherit' phỏng theo từ gốc, 'Initial' thực hiện những gì từ này nói.

— Chris S.

0

Đối với những gì đáng giá, điều này dường như không hoạt động trong IE 8 cho 'bộ lọc', tôi đã phải sử dụng điều này (trong cuộc gọi lại fadeIn):

$(this).attr('style', $(this).attr('style').replace(/\bfilter:\s*;*/, ''));

Rõ ràng, tôi cần phải loại bỏ một khai báo bộ lọc nội tuyến trống để CSS có thể có hiệu lực; có các quy tắc nội dòng khác nên tôi không thể xóa thuộc tính style.

— Đồi Brandon
nguồn

-2

Nếu nó có thể hữu ích, tôi thêm một vấn đề với dấu ngoặc kép:

$('#element').css("border-color", "");

không hoạt động trong khi

$('#element').css('border-color', '');

làm

— merlintintin
nguồn