ویژگی visibility Style

تعریف و استفاده

visibility ویژگی‌ای است که تعیین می‌کند عنصر باید قابل مشاهده باشد یا خیر.

visibility ویژگی‌ای است که به نویسنده اجازه می‌دهد عنصر را نمایش دهد یا مخفی کند.

این ویژگی مشابه با ویژگی display، اما تفاوت دارد، اگر تنظیم display:none، که تمام عنصر را مخفی می‌کند و visibility:hidden به این معنی است که محتوای عنصر غیرقابل مشاهده خواهد بود، اما عنصر می‌تواند موقعیت و اندازه اولیه خود را حفظ کند.

لطفاً به:

آموزش CSS:CSS Display و visibility

دستورالعمل CSS:ویژگی visibility

مثال

مثال 1

مخفی کردن محتوای علامت <p>:

document.getElementById("myP").style.visibility = "hidden";

آزمایش کنید

مثال‌های بیشتری در پایین صفحه ارائه شده است.

اسلوب

بازگشت ویژگی visibility:

object.style.visibility

تنظیم ویژگی visibility:

object.style.visibility = "visible|hidden|collapse|initial|inherit"

مقدار ویژگی

مقدار توضیح
visible این عنصر قابل مشاهده است. پیش‌فرض.
hidden عنصر غیرقابل مشاهده است، اما همچنان بر چیدمان تأثیر می‌گذارد.
collapse وقتی در یک ردیف یا سلول جدول استفاده می‌شود، عنصر غیرقابل مشاهده است (مثل "hidden").
initial این ویژگی به مقدار پیش‌فرض خود تنظیم می‌شود. لطفاً به initial.
inherit این ویژگی از عنصر پدر خود ارث می‌برد. لطفاً به inherit.

جزئیات فنی

مقدار پیش‌فرض: visible
مقدار بازگشتی: رشته‌ای که نشان‌دهنده این است که محتوای عنصر نمایش داده می‌شود یا خیر.
نسخه CSS: CSS2

پشتیبانی مرورگر

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی

مثال‌های بیشتر

مثال 2

تفاوت بین ویژگی display و visibility:

function demoDisplay() {
  document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
  document.getElementById("myP2").style.visibility = "hidden";
}

آزمایش کنید

مثال 3

تغییر بین مخفی کردن و نمایش عناصر:

function myFunction() {
  var x = document.getElementById('myDIV');
  if (x.style.visibility === 'hidden') {
    x.style.visibility = 'visible';
  } else {
    x.style.visibility = 'hidden';
  }
}

آزمایش کنید

مثال 4

مخفی کردن و نمایش عناصر <img>:

function hideElem() {
  document.getElementById("myImg").style.visibility = "hidden"; 
}
function showElem() {
  document.getElementById("myImg").style.visibility = "visible"; 
}

آزمایش کنید

مثال 5

بازگشت <p> نوع بینایی عناصر:

alert(document.getElementById("myP").style.visibility);

آزمایش کنید