Home > Article > Web Front-end > How to use JavaScript to achieve image effect when clicked
How to use JavaScript to achieve image effect when clicked
- WBOYOriginal
- 2021-12-07 09:49:3312919browse
Implementation method: 1. Bind the click event to the button and specify an event processing function; 2. Use "document.getElementById("Picture ID value").style.display="block in the event processing function The ";" statement can be set to display the image by clicking the button.
The operating environment of this tutorial: Windows 10 system, JavaScript version 1.8.5, Dell G3 computer.
How to use JavaScript to achieve the effect of a picture appearing on click
In JavaScript, you can first bind the click event to the button and formulate a time processing function. Changing the display attribute of the picture element in the event processing function allows the picture to appear when clicking the button. 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>
img{
display:none;
}
</style>
</head>
<body>
<button onclick="showimg()">显示图片</button>
<img src="1118.02.png" id="test" alt="How to use JavaScript to achieve image effect when clicked" >
<script>
function showimg(){
document.getElementById('test').style.display="block";
}
</script>
</body>
</html>Output result:
[Related recommendations: javascript learning tutorial】
The above is the detailed content of How to use JavaScript to achieve image effect when clicked. For more information, please follow other related articles on the PHP Chinese website!