Có một điều ngược lại để hiển thị: không?

Ngược lại visibility: hiddenlà visibility: visible. Tương tự như vậy, có bất kỳ ngược lại cho display: none?

Nhiều người trở nên bối rối khi tìm ra cách hiển thị một yếu tố khi có display: none, vì nó không rõ ràng như sử dụng visibilitytài sản.

Tôi chỉ có thể sử dụng visibility: hiddenthay vì display: none, nhưng nó không mang lại hiệu quả tương tự, vì vậy tôi sẽ không sử dụng nó.

display: nonekhông có nghĩa đen giống như visibility:hiddenkhông.

Các visibilitybất động sản quyết định liệu một yếu tố có thể nhìn thấy hay không. Do đó, nó có hai trạng thái ( visiblevà hidden) trái ngược với nhau.

Các displaybất động sản, tuy nhiên, quyết định những gì quy tắc bố trí một phần tử sẽ làm theo. Có nhiều loại khác nhau của quy tắc cho cách yếu tố sẽ đặt mình ra trong CSS, do đó là những giá trị khác nhau ( block, inline, inline-blockvv - xem tài liệu cho các giá trị ở đây ).

display:none loại bỏ hoàn toàn một yếu tố khỏi bố cục trang, như thể nó không có ở đó.

Tất cả các giá trị khác displaykhiến cho phần tử trở thành một phần của trang, do đó, theo một nghĩa nào đó, tất cả chúng đều ngược lại display:none.

Nhưng không có một giá trị nào là điều ngược lại trực tiếp display:none- giống như không có kiểu tóc nào trái ngược với "hói".

Một điều ngược lại thực sự display: nonelà không có (chưa).

Nhưng display: unsetlà rất gần và làm việc trong hầu hết các trường hợp.

Từ MDN (Mạng lưới nhà phát triển Mozilla):

Từ khóa CSS không được đặt là sự kết hợp của các từ khóa ban đầu và kế thừa. Giống như hai từ khóa toàn CSS này, nó có thể được áp dụng cho bất kỳ thuộc tính CSS nào, bao gồm cả tốc ký CSS. Từ khóa này đặt lại thuộc tính về giá trị được kế thừa của nó nếu nó kế thừa từ cha mẹ của nó hoặc thành giá trị ban đầu nếu không. Nói cách khác, nó hoạt động giống như từ khóa kế thừa trong trường hợp đầu tiên và giống như từ khóa ban đầu trong trường hợp thứ hai.

(nguồn: https://developer.mozilla.org/docs/Web/CSS/unset )

Cũng lưu ý rằng display: reverthiện đang được phát triển. Xem MDN để biết chi tiết.

Khi thay đổi thành phần displaytrong Javascript, trong nhiều trường hợp, một tùy chọn phù hợp để 'hoàn tác' kết quả element.style.display = "none"là element.style.display = "". Thao tác này sẽ xóa displaykhai báo khỏi stylethuộc tính, hoàn nguyên giá trị thực của thuộc displaytính về giá trị được đặt trong biểu định kiểu cho tài liệu (về mặc định của trình duyệt nếu không được xác định lại ở nơi khác). Nhưng cách tiếp cận đáng tin cậy hơn là có một lớp trong CSS như

.invisible { display: none; }

và thêm / xóa tên lớp này thành / từ element.className.

bạn có thể dùng

display: normal;

Nó hoạt động như bình thường .... Đó là một hack nhỏ trong css;)

Tôi sử dụng display:block; nó làm việc cho tôi

Giống như Paul giải thích không có nghĩa đen đối với màn hình: không có gì trong HTML vì mỗi thành phần có màn hình mặc định khác nhau và bạn cũng có thể thay đổi màn hình với kiểu lớp hoặc kiểu nội tuyến, v.v.

Tuy nhiên, nếu bạn sử dụng một cái gì đó như jQuery, các hàm hiển thị và ẩn của chúng hoạt động như thể không có gì trái ngược với hiển thị. Khi bạn ẩn, và sau đó hiển thị lại một phần tử, nó sẽ hiển thị chính xác theo cách tương tự như trước khi nó bị ẩn. Họ làm điều này bằng cách lưu trữ giá trị cũ của thuộc tính hiển thị khi ẩn phần tử để khi bạn hiển thị lại, nó sẽ hiển thị giống như trước khi bạn ẩn nó. https://github.com/jquery/jquery/blob/740e190223d19a114d5373758127285d14d6b71e/src/css.js#L180

Điều này có nghĩa là nếu bạn đặt div chẳng hạn để hiển thị nội tuyến hoặc khối nội tuyến và bạn ẩn nó và sau đó hiển thị lại, nó sẽ lại hiển thị dưới dạng hiển thị nội tuyến hoặc khối nội tuyến giống như trước đây

<div style="display:inline" >hello</div>
<div style="display:inline-block">hello2</div>
<div style="display:table-cell" >hello3</div>

kịch bản:

  $('a').click(function(){
        $('div').toggle();
    });

Lưu ý rằng thuộc tính hiển thị của div sẽ không đổi ngay cả sau khi nó bị ẩn (display: none) và hiển thị lại.

Trong trường hợp biểu định kiểu thân thiện với máy in, tôi sử dụng như sau:

/* screen style */
.print_only { display: none; }

/* print stylesheet */
div.print_only { display: block; }
span.print_only { display: inline; }
.no_print { display: none; }

Tôi đã sử dụng điều này khi tôi cần in một biểu mẫu có chứa các giá trị và các trường đầu vào rất khó in. Vì vậy, tôi đã thêm các giá trị được bọc trong thẻ span.print_only (div.print_only đã được sử dụng ở nơi khác) và sau đó áp dụng lớp .no_print cho các trường đầu vào. Vì vậy, trên màn hình, bạn sẽ thấy các trường đầu vào và khi được in, chỉ có các giá trị. Nếu bạn muốn nhận được sự ưa thích, bạn có thể sử dụng JS để cập nhật các giá trị trong thẻ span khi các trường được cập nhật nhưng điều đó không cần thiết trong trường hợp của tôi. Có lẽ không phải là giải pháp thanh lịch nhất nhưng nó hiệu quả với tôi!

Bạn có thể sử dụng display: block

Thí dụ :

<!DOCTYPE html>
<html>
<body>

<p id="demo">Lorem Ipsum</p>

<button type="button" 
onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
<button type="button" 
onclick="document.getElementById('demo').style.display='block'">Click Me!</button>

</body>
</html> 

Tôi gặp phải thử thách này khi xây dựng một ứng dụng mà tôi muốn ẩn một bảng cho một số người dùng nhất định nhưng không phải cho những người khác.

Ban đầu tôi thiết lập nó dưới dạng display: none nhưng sau đó display: inline-block cho những người dùng tôi muốn xem nhưng tôi gặp phải sự cố định dạng mà bạn có thể mong đợi (các cột hợp nhất hoặc nói chung là lộn xộn).

Cách tôi làm việc xung quanh nó là hiển thị bảng trước và sau đó thực hiện "display: none" cho những người dùng mà tôi không muốn nhìn thấy nó. Bằng cách này, nó được định dạng bình thường nhưng sau đó biến mất khi cần thiết.

Một chút giải pháp bên nhưng có thể giúp được ai đó!

ngược lại với 'none' là 'flex' trong khi làm việc với phản ứng gốc.

khả năng hiển thị: ẩn sẽ ẩn phần tử nhưng phần tử là của chúng với DOM. Và trong trường hợp hiển thị: không có phần nào sẽ xóa phần tử khỏi DOM.

Vì vậy, bạn có tùy chọn cho phần tử để ẩn hoặc bỏ ẩn. Nhưng một khi bạn xóa nó (ý tôi là không hiển thị) thì nó không có giá trị ngược lại. display có một vài giá trị như display: block, display: inline, display: inline-block và nhiều cái khác. bạn có thể kiểm tra nó từ W3C.

Câu trả lời tốt nhất cho display: nonelà

display:inline

hoặc là

display:normal

Bạn có thể sử dụng display:block;và cũng có thể thêmoverflow:hidden;

"Ngược lại" tốt nhất sẽ là trả nó về giá trị mặc định là:

display: inline