display
Misol
<div> elementini ko‘rsatilmaydigan qilib o‘rnating:
document.getElementById("myDIV").style.display = "none";O‘zingiz sinab ko‘ring »
Tavsif
display xususiyati elementning ko‘rsatilish turini o‘rnatadi yoki qaytaradi.
HTML’dagi elementlar asosan "inline" yoki "block" elementlardir: inline elementning chap va o‘ng tomonida suzuvchi kontent bo‘ladi. Block element butun qatorni egallaydi va uning chap yoki o‘ng tomonida hech narsa ko‘rsatilmaydi.
display xususiyati muallifga elementni ko‘rsatish yoki yashirish imkonini ham beradi. U visibility xususiyatiga o‘xshaydi. Biroq display:none o‘rnatsangiz, u butun elementni yashiradi, visibility:hidden esa element kontenti ko‘rinmas bo‘lishini, lekin elementning o‘zi asl joyi va o‘lchamida qolishini bildiradi.
Maslahat: Agar element block element bo‘lsa, uning ko‘rsatilish turini float xususiyati yordamida ham o‘zgartirish mumkin.
Brauzerlarda qo‘llab-quvvatlash
| Xususiyat | |||||
|---|---|---|---|---|---|
| display | Ha | Ha | Ha | Ha | Ha |
Sintaksis
display xususiyatini qaytarish:
object.style.display
display xususiyatini o‘rnatish:
object.style.display = value
Xususiyat qiymatlari
| Qiymat | Tavsif |
|---|---|
| block | Element blok darajasidagi element sifatida render qilinadi |
| compact | Element blok darajasidagi yoki inline element sifatida render qilinadi. Kontekstga bog‘liq |
| flex | Element blok darajasidagi flex quti sifatida render qilinadi. CSS3 da yangi |
| grid | Element blok darajasidagi grid sifatida render qilinadi. CSS3 da yangi |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing |
| inline | Element inline element sifatida render qilinadi. Bu standart qiymat |
| inline-block | Element inline quti ichidagi blok quti sifatida render qilinadi |
| inline-flex | Element inline darajasidagi flex quti sifatida render qilinadi. CSS3 da yangi |
| inline-grid | Element inline darajasidagi grid sifatida render qilinadi. CSS3 da yangi |
| inline-table | Element inline jadval (<table> kabi) sifatida render qilinadi, jadvaldan oldin va keyin qator uzilishi bo‘lmaydi |
| list-item | Element ro‘yxat sifatida render qilinadi |
| marker | Bu qiymat qutidan oldingi yoki keyingi kontentni marker qilib o‘rnatadi (:before va :after psevdoelementlari bilan ishlatiladi. Aks holda bu qiymat "inline" bilan bir xil) |
| none | Element ko‘rsatilmaydi |
| run-in | Element blok darajasidagi yoki inline element sifatida render qilinadi. Kontekstga bog‘liq |
| table | Element blok jadval (<table> kabi) sifatida render qilinadi, jadvaldan oldin va keyin qator uzilishi bo‘ladi |
| table-caption | Element jadval sarlavhasi (<caption> kabi) sifatida render qilinadi |
| table-cell | Element jadval katagi (<td> va <th> kabi) sifatida render qilinadi |
| table-column | Element kataklar ustuni (<col> kabi) sifatida render qilinadi |
| table-column-group | Element bir yoki bir nechta ustundan iborat guruh (<colgroup> kabi) sifatida render qilinadi |
| table-footer-group | Element jadvalning pastki qism (footer) qatori (<tfoot> kabi) sifatida render qilinadi |
| table-header-group | Element jadvalning sarlavha (header) qatori (<thead> kabi) sifatida render qilinadi |
| table-row | Element jadval qatori (<tr> kabi) sifatida render qilinadi |
| table-row-group | Element bir yoki bir nechta qatordan iborat guruh (<tbody> kabi) sifatida render qilinadi |
Texnik tafsilotlar
| Standart qiymat: | inline |
|---|---|
| Qaytariladigan qiymat: | Elementning ko‘rsatilish turini ifodalovchi String |
| CSS versiyasi | CSS1 |
Ko‘proq misollar
Misol
display xususiyati va visibility xususiyati o‘rtasidagi farq:
function demoDisplay() {
document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
document.getElementById("myP2").style.visibility = "hidden";
}
O‘zingiz sinab ko‘ring »
Misol
Elementni yashirish va ko‘rsatish o‘rtasida almashtiring:
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
O‘zingiz sinab ko‘ring »
Misol
"inline", "block" va "none" o‘rtasidagi farq:
function myFunction(x) {
var whichSelected = x.selectedIndex;
var sel = x.options[whichSelected].text;
var elem = document.getElementById("mySpan");
elem.style.display = sel;
}
O‘zingiz sinab ko‘ring »
Misol
<p> elementining ko‘rsatilish turini qaytaring:
alert(document.getElementById("myP").style.display);
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS display va visibility
CSS ma’lumotnomasi: display xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!