Shulou(Shulou.com)06/02 Report--

How to understand the difference between display and visibility attributes in DIV? in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

To describe the difference between display and visibility in DIV, the visibility attribute hides the element but maintains the floating position of the element, while display actually sets the floating feature of the element, although they can both achieve the purpose of hiding the page element, but their difference lies in how to respond to the normal document flow.

Property differences between display and visibility in DIV

Visibility attribute:

Determine whether the element is shown or hidden

Visibility= "visible | hidden", visible shows, hidden hides.

When visibility is set to "hidden", the element is hidden, but it still occupies its original location.

For example:

FunctiontoggleVisibility (me) {if (me.style.visibility== "hidden") {me.style.visibility= "visible";} else {me.style.visibility= "hidden";}} * the line text will trigger the "hidden" and "visible" attributes, notice the change in the second line. Because visibility retains the position of the element, the second line does not move.

See the first line: due to the influence of "hidden" and "visible". Because visibility retains the position of the element, the second line does not move.

Notice that when the element is hidden, no other events can be received, so when the * * line of code becomes "hidden", you can no longer receive the response to the event, so you can't click on the text of the * * paragraph to display it.

Display attribute:

It's a little different. The visibility attribute hides the element but maintains the floating position of the element, while display actually sets the floating feature of the element.

Block:

When display is set to block, all elements in the container will be treated as a separate block, just like elements, which will be placed on the page at that point. You can actually set up the display:block to make it work like that.

Inline:

Setting display to inline will make it behave like the element inline-even if it is a normal block element such as, it will be combined to look like that output stream.

None:

* display is set: none, when the element is actually removed from the page, and the element below it is automatically filled in.

For example:

Let's look at the code and effect of my example:

Example:

FunctiontoggleDisplay (me) {if (me.style.display== "block") {me.style.display= "inline"; alert ("text is now: 'inline'.");} else {if (me.style.display== "inline") {me.style.display= "none"; alert ("text is now:' none'.3 automatically reappears in seconds.") ; window.setTimeout ("blueText.style.display='block';", 3000, "javascript");} else {me.style.display= "block"; alert ("text is now: 'block'.");} Click on the blue text to see the effect. This is the answer to the question on how to understand the difference between display and visibility attributes in DIV. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.