Cách ẩn thẻ p trong JavaScript

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”

<. LOẠI TÀI LIỆU html>
< html >

< nội dung >
    < p > Nhấp vào "Ẩn tôi" . < /p >
    < div id = "div" >
      < img src="img1.jpg" alt="" chiều rộng="300 px" height="300 px">
Đây là quả táo
    < /div >
    < nút khi nhấp chuột="myFunction()">Hide Me</button>
    < tập lệnh >
hàm myFunction() {
tài liệu. getElementById("div"). phong cách. hiển thị = "không";
}
    < /tập lệnh >
< /body >

< /html >  

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”

<. LOẠI TÀI LIỆU html>
< html >

< nội dung >
   < p >Nhấp vào "Cho tôi xem" . < /p >
   < div id = "div" >
      < img src="img2. jpg" id ="div2" alt="" width="300 px" height="300 px" style="display:none" >

   < /div >
   < nút onclick="myFunction()">Show Me</button>

   < tập lệnh >
   function myFunction () {

   tài liệu. getElementById ("div2") . kiểu dáng . hiển thị = '' ;
    }
   < /tập lệnh >
< /body >

< /html > 

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ụ

<. LOẠI TÀI LIỆU html>
< html >
< nội dung >

< p id="div">This is a paragraph.< /p >

< nút loại="nút" onclick="myFunction()">Hide content of paragraph</button>
< p id="div2">This is another paragraph.< /p >
< tập lệnh >
hàm myFunction() {
tài liệu. getElementById("div"). phong cách. khả năng hiển thị = "ẩn";
}
< /tập lệnh >

< /body >
< /html >

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.

Làm cách nào để ẩn thẻ p trong HTML?

Ẩn () trong JavaScript là gì?

Làm cách nào để ẩn id trong JavaScript?

Làm cách nào để ẩn một nút trong JavaScript?