รายละเอียดสไตล์ display

การเขียนและการใช้งาน

display

HTML แบบองค์ประกอบส่วนใหญ่เป็น

display ตัวแปรยังอนุญาตให้ผู้เขียนแสดงหรือซ่อนตัวตัวเริ่ม มันคล้ายตัวแปร visibility แต่หากตั้งค่า display:noneจะซ่อนตัวเริ่มทั้งหมด visibility:hidden หมายความว่าเนื้อหาของตัวเริ่มจะไม่ทันให้เห็น แต่ตัวเริ่มจะยังคงใช้ตำแหน่งและขนาดเดิม

คำเตือน：หากตัวเริ่มเป็นตัวเริ่มบล็อค ยังสามารถเปลี่ยนแปลงชนิดแสดงผลโดยผ่านตัวแปร float ได้เช่นกัน。

ดูเพิ่มเติมที่:

ตัวเรียน CSSCSS Display และ visibility

คู่มือ CSSตัวแปร display

ตัวอย่าง

ตัวอย่าง 1

ตั้งค่าเพื่อที่จะไม่แสดง <div> ตัว

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

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

ตัวอย่าง 2

ความแตกต่างระหว่างตัวแปร display และ visibility:

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

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

ตัวอย่าง 3

เปลี่ยนแปลงระหว่างการซ่อนและแสดงตัวเริ่ม

function myFunction() {
  var x = document.getElementById('myDIV');
  if (x.style.display === 'none') {
    x.style.display = 'block';
  } else {
    x.style.display = 'none';
  }
}

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

ตัวอย่าง 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;
}

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

ตัวอย่าง 5

返回

元素的显示类型：

กลับค่าแสดงของ <p> องค์ประกอบ:

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

ทดลองด้วยตัวเอง

รูปแบบ

ตั้งค่าคุณสมบัติ display:กลับค่าคุณสมบัติ display:

.style.display

ตั้งค่าคุณสมบัติ display:object .style.display =

value

ค่าคุณสมบัติ ค่า
รายละเอียด block
องค์ประกอบที่ถูกแสดงเป็นองค์ประกอบบล็อค องค์ประกอบแสดงเป็นองค์ประกอบบล็อคหรือองค์ประกอบแถว ขึ้นอยู่กับบริบท
compact flex
inline องค์ประกอบแสดงเป็นองค์ประกอบแถว โดยเริ่มต้น
inline-block องค์ประกอบแสดงเป็นบล็อคภายในบล็อคหรือองค์ประกอบแถว
inline-flex องค์ประกอบแสดงเป็นอุปกรณ์รวมเรียงเลื่อนภายในองค์ประกอบแถว CSS3 ความคืบหน้าใหม่
inline-table องค์ประกอบแสดงเป็นตารางแถวในแถว (เช่น <table>) ไม่มีการขยายช่องว่างก่อนและหลังตาราง
list-item องค์ประกอบแสดงเป็นรายการ
marker

ค่านี้จะตั้งค่าเนื้อหาก่อนหน้าหรือหลังหลักฐานที่เป็นที่ทำเนียบ

ใช้ร่วมกับ ซีลซึ่งเป็น :before และ :after พลาสติก ค่านี้เท่ากับ "inline" หากไม่ใช้
none องค์ประกอบไม่มีการแสดง
run-in องค์ประกอบแสดงเป็นองค์ประกอบบล็อคหรือองค์ประกอบแถว ขึ้นอยู่กับบริบท
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

การสนับสนุนโปรแกรมนavigations

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
การสนับสนุน การสนับสนุน การสนับสนุน การสนับสนุน การสนับสนุน