Home >Web Front-end >JS Tutorial >How to achieve click appearance effect with JavaScript

How to achieve click appearance effect with JavaScript

WBOYOriginal: 2021-12-28 18:28:503645browse

Implementation method: 1. Bind the click event to the button and specify an event processing function; 2. Use "document.getElementById(element object appears).style.display="block"; in the event processing function; "Statement settings can be displayed by clicking the button element.

The operating environment of this tutorial: Windows 10 system, JavaScript version 1.8.5, Dell G3 computer.

How to achieve the click appearance effect in JavaScript

First create a button and bind an event processing function to the button, which can be implemented in the event processing function Element display effect.

The example is as follows:

<!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>

Output result:

How to achieve click appearance effect with JavaScript

##[Related recommendations:

javascript learning tutorial 】

The above is the detailed content of How to achieve click appearance effect with JavaScript. For more information, please follow other related articles on the PHP Chinese website!

JavaScript 对象事件 display

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Teach you step by step how to write logs in Node.js serviceNext article：Teach you step by step how to write logs in Node.js service

See more

How to achieve click appearance effect with JavaScript

Related articles