Trong suốt quá trình phát triển web, người dùng cần ẩn hoặc hiển thị một số thành phần. Các yếu tố này có thể là một nút, một số hoạt ảnh hoặc thanh điều hướng, v.v. Hầu hết thời gian người dùng muốn một nút hoặc thanh điều hướng hiển thị cho chế độ xem trên máy tính nhưng không hiển thị cho chế độ xem trên thiết bị di động
Với JavaScript, người dùng có thể dễ dàng ẩn hoặc hiển thị một phần tử trên trang web, tùy thuộc vào hành vi của người dùng. Trong bài viết này, chúng ta sẽ xem cách JavaScript được sử dụng cho mục đích này
Ẩn và hiển thị các phần tử trong JavaScript
Sử dụng JavaScript, chúng ta có thể ẩn hoặc hiển thị một phần tử trên trang web bằng cách sử dụng
- Phong cách. trưng bày
- Phong cách. hiển thị
Hãy hiểu riêng từng cái với các ví dụ và sau đó so sánh chúng khác nhau như thế nào
Cách sử dụng phong cách. hiển thị trong JavaScript. Thuộc tính hiển thị đại diện cho một phần tử sẽ được hiển thị trên trang web của bạn. Sử dụng người dùng này có thể ẩn toàn bộ phần tử và trang được tạo vì phần tử trước đó hoàn toàn không có ở đó
cú pháp
tài liệu. getElementById["id-of-element"].kiểu dáng . hiển thị = "";
Ở đây trong dấu phẩy, một giá trị phải được xác định để có hiển thị nội dung hay không. Đây là một ví dụ
Ẩn phần tử. Phong cách. hiển thị = “không”
< html >
< body>
Click the "Hide Me" button to hide the DIV element:< /p >
< . jpg"
This is an apple
Hide Me
function myFunction[] {
document.getElementById["div"].style.display = "none";
}
< /script>
Khi người dùng nhấp vào nút, chức năng được gọi để ẩn phần tử. Điều này được thực hiện bằng cách không gán giá trị nào cho kiểu. trưng bày
Bây giờ hãy nhìn vào đầu ra, cách nút chiếm không gian của hình ảnh. Đây là cách hiển thị hoạt động, nó ẩn hoàn toàn phần tử và xây dựng lại trang như thể phần tử không có ở đó ngay từ đầu
Để hiển thị một phần tử. Phong cách. hiển thị = “” hoặc “khối”
< html >
< body>
Click the "Show me" button to show element the DIV element:
< . jpg" id = "div" >
< /div>
Show Me
function myFunction[] {
document.getElementById["div2"] . kiểu dáng . hiển thị = '' ;
}
Bây giờ tương tự, để hiển thị phần tử, nút đã di chuyển và cung cấp không gian cho phần tử khi hiển thị được thay đổi từ kiểu. display =”none” để tạo kiểu. hiển thị = “”
Thông qua những cách này, phần tử sẽ được hiển thị hoặc ẩn hoàn toàn chứ không chỉ là khả năng hiển thị của nó. Trang sẽ được xây dựng lại theo những hành vi này
Cách sử dụng phong cách. khả năng hiển thị trong JavaScript. Khả năng hiển thị của kiểu hoạt động theo cách tương tự, nhưng điểm khác biệt là chỉ khả năng hiển thị của phần tử bị ẩn khỏi trình đọc màn hình. Điều này có nghĩa là phần tử không bị xóa khỏi luồng trang, do đó để lại khoảng trống cho phần tử đó trên trang
cú pháp
tài liệu. getElementById["id-of-element"].kiểu dáng . khả năng hiển thị = "";
Ở đây trong dấu phẩy, giá trị “hidden” hoặc “” không có giá trị nào được xác định để có hiển thị nội dung hay không. Để hiểu rõ hơn về điều này, đây là một ví dụ
< html >
< body>
This is a paragraph.< /p >
< . button type="button" title="myFunction[]">Hide content of paragraph
This is another paragraph.< /p >
< . getElementById["div"]. Phong cách. visibility = "hidden"; script>
function myFunction[] {
document.getElementById["div"].style.visibility = "hidden";
}
< /script>
Bây giờ, ở đây khi nút được nhấp để ẩn khả năng hiển thị, nó chỉ ẩn nó cho mắt người xem
Trong trường hợp này, không gian trên trang web không bị chiếm bởi phần tử. Điều này cho thấy phong cách. hiển thị và phong cách. tầm nhìn khác nhau
Phần kết luận
Mọi người đều muốn ẩn hoặc hiển thị một số yếu tố cụ thể trên trang web của họ. Trong hướng dẫn cách làm này, chúng ta đã học cách thay đổi mức độ hiển thị của các phần tử trên trang web bằng JavaScript. Có hai cách cụ thể, nhưng chúng khác nhau một chút. Sử dụng phong cách. hiển thị nội dung bị ẩn và không gian của nó bị chiếm bởi nội dung khác. Trong khi đó, sử dụng phong cách. khả năng hiển thị, nội dung chỉ bị ẩn đối với người đọc, nhưng nó vẫn ở đó vì không gian của nó không thể bị chiếm bởi các yếu tố khác. Điều này cực kỳ hữu ích cho các nhà phát triển web, vì các nhà phát triển muốn một số nội dung được ẩn và một số được hiển thị theo góc nhìn.