Home >Web Front-end >JS Tutorial >How to use the style.display attribute in JavaScript

How to use the style.display attribute in JavaScript

不言Original: 2019-01-07 14:45:2716785browse

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.

How to use the style.display attribute in JavaScript

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

How to use the style.display attribute in JavaScript

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.

How to use the style.display attribute in JavaScript

#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.

How to use the style.display attribute in JavaScript

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.

How to use the style.display attribute in JavaScript

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

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：How to use json.stringify in JavaScriptNext article：How to use json.stringify in JavaScript

See more

How to use the style.display attribute in JavaScript

Related articles