Style visibility attribute

Definition and Usage

visibility The attribute sets or returns whether the element should be visible.

visibility The attribute allows the author to display or hide elements.

This attribute is similar to display attribute. But the difference is that if you set display:none, it will hide the entire element, and visibility:hidden It means that the content of the element will be invisible, but the element will maintain its original position and size.

See also:

CSS Tutorial:CSS Display and visibility

CSS Reference Manual:visibility attribute

Example

Example 1

Hide the content of <p> element:

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

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

More examples are provided below the page.

Syntax

return visibility attribute:

object.style.visibility

set visibility attribute:

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

প্রক্রিয়ার মান

মান বর্ণনা
visible এই ইলেক্ট্রনিক্যাল সাইজমেট্রি দৃশ্যমান। ডিফল্ট。
hidden ইলেক্ট্রনিক্যাল সাইজমেট্রি দৃশ্যমান নয়, কিন্তু তা লেআউটটি প্রভাবিত করে。
collapse টেবিল রো এবং সেলের ওপর ব্যবহার করা সময়ে, ইলেক্ট্রনিক্যাল সাইজমেট্রি দৃশ্যমান নয় ("hidden"-র সমান)।
initial এই প্রক্রিয়াটিকে প্রক্রিয়ার ডিফল্ট মান নির্ধারণ করা হয়। দেখুন initial。
inherit এই প্রক্রিয়াটিকে পিতৃত্বভূত ইলেক্ট্রনিক্যাল সাইজমেট্রি থেকে উত্তরাধিকার নেওয়া হয়। দেখুন inherit。

টেকনিক্যাল ডেটাল

ডিফল্ট মান: visible
ফলাফল: স্ট্রিং, যা ইলেক্ট্রনিক্যাল সাইজমেট্রির দৃশ্যমানতা নির্দেশ করে。
CSS সংস্করণ: CSS2

ব্রাউজার সমর্থন

চ্রোম এডজ ফায়ারফক্স স্যাফারি অপেরা
চ্রোম এডজ ফায়ারফক্স স্যাফারি অপেরা
সমর্থন সমর্থন সমর্থন সমর্থন সমর্থন

আরও উদাহরণ

উদাহরণ 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);

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন