cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk mencapai kesan penampilan klik dengan JavaScript

Bagaimana untuk mencapai kesan penampilan klik dengan JavaScript

WBOY
WBOYasal
2021-12-28 18:28:503611semak imbas

Kaedah pelaksanaan: 1. Ikat acara klik pada butang dan nyatakan fungsi pemprosesan acara; 2. Gunakan "document.getElementById(elemen objek muncul).style.display="block"; dalam pemprosesan acara; function; "Tetapan penyata boleh dipaparkan dengan mengklik elemen butang.

Bagaimana untuk mencapai kesan penampilan klik dengan JavaScript

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi JavaScript 1.8.5, komputer Dell G3.

Bagaimana untuk mencapai kesan penampilan klik dalam JavaScript

Mula-mula buat butang dan ikat fungsi pemprosesan acara pada butang, yang boleh dilaksanakan dalam fungsi pemprosesan acara Kesan paparan elemen.

Contoh adalah seperti berikut: 

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
   div{
       width:200px;
       height:200px;
       background:red;
       display:none;
   }
   </style>
</head>
<body>
   <button onclick="showimg()">显示图片</button>
   <div id="test"></div>
   <script>
   function showimg(){
      document.getElementById(&#39;test&#39;).style.display="block";
   }
   </script>
</body>
</html>

Hasil keluaran:

1.gif

[Cadangan berkaitan: Tutorial pembelajaran javascript】

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan penampilan klik dengan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript 对象 事件 display
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Ajar anda langkah demi langkah cara menulis log dalam perkhidmatan Node.jsArtikel seterusnya：Ajar anda langkah demi langkah cara menulis log dalam perkhidmatan Node.js

Artikel berkaitan

Lihat lagi