استایل ڈسپلے پرمتعلق属性

تعریف و استعمال

display

HTML میں عناصر زیادہ تر

display ਇਹ ਅਤੀਤ ਵੀ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਜਾਂ ਛੁਪਾਉਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੇ ਹਨ। ਉਹ visibility ਅਤੀਤ ਨਾਲ ਸਮਾਨ ਹੈ, ਪਰ ਜੇਕਰ ਇਸ ਨੂੰ ਸੈਟ ਕੀਤਾ ਜਾਵੇ display:noneਇਹ ਪੂਰੇ ਐਲੀਮੈਂਟ ਨੂੰ ਛੁਪਾ ਦੇਵੇਗਾ, ਅਤੇ visibility:hidden ਇਹ ਮਤਲਬ ਹੈ ਕਿ ਐਲੀਮੈਂਟ ਦਾ ਸਮਾਂਤਰ ਅਤੇ ਸਮਾਨਤਾ ਦਿਖਾਈ ਦੇਵੇਗਾ, ਪਰ ਉਹ ਪਹਿਲਾਂ ਦੇ ਸਥਾਨ ਅਤੇ ਅਕਾਰ ਵਿੱਚ ਬਣੇ ਰਹੇਗਾ。

ਸੁਝਾਅ:ਜੇਕਰ ਐਲੀਮੈਂਟ ਬਲਕ ਐਲੀਮੈਂਟ ਹੈ ਤਾਂ, ਉਸ ਦੇ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ float ਅਤੀਤ ਰਾਹੀਂ ਵੀ ਬਦਲ ਸਕਦੇ ਹਨ。

ਇਸ ਦੇ ਨਾਲ ਵੀ ਦੇਖੋ:

CSS ਸਿੱਖਿਆ:CSS Display ਅਤੇ visibility

CSS ਸੰਦਰਭ ਦਸਤਾਵੇਜ਼:display ਅਤੀਤ

ਇੰਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਪ੍ਰਦਰਸ਼ਨ ਵਿਚਕਾਰ ਬਣਾਓ <div> ਐਲੀਮੈਂਟ ਨੂੰ:

document.getElementById("myDIV").style.display = "none";

亲自试一试

ਉਦਾਹਰਣ 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.display === 'none') {
    x.style.display = 'block';
  } else {
    x.style.display = 'none';
  }
}

亲自试一试

ਉਦਾਹਰਣ 4

"inline"、"block" ਅਤੇ "none" ਦਾ ਅੰਤਰ:
function myFunction(x)  {
  var whichSelected = x.selectedIndex;
  var sel = x.options[whichSelected].text;
  var elem = document.getElementById("mySpan");
  elem.style.display = sel;
}

亲自试一试

ਉਦਾਹਰਣ 5

返回

元素的显示类型：

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

亲自试一试

ਸ਼ਾਬਦਿਕ

ਪ੍ਰਦਰਸ਼ਨ ਗੁਣ ਵਾਪਸੀ ਕਰੋ:

object.style.display

ਪ੍ਰਦਰਸ਼ਨ ਗੁਣ ਸੈਟ ਕਰੋ:

object.style.display = value

ਗੁਣ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
block ਇਲਾਕਾ ਇੱਕ ਬਲਾਕ ਇਲਾਕੇ ਵਜੋਂ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦਾ ਹੈ。
compact ਇਲਾਕਾ ਇੱਕ ਬਲਾਕ ਜਾਂ inline ਇਲਾਕੇ ਵਜੋਂ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦਾ ਹੈ।ਇਹ ਪਿਛਲੇਕਾਰ ਉੱਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ。
flex ਇਲਾਕਾ ਇੱਕ ਬਲਾਕ ਫਲੈਕਸ ਵਜੋਂ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦਾ ਹੈ।CSS3 ਵਿੱਚ ਨਵੀਂ ਵਿਸ਼ੇਸ਼ਤਾ。
inline ਇਲਾਕਾ ਇੱਕ inline ਇਲਾਕੇ ਵਜੋਂ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦਾ ਹੈ।ਮੂਲ ਮੁੱਲ。
inline-block ਇਲਾਕਾ ਇੱਕ inline ਬਲਾਕ ਬਕਸ ਵਜੋਂ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦਾ ਹੈ。
inline-flex ਇਲਾਕਾ ਇੱਕ inline ਲੈਗ੍ਰਿਡ ਫਲੈਕਸ ਵਜੋਂ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦਾ ਹੈ।CSS3 ਵਿੱਚ ਨਵੀਂ ਵਿਸ਼ੇਸ਼ਤਾ。
inline-table ਇਲਾਕਾ ਇੱਕ inline ਟੇਬਲ ਵਜੋਂ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦਾ ਹੈ (ਜਿਵੇਂ <table> )،ਟੇਬਲ ਦੇ ਸਾਰੇ ਆਗੂ ਅਤੇ ਪਿੱਛੇ ਲਾਈਨ ਨਹੀਂ ਬਦਲ ਦਿੰਦੇ ਹਨ。
list-item ਇਲਾਕਾ ਇੱਕ ਲਿਸਟ ਵਜੋਂ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦਾ ਹੈ。
marker

