How to hide pictures with JavaScript

JavaScript is a programming language used for front-end development, which can hide images through some tricks and methods. In this article, some common tips and methods to hide pictures will be discussed.

1. Display attribute

The display attribute is an attribute used in CSS to control the display and hiding of elements. The standard attribute for displaying images is "block", while the attribute for hiding images is "none". Using JavaScript, you can control hiding and display by getting the display attribute of the image element.

For example, the following code can hide the picture:

let img = document.getElementById("image");
img.style.display = "none";

Of course, if you want to display the picture, just reset the display attribute:

let img = document.getElementById("image");
img.style.display = "block";

2. Opacity attribute

The opacity attribute is used to control the opacity of an element. When the opacity property is 0, the element will be completely transparent, which means the image will be hidden. Similarly, control hiding and display by getting the opacity attribute of the picture element.

The following is the JavaScript code for hiding images:

let img = document.getElementById("image");
img.style.opacity = "0";

To display images, reset the opacity attribute:

let img = document.getElementById("image");
img.style.opacity = "1";

3. Visibility attribute

visibility Properties are used to control whether an element is visible. When the visibility attribute is "hidden", the element will be hidden. Similarly, you can control hiding and display by getting the visibility attribute of the picture element.

The following is the JavaScript code for hiding images:

let img = document.getElementById("image");
img.style.visibility = "hidden";

To display images, reset the visibility attribute:

let img = document.getElementById("image");
img.style.visibility = "visible";

4. Use CSS classes

Another way to hide images is to use CSS classes. Set a class in the CSS file and set the display attribute of the image to none. In JavaScript, you can control the display and hiding of images by getting the element and adding or removing this class.

The following is the HTML and CSS code for hiding images using CSS classes:

<img  class="hidden lazy" src="/static/imghwm/default1.png" data-src="example.jpg" alt="How to hide pictures with JavaScript" >

.hidden {
  display: none;
}

The following is the code for hiding and showing images using CSS classes in JavaScript:

let img = document.getElementById("image");

// 隐藏图片
img.classList.add("hidden");

// 显示图片
img.classList.remove("hidden");

The above is There are some common methods to hide pictures. You can choose the appropriate method according to your needs. It should be noted that different methods may have different advantages and disadvantages depending on personal preferences and project needs. Therefore, you need to choose the right method to hide pictures at the right time.

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