The difference between CSS display: none and visibility: hidden is described here. Visibility: hidden is hidden, but the position is retained during browsing. CSS display: none is regarded as nonexistent and not loaded!
Do you know the difference between CSS display: none and visibility: hidden? Here we will share with you the HTML element (object) after the CSS display: None attribute is used) the width, height, and other attribute values are "lost". After the visibility: hidden attribute is used, the HTML element (object) is only invisible visually (completely transparent ), the space occupied by it still exists.
Difference between CSS display: none and visibility: hidden
Visibility: hidden, but its position is retained during browsing. CSS display: none is regarded as nonexistent and not loaded!
Overflow attribute value {visible | hidden | scroll | auto} is required only when the width and height of the DIV are limited ). The two are hidden HTML elements, which have no difference in visual effects, but they are still different in some Dom operations.
CSS display: none;
When this attribute is used, various attribute values, such as the width and height of the HTML element (object), will be "lost ";
Visibility: hidden;
After this attribute is used, the HTML element (object) is only visually invisible (completely transparent), and the space occupied by it still exists, that is to say, it still has attribute values such as height and width.
For details about the differences, see the demo.CodeRight:
-
- <! Doctypehtmlpublic "-// W3C // dtdxhtml1.0transitional // en"
-
- Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
- <HtmlxmlnsHtmlxmlns= "Http://www.w3.org/1999/xhtml"Lang= "Gb2312">
-
- <Head>
-
- <Head>
- <Title>Example: difference between CSS display: none and visible: hidden</Title>
-
- <Metahttp-equivMetahttp-equiv="Content-Type "content =" text/html;Charset=Gb2312"/>
- <Metahttp-equivMetahttp-equiv="Content-Type "content =" text/html;Charset=Gb2312"/>
-
- <MetanameMetaname= "Author"Content= "Fengyan, CnLei.y.l@gmail.com">
-
- <MetanameMetaname= "Copyright"Content= "Http://www.cnlei.com"/>
- </Head>
-
- <Body>
-
- <P><AhrefAhref= "Javascript: Alert ($ ('cnlei _ 1'). innerhtml + 'width: \ N'
-
- + Getxywh ($ ('cnlei _ 1'). W );">Click Here CSS display: none;</A></P>
- <P><AhrefAhref= "Javascript: Alert ($ ('cnlei _ 2'). innerhtml + 'width: \ N'
-
- + Getxywh ($ ('cnlei _ 2'). W );">Click Here visibility: hidden;</A></P>
- <DividDivid= "Cnlei_1"Style= "CSS display: none ;">Cnlei_1</Div>
-
- <DividDivid= "Cnlei_2"Style= "Visibility: hidden ;">Cnlei_2</Div>
-
-
- <ScripttypeScripttype="Text/JavaScript">
-
- Varw3c= (Document. getelementbyid )? True: false;
-
- Varagt=Navigator. Useragent. tolowercase ();
-
- Varie= (AGT. indexof ("MSIE ")! =-1)
-
- & (AGT. indexof ("Opera") =-1) & (AGT. indexof ("omniweb") =-1 ));
-
- Varie5= (W3C & IE )? True: false;
- Varns6= (W3C &&(Navigator. appname= "Netscape "))? True: false;
-
-
-
- Function $ (o ){
-
- Returndocument. getelementbyid (o )? Document. getelementbyid (o): O;
-
- }
-
-
-
- Functiongetxywh (o ){
-
- Varo= $ (O );
-
- Varnlt=0;
-
- Varntop=0;
- Varoffsetparent= O;
-
- While (offsetparent! = NULL & offsetparent! = Document. Body ){
-
- Nlt + = offsetparent. offsetleft;
-
- Ntop + = offsetparent. offsettop;
-
- If (! Ns6 ){
-
- Parseint (offsetparent. currentstyle. borderleftwidth)>0?
-
- Nlt + = parseint (offsetparent. currentstyle. borderleftwidth ):"";
-
- Parseint (offsetparent. currentstyle. bordertopwidth)>0?
-
- Ntop + = parseint (offsetparent. currentstyle. bordertopwidth ):"";
-
- }
- OffsetparentOffsetparent= Offsetparent. offsetparent;
-
- }
-
- Return {X: nlt, Y: ntop, W: O. offsetwidth, H: O. offsetheight };
-
- }
-
- </Script>
-
- </Body>
-
- </Html>