Home >Web Front-end >JS Tutorial >How to use the style.display attribute in JavaScript
The style.display property is the display property of the Style object, which is used to freely change the style of the element. For example, you can add various styles such as element height and width, color and background, etc.
Let’s take a look at the display attribute
The display attribute has the function of specifying the display style of the element.
Do not display the element, or display it as a block element, or you can specify various display methods
Basic usage of the style.display attribute
Let’s See the code as follows
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<img id="style1" src="img/girl.jpg" style="max-width:90%" style="max-width:90%" alt="How to use the style.display attribute in JavaScript" >
<br>
<input type="button" value="Hide" onclick="hide();"/>
<br>
<input type="button" value="Show" onclick="show();"/>
</body>
<script>
function hide() {
var e = document.getElementById("style1");
e.style.display = "none";
}
function show(){
var e = document.getElementById("style1");
e.style.display = "block";
}
</script>
</html>Use the style.display property in the above code to show or hide the image.
First, the img tag is used to display the image, and two buttons are created under the image.
The first button is the Hide button that hides the image.
The second button is the show button to display the image again.
The hide function is specified for the onclick attribute of the "Hide" button.
The hide function first uses the getElementById method to obtain the image element.
After obtaining the image element, we access the style.display attribute of the element and specify the string none.
You can hide an element by replacing the value with none.
Click the hide button to hide the image
Clicking the hide button will clear the image away and raise the button's position.
Instead, click the "Show" button and the image will reappear.
The show function is specified for the onclick attribute of the Show button.
Like the hide function, the show function accesses the style.display attribute after obtaining the image element using the getElementById method.
Then, instead of the string block, by doing this, the image block is displayed, and the image is displayed again.
#What is the difference between display and visibility?
In the sample code above, use the display property of the style object to change the display settings of the image.
However, in addition to the display attribute, you can also use the visibility attribute to show or hide images.
The code is as follows
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<img id="drag1" src="img/flowers.jpg" style="max-width:90%" style="max-width:90%" alt="How to use the style.display attribute in JavaScript" >
<br>
<input type="button" value="Hide with DISPLAY" onclick="hide1();"/>
<br>
<input type="button" value="Hide with VISIBILITY" onclick="hide2();"/>
</body>
<script>
function hide1() {
var e = document.getElementById("drag1");
e.style.display = "none";
}
function hide2() {
var e = document.getElementById("drag1");
e.style.visibility = "hidden";
}
</script>
</html>In the above code, we have created two buttons to hide the image.
The first is the Hide with DISPLAY button, which uses the same display attribute as before.
The second one is the Hide with VISIBILITY button, which is hidden using the visibility attribute.
The hide2 function is specified for the onclick attribute of the second button.
hide2 function uses the getElementById method to obtain the image element and access the style.visibility attribute.
Then, hide the image by replacing the hidden string.
As mentioned before, clicking the button will cause the image to disappear and the button below the image to rise.
However, if you use visibility's click button, the part with the image will only be blank and the space will be retained.
#It can be clearly seen that the button remains in its original position, the position of the image is blank and the space is retained.
The above is the detailed content of How to use the style.display attribute in JavaScript. For more information, please follow other related articles on the PHP Chinese website!