Đặt lại thuộc tính hiển thị CSS về giá trị mặc định

Có thể ghi đè thuộc tính hiển thị với giá trị mặc định của nó không? Ví dụ: nếu tôi đã đặt nó thành không theo một kiểu và tôi muốn ghi đè nó theo một kiểu khác với mặc định của nó.

Hoặc là cách duy nhất để tìm ra mặc định của phần tử đó là gì và sau đó đặt nó thành phần tử đó? Muốn biết không phải phần tử thường là khối, nội tuyến hay bất cứ ...

Các kiểu mặc định của trình duyệt được xác định trong biểu định kiểu tác nhân người dùng, các nguồn mà bạn có thể tìm thấy ở đây . Thật không may, thông số cấp 3 Cascading và thừa kế không xuất hiện để đề xuất cách đặt lại thuộc tính kiểu về mặc định của trình duyệt. Tuy nhiên, có kế hoạch giới thiệu lại một từ khóa cho từ khóa này trong Cascading và thừa kế cấp 4 - nhóm làm việc chỉ đơn giản là chưa đặt tên cho từ khóa này (liên kết hiện nói revert, nhưng nó chưa phải là cuối cùng). Thông tin về hỗ trợ trình duyệt revertcó thể được tìm thấy trên caniuse.com .

Mặc dù thông số kỹ thuật cấp 3 giới thiệu một initialtừ khóa , việc đặt thuộc tính thành giá trị ban đầu sẽ đặt lại nó thành giá trị mặc định như được xác định bởi CSS , không được xác định bởi trình duyệt . Giá trị ban đầu displaylà inline; điều này được chỉ định ở đây . Các initialtừ khóa liên quan đến giá trị đó, không phải là trình duyệt mặc định. Các thông số kỹ thuật làm cho ghi chú này dưới alltài sản :

Ví dụ: nếu một tác giả chỉ định all: initialtrên một phần tử, nó sẽ chặn tất cả các kế thừa và đặt lại tất cả các thuộc tính, như thể không có quy tắc nào xuất hiện ở cấp độ tác giả, người dùng hoặc tác nhân người dùng của tầng.

Điều này có thể hữu ích cho phần tử gốc của một "widget" được bao gồm trong một trang, không muốn kế thừa các kiểu của trang bên ngoài. Tuy nhiên, lưu ý rằng mọi kiểu "mặc định" được áp dụng cho phần tử đó (chẳng hạn như display: blocktừ biểu định kiểu UA trên các phần tử khối như <div>) cũng sẽ bị xóa bỏ.

Vì vậy, tôi đoán cách duy nhất ngay bây giờ khi sử dụng CSS thuần là tìm kiếm giá trị mặc định của trình duyệt và đặt thủ công theo cách đó:

div.foo { display: inline-block; }
div.foo.bar { display: block; }

(Một thay thế cho ở trên sẽ là div.foo:not(.bar) { display: inline-block; }, nhưng điều đó liên quan đến việc sửa đổi bộ chọn ban đầu thay vì ghi đè.)

Nếu sử dụng javascript được cho phép , bạn có thể đặt thuộc displaytính thành một chuỗi trống. Điều này sẽ khiến nó sử dụng mặc định cho thành phần cụ thể đó.

var element = document.querySelector('span.selector');

// Set display to empty string to use default for that element
element.style.display = '';

Đây là một liên kết đến một jsbin .

Điều này thật tuyệt vì bạn không phải lo lắng về các loại màn hình khác nhau để hoàn nguyên (block , inline, inline-block, table-cell, vv).

Nhưng, nó yêu cầu javascript, vì vậy nếu bạn đang tìm kiếm một giải pháp chỉ css, thì đây không phải là giải pháp cho bạn.

Lưu ý: Điều này ghi đè các kiểu nội tuyến, nhưng không phải các kiểu được đặt trong css

unset display:

Bạn có thể sử dụng giá trị unsethoạt động trong cả Firefox và Chrome .

display: unset;

.foo     { display: none;  }
.foo.bar { display: unset; }

Không, nói chung là không thể. Khi một số mã CSS (hoặc HTML) đặt giá trị cho một thuộc tính trên một phần tử, không có cách nào để hoàn tác nó và báo cho trình duyệt sử dụng giá trị mặc định của nó.

Tất nhiên có thể đặt thuộc tính một giá trị mà bạn mong đợi là giá trị mặc định. Điều này có thể làm việc khá rộng rãi nếu bạn đánh dấu vào Rendering phần của HTML5 CR, chủ yếu phản ánh những gì các trình duyệt thực sự làm.

Tuy nhiên, câu trả lời là không có bản quyền vì các trình duyệt có thể có bất kỳ giá trị mặc định nào họ thích. Bạn nên phân tích lý do của việc muốn đặt lại về mặc định là gì; các gốc vấn đề vẫn có thể giải quyết được.

Nếu bạn có quyền truy cập vào JavaScript , bạn có thể tạo một phần tử và đọc kiểu tính toán của nó.

function defaultValueOfCssPropertyForElement(cssPropertyName, elementTagName, opt_pseudoElement) {
    var pseudoElement = opt_pseudoElement || null;
    var element = document.createElement(elementTagName);
    document.body.appendChild(element);
    var computedStyle = getComputedStyle(element, pseudoElement)[cssPropertyName];
    element.remove();
    return computedStyle;
}

// Usage:
defaultValueOfCssPropertyForElement('display', 'div'); // Output: 'block'
defaultValueOfCssPropertyForElement('content', 'div', ':after'); // Output: 'none'

Liên quan đến câu trả lời của BoltClock và John, cá nhân tôi đã gặp vấn đề với từ khóa ban đầu khi sử dụng IE11. Nó hoạt động tốt trong Chrome, nhưng trong IE dường như không có tác dụng.

Theo câu trả lời này, IE không hỗ trợ từ khóa ban đầu: Div display: ban đầu không hoạt động như dự định trong eg10 và chrome 29

Tôi đã thử đặt nó trống thay vì như được đề xuất ở đây: làm thế nào để trở lại bình thường sau khi hiển thị: không có gì cho hàng của bảng

Điều này đã làm việc và đủ tốt cho kịch bản của tôi. Tất nhiên để đặt giá trị ban đầu thực sự, câu trả lời trên là câu trả lời tốt duy nhất tôi có thể tìm thấy.