ਇਹ ਮੁੱਲ ਮਾਰਕਰ (marker) ਪਹਿਲਾਂ ਜਾਂ ਬਾਅਦ ਦੇ ਸਮੱਗਰੀ ਨੂੰ ਮਾਰਕਰ ਬਣਾ ਦਿੰਦਾ ਹੈ

:before ਅਤੇ :after ਪਸ਼ੂ ਇਲਾਕੇ ਨਾਲ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ।ਹੋਰ ਤਰ੍ਹਾਂ ਇਹ ਮੁੱਲ 'inline' ਨਾਲ ਇੱਕ ਸਮਾਨ ਹੈ。
none ਇਲਾਕਾ ਨਹੀਂ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦਾ ਹੈ。
run-in ਇਲਾਕਾ ਇੱਕ ਬਲਾਕ ਜਾਂ inline ਇਲਾਕੇ ਵਜੋਂ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦਾ ਹੈ।ਇਹ ਪਿਛਲੇਕਾਰ ਉੱਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ。
table ਇਲਾਕਾ ਇੱਕ ਬਲਾਕ ਟੇਬਲ (block table) ਵਜੋਂ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦਾ ਹੈ (ਜਿਵੇਂ <table> )，ਟੇਬਲ ਦੇ ਸਾਰੇ ਆਗੂ ਅਤੇ ਪਿੱਛੇ ਲਾਈਨ ਬਦਲ ਦਿੰਦੇ ਹਨ。
table-caption ਇਲਾਕਾ ਇੱਕ ਟੇਬਲ ਸਿਰਲੇਖ ਵਜੋਂ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦਾ ਹੈ (ਜਿਵੇਂ <caption> )。
table-cell ਇਲਾਕਾ ਇੱਕ ਟੇਬਲ ਸੈੱਲ ਵਜੋਂ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦਾ ਹੈ (ਜਿਵੇਂ <td> ਅਤੇ <th> )。
table-column ਇਲਾਕਾ ਇੱਕ ਕੈਲਸਿਲ ਕਲਮ ਵਜੋਂ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦਾ ਹੈ (ਜਿਵੇਂ <col> )。
table-column-group ਇਲਾਕਾ ਇੱਕ ਕਲਮ ਜਾਂ ਕਈ ਕਲਮਾਂ ਦੇ ਸਮੂਹ ਵਜੋਂ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦਾ ਹੈ (ਜਿਵੇਂ <colgroup> )。
table-footer-group ਇਲਾਕਾ ਇੱਕ ਟੇਬਲ ਪੈਦਾ ਲਾਈਨ ਵਜੋਂ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦਾ ਹੈ (ਜਿਵੇਂ <tfoot> )。
table-header-group ਇਲਾਕਾ ਇੱਕ ਟੇਬਲ ਸਿਰਲੇਖ ਲਾਈਨ ਵਜੋਂ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦਾ ਹੈ (ਜਿਵੇਂ <thead> )。
table-row ਇਲਾਕਾ ਇੱਕ ਟੇਬਲ ਲਾਈਨ ਵਜੋਂ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦਾ ਹੈ (ਜਿਵੇਂ <tr> )。
table-row-group ਇਲਾਕਾ ਇੱਕ ਲਾਈਨ ਜਾਂ ਕਈ ਲਾਈਨਾਂ ਦੇ ਸਮੂਹ ਵਜੋਂ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦਾ ਹੈ (ਜਿਵੇਂ <tbody> )。
initial ਇਸ ਗੁਣ ਨੂੰ ਇਸ ਦੇ ਮੂਲ ਮੁੱਲ 'ਤੇ ਸੈਟ ਕਰੋ।ਦੇਖੋ initial。
inherit ਆਪਣੇ ਮਾਤਾ ਇਲਾਕੇ ਤੋਂ ਇਸ ਗੁਣ ਨੂੰ ਇਨਹੈਰਿਟ ਕਰੋ।ਦੇਖੋ inherit。

ਤਕਨੀਕੀ ਵੇਰਵਾ

ਮੂਲ ਮੁੱਲ: inline
ਵਾਪਸੀ ਮੁੱਲ: ਸਟ੍ਰਿੰਗ, ਜੋ ਕਿ ਇਲਾਕੇ ਦੇ ਪ੍ਰਦਰਸ਼ਨ ਕਿਸਮ ਨੂੰ ਪ੍ਰਤੀਨਿਧਿਤ ਕਰਦੀ ਹੈ。
CSS ਸੰਸਕਰਣਃ CSS1

ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ

ਚਰਾਮੇ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪਰਾ
ਚਰਾਮੇ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪਰਾ
ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