تفاوت بین: display:none و visibility:hidden

شروع موضوع توسط echessdesign ‏4 دسامبر 2006 در انجمن زبان HTML

  1. echessdesign

    echessdesign مدیر انجمن طراحی وب

    ارسال‌ها:
    4,375
    تشکر شده:
    3,833
    امتیاز دستاورد:
    113
    درود
    میدونم که این آموزش بسیار ابتدایی هست، اما جهت تنوع و استفاده برای مبتدیانی همچون من بد نیست

    Display: none : در صورتی که مقدار ابن خصییه dsplay برابر با none شود، علاوه بر مخفی کردن المانی که این خصیصه بدان نسبت داده شد، آن را از جریان المان های صفحه خارج می کند.

    --


    Visibility: hidden : اگر می خواهید المان های مخفی شده ، از جریان المان های موجود در صفحه خارج نشوند، از visibility: hidden استفاده کنید. به بیان دیگر، فضای اشغالی توسط این المان ها کماکان حفظ شده و فقط از نمایش آنها جلوگیری میشود.


    مثال:
    HTML:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled 1</title>
    <style type="text/css">
    img {
        width:200px;
        height:200px;
    }
    #echess {
        width:50px;
        height:50px;
        background:red;
    }
    </style>
    </head>

    <body>
    <div id="echess">
    <img  src="echess design" alt="echessdesign" style="display:none;" />
    </div>
    <br />
    <div id="echess">
    <img  src="echess design" alt="echessdesign" style=" visibility:hidden;" />
    </div>


    </body>

    </html>
     
    منبع: خودم echessdesign.com
     
    نوشته شده توسط echessdesign در ‏4 دسامبر 2006
    vahid2088، Mds، NabiKAZ و 2 نفر دیگر از این ارسال تشکر کرده اند.

به اشتراک بگذارید