Sử dụng thuộc tính hidden (được đặt thành “true”), có thể ẩn bất kỳ phần tử hình ảnh nào có thể xuất hiện cùng với nội dung được nhúng. Thông thường, nó có thể được sử dụng cho nội dung âm thanh, theo đó việc không bao gồm thuộc tính sẽ dẫn đến việc điều khiển truyền tải (phát, tạm dừng, v.v.) hiển thị bên dưới âm thanh

Thí dụ

Thuộc tính hidden được đặt thành "true" để ẩn điều khiển phương tiện trên một số âm thanh

Giá trị

Chỉ “true” hoặc “_______9_______”

Chia sẻ bài viết này

Adam Roberts

Adam là người đứng đầu các bản tin của SitePoint, người chủ yếu viết Phiên bản, một bản tin hàng ngày bao gồm mọi thứ mới và thú vị trong thế giới phát triển web. Anh ấy để râu và sẽ nói chuyện với bạn về bia và Chiến tranh giữa các vì sao, nếu bạn để anh ấy

Thuộc tính toàn cầu ẩn trong HTML5 là thuộc tính Boolean. Nó quy định rằng phần tử được nhắm mục tiêu có liên quan hơn nữa hay không đối với tài liệu HTML. Một ví dụ về việc sử dụng thuộc tính ẩn là nó có thể được sử dụng để che/khám phá bất kỳ nội dung cụ thể nào có trên trang web HTML không được phép trừ khi người dùng đã được xác thực. Cho đến lúc đó, các trình duyệt sẽ không hiển thị các phần tử có thuộc tính ẩn đang hoạt động (i. e. thuộc tính được thiết lập)

Sử dụng thuộc tính ẩn

Một cách sử dụng các thuộc tính ẩn như vậy có thể giống như ngăn người dùng nhìn thấy một phần tử cho đến khi một số điều kiện được đáp ứng (chẳng hạn như chọn một nút radio, v.v. ) sau đó, mã JavaScript có thể quy định lại thuộc tính ẩn, do đó làm cho phần tử hiển thị. Thuộc tính này không nên được sử dụng để ẩn nội dung chỉ cho một bản trình bày riêng lẻ;

Bắt đầu khóa học phát triển phần mềm miễn phí của bạn

Phát triển web, ngôn ngữ lập trình, kiểm thử phần mềm và những thứ khác

Nội dung bị ẩn không được liên kết với nội dung không bị ẩn hoặc nội dung liên quan đến nội dung bị ẩn nhưng vẫn đang hoạt động. Điều này đảm bảo rằng các phần tử biểu mẫu chưa thể được gửi và các phần tử tập lệnh chưa thể được thực thi. Tuy nhiên, Tập lệnh và Thành phần có thể đề cập đến bất kỳ nội dung nào bị ẩn trong một số ngữ cảnh khác

Gói phát triển phần mềm tất cả trong một(hơn 600 khóa học, hơn 50 dự án)

Giá bán
Xem các khóa học

Hơn 600 khóa học trực tuyến. hơn 50 dự án. Hơn 3000 giờ. Giấy chứng nhận có thể kiểm chứng. Truy cập trọn đời
4. 6 (85.952 xếp hạng)

It would be totally incorrect to utilize the attribute in a real-world scenario to connect to a section pronounced with a hidden attribute. If the linked content is neither relevant nor applicable, then there is no need to pack them together. As per the definition of the Hidden attribute, we can hide any content present within an HTML webpage using the hidden attribute and then JavaScript code can be used to access it afterwards. Target to hide an element can also be achieved by CSS with the property as display property (i.e. setting it to none) but using the hidden attribute is an easy approach.

Ghi chú. Việc thay đổi giá trị thuộc tính hiển thị CSS trên một phần tử có thuộc tính ẩn sẽ ghi đè hành vi của phần tử đó. Ví dụ: các phần tử được tạo kiểu là hiển thị. flex sẽ được hiển thị bất chấp sự hiện diện của thuộc tính ẩn

cú pháp

Ví dụ về phần tử ẩn HTML

Đưa ra dưới đây là các ví dụ về phần tử ẩn HTML

Ví dụ 1

Mã số

EDUCBA
HTML Hide element

đầu ra

Ví dụ #2

Mã số

EDUCBA
HTML Hide element
TOGGLE HIDDEN ELEMENTS

đầu ra

Ví dụ #3 – Tính hữu ích của Thuộc tính

Theo định nghĩa của thuộc tính Hidden, chúng ta có thể ẩn bất kỳ nội dung nào có trong trang web HTML bằng thuộc tính hidden và sau đó mã JavaScript có thể được sử dụng để truy cập nội dung đó sau đó. Mục tiêu để ẩn một phần tử cũng có thể đạt được bằng CSS với thuộc tính là thuộc tính hiển thị (i. e. đặt nó thành không) nhưng sử dụng thuộc tính ẩn là một cách tiếp cận dễ dàng. Do đó, chúng ta có thể nói rằng nội dung có thuộc tính ẩn là một phần của DOM, nhưng người dùng không thể truy cập nội dung đó

In the below example, we’ll pick the part of a hidden element using JavaScript code:

Mã số

EDUCBA
HTML Hide element
DISPLAY HIDDEN TEXT
(Hidden text will appear here)

đầu ra

Những điểm quan trọng cần nhớ

Đây là một số điểm quan trọng cần được biết rõ trước khi tương tác với thuộc tính ẩn

• Nội dung có thể truy cập được ở độ phân giải và kích thước màn hình riêng biệt không được sử dụng thuộc tính ẩn để ẩn nội dung
• Không nên sử dụng thuộc tính ẩn để ẩn/che các phần không nhìn thấy được của trình chuyển đổi nội dung hoặc thành phần tab
• Phần tử không ẩn không được liên kết với phần tử ẩn
• Các yếu tố được đánh dấu là ẩn vẫn có khả năng hoạt động
• Nếu bạn muốn ẩn nội dung khỏi tất cả người dùng, hãy sử dụng thuộc tính ẩn HTML5 (cùng với hiển thị CSS. none đối với những trình duyệt chưa hỗ trợ ẩn). Không cần sử dụng aria-hidden

Phần kết luận

Dưới đây được đề cập là một số điểm chính mà bạn nên nhớ từ chủ đề này

Các trường hợp sử dụng phù hợp cho thuộc tính ẩn bao gồm

• Nội dung chưa liên quan nhưng sau này có thể cần
• Nội dung đã được sử dụng trước đây nhưng không còn cần thiết nữa
• Nội dung có thể tái sử dụng và được nhiều phần khác của trang sử dụng theo kiểu mẫu
• Tạo canvas ngoài màn hình làm bộ đệm vẽ

Các trường hợp sử dụng không phù hợp của thuộc tính ẩn bao gồm

• Ẩn bảng trong hộp thoại theo thẻ
• Ẩn nội dung trong một bản trình bày riêng lẻ trong khi dự định hiển thị nội dung đó ở những người khác

Ghi chú. Các phần tử bị ẩn không được liên kết với các phần tử không ẩn khác cho đến khi chúng có liên quan với nhau

Bài viết được đề xuất

Đây là hướng dẫn về phần tử ẩn HTML. Ở đây chúng ta thảo luận về giới thiệu, cách sử dụng các thuộc tính ẩn và các ví dụ về phần tử ẩn HTML. Bạn cũng có thể xem các bài viết sau để tìm hiểu thêm –

Ý nghĩa ẩn trong mã là gì?

Yếu tố ẩn là gì?

Dữ liệu ẩn được lưu trữ trong HTML như thế nào?