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

Editor to share with you what are the differences between display and visibility, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Attribute contest: an introduction to visibility and display

This is involved in making a form, setting several elements (controls visible or invisible) when the appropriate option is selected, and later using visibility. Let's first take a look at the introduction of several attributes corresponding to visibility:

Visibility:visible

/ * element visible, default * /

Visibility:hidden

/ * the element is not visible, but the corresponding space is still reserved for it * /

Visibility:collapse

/ * works only on table objects and removes rows or columns without affecting the layout of the table. If this value is used

It appears as hidden on objects other than table. , /

Visibility:inherit

/ * inherits the visibility value of the parent element. , /

Let's take a look at the introduction of several attributes corresponding to display:

Display:none

/ * element is not visible and the corresponding position is not reserved for it * /

Display:block

/ * represented as a block-level element (usually on a single line) * /

Display:inline

/ * is represented as a row-level element (usually does not occupy a single line) * /

Invisible differences between visibility and display

I guess when you see here, you probably know the difference between the two. Ha ha. Although both the Visibility and Display attributes can hide an element, the difference between them is that while visibility:hidden hides an element, it still reserves the space needed for it on the page, while display:none behaves as if it had been removed from the page, and there is no sign that the element still exists.

How to use it?

I know the difference, but how to use it. Form elements (controls) are not visible in page development. Do you use visibility or display?

Here is a general method. If you want to hide an element but leave space for that element on the page, you should use visibility: hidden. You should use display: none if you want to hide one element and fill in the blanks with other content.

Experience is the best teacher

Ok,*** presented this simple js function I wrote this afternoon as a summary of practice. The function of this small function is that when the user selects the drop-down list box, it gets the value of the drop-down list box and determines whether some elements (controls) are visible or invisible according to the value of the drop-down box. It's very simple.

Function ChangeReason () {if (ccbChangeReason.value = = "A Construction Bank") {checkbox1.style.visibility = "visible"; checkbox2.style.visibility = "visible"; checkbox3.style.visibility = "visible"; lblElseReason.style.visibility = "hidden"; txtcElseReason.style.visibility = "hidden";} if (ccbChangeReason.value = "B Industrial and Commercial Bank") {checkbox1.style.visibility = "hidden"; checkbox2.style.visibility = "hidden"; checkbox3.style.visibility = "hidden" LblElseReason.style.visibility = "hidden"; txtcElseReason.style.visibility = "hidden";} if (ccbChangeReason.value = = "C Agricultural Bank") {checkbox1.style.visibility = "hidden"; checkbox2.style.visibility = "hidden"; checkbox3.style.visibility = "hidden"; lblElseReason.style.visibility = "visible"; txtcElseReason.style.visibility = "visible";} above is all the content of the article "what's the difference between display and visibility". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.