Rumah > Artikel > hujung hadapan web > Apakah cara untuk menyembunyikan elemen dalam JavaScript?
Kaedah: 1. Pernyataan "Object.style.display="none""; 2. Pernyataan "Object.style.visibility="hidden"" 3. "Object.style.opacity=0"; Pernyataan; 4. penyataan "$(selector).hide()".
Persekitaran pengendalian tutorial ini: sistem windows7, versi javascript1.8.5&&jquery1.10.0, komputer Dell G3.
Kaedah JavaScript untuk menyembunyikan elemen
Kaedah pertama
<!DOCTYPE html> <html> <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> <style> #myBtn { width: 300px; height: 150px; background-color: rgb(16, 130, 150); color: coral; font-size: 35px; } </style> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>隐藏元素</title> </head> <body> <button id="myBtn">点我有惊喜哦!</button> <script> var btn = document.getElementById("myBtn") btn.addEventListener('click', function (event) { document.getElementById("myBtn").style.display = "none"; }) </script> </body> </html>
Jenis kedua
<!DOCTYPE html> <html> <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>隐藏元素</title> <style> #myBtn { width: 300px; height: 150px; background-color: rgb(220, 140, 228); color: coral; font-size: 35px; } </style> </head> <body> <button id="myBtn">点我有惊喜哦!</button> <script> var btn = document.getElementById("myBtn") btn.addEventListener('click', function (event) { document.getElementById("myBtn").style.visibility = "hidden"; }) </script> </body> </html>
Jenis ketiga
<!DOCTYPE html> <html> <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>隐藏元素</title> <style> #myBtn { width: 300px; height: 150px; background-color: rgb(192, 231, 128); color: coral; font-size: 35px; } </style> </head> <body> <button id="myBtn">点我有惊喜哦!</button> <script> var btn = document.getElementById("myBtn") btn.addEventListener('click', function (event) { document.getElementById("myBtn").style.opacity = 0; }) </script> </body> </html>
Jenis keempat
<!DOCTYPE html> <html> <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>隐藏元素</title> <style> #myBtn { width: 300px; height: 150px; background-color: rgb(156, 97, 121); color: coral; font-size: 35px; } </style> </head> <body> <button id="myBtn">点我有惊喜哦!</button> <script> var btn = document.getElementById("myBtn") btn.addEventListener('click', function (event) { $("#myBtn").hide(); }) </script> </body> </html>
[Pembelajaran yang disyorkan: Tutorial JavaScript Lanjutan]
Atas ialah kandungan terperinci Apakah cara untuk menyembunyikan elemen dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!