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 src="/static/imghw/default1.png" data-src="img/girl.jpg" class="lazy" id="style1" 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 src="/static/imghw/default1.png" data-src="img/flowers.jpg" class="lazy" id="drag1" 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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Replace String Characters in JavaScript
Mar 11, 2025 am 12:07 AM
Detailed explanation of JavaScript string replacement method and FAQ This article will explore two ways to replace string characters in JavaScript: internal JavaScript code and internal HTML for web pages. Replace string inside JavaScript code The most direct way is to use the replace() method: str = str.replace("find","replace"); This method replaces only the first match. To replace all matches, use a regular expression and add the global flag g: str = str.replace(/fi
Custom Google Search API Setup Tutorial
Mar 04, 2025 am 01:06 AM
This tutorial shows you how to integrate a custom Google Search API into your blog or website, offering a more refined search experience than standard WordPress theme search functions. It's surprisingly easy! You'll be able to restrict searches to y
8 Stunning jQuery Page Layout Plugins
Mar 06, 2025 am 12:48 AM
Leverage jQuery for Effortless Web Page Layouts: 8 Essential Plugins jQuery simplifies web page layout significantly. This article highlights eight powerful jQuery plugins that streamline the process, particularly useful for manual website creation
Build Your Own AJAX Web Applications
Mar 09, 2025 am 12:11 AM
So here you are, ready to learn all about this thing called AJAX. But, what exactly is it? The term AJAX refers to a loose grouping of technologies that are used to create dynamic, interactive web content. The term AJAX, originally coined by Jesse J
What is 'this' in JavaScript?
Mar 04, 2025 am 01:15 AM
Core points This in JavaScript usually refers to an object that "owns" the method, but it depends on how the function is called. When there is no current object, this refers to the global object. In a web browser, it is represented by window. When calling a function, this maintains the global object; but when calling an object constructor or any of its methods, this refers to an instance of the object. You can change the context of this using methods such as call(), apply(), and bind(). These methods call the function using the given this value and parameters. JavaScript is an excellent programming language. A few years ago, this sentence was
10 Mobile Cheat Sheets for Mobile Development
Mar 05, 2025 am 12:43 AM
This post compiles helpful cheat sheets, reference guides, quick recipes, and code snippets for Android, Blackberry, and iPhone app development. No developer should be without them! Touch Gesture Reference Guide (PDF) A valuable resource for desig
Improve Your jQuery Knowledge with the Source Viewer
Mar 05, 2025 am 12:54 AM
jQuery is a great JavaScript framework. However, as with any library, sometimes it’s necessary to get under the hood to discover what’s going on. Perhaps it’s because you’re tracing a bug or are just curious about how jQuery achieves a particular UI
How do I create and publish my own JavaScript libraries?
Mar 18, 2025 pm 03:12 PM
Article discusses creating, publishing, and maintaining JavaScript libraries, focusing on planning, development, testing, documentation, and promotion strategies.
