ตรวจสอบองค์ประกอบ CSS ที่แสดงด้วย JavaScript

เป็นไปได้ไหมที่จะตรวจสอบว่า CSS ขององค์ประกอบdisplay == blockหรือnoneใช้ JavaScript

ดังที่ sdleihssirhc กล่าวไว้ด้านล่างหากองค์ประกอบdisplayกำลังได้รับการสืบทอดหรือถูกระบุโดยกฎ CSS คุณจะต้องได้รับรูปแบบการคำนวณ :

return window.getComputedStyle(element, null).display;

องค์ประกอบมีstyleคุณสมบัติที่จะบอกคุณว่าคุณต้องการอะไรหากมีการประกาศสไตล์แบบอินไลน์หรือด้วย JavaScript:

console.log(document.getElementById('someIDThatExists').style.display);

จะให้ค่าสตริงแก่คุณ

หากมีการประกาศสไตล์แบบอินไลน์หรือด้วย JavaScript คุณสามารถเข้าไปที่styleวัตถุ:

return element.style.display === 'block';

มิฉะนั้นคุณจะต้องได้รับรูปแบบที่คำนวณและเบราว์เซอร์ไม่สอดคล้องกัน IE ใช้currentStyleออบเจ็กต์ธรรมดาแต่ทุกคนใช้วิธีการ:

return element.currentStyle ? element.currentStyle.display :
                              getComputedStyle(element, null).display;

nullที่ถูกต้องในรุ่น Firefox 3 และด้านล่าง

สำหรับ jQuery คุณหมายถึงแบบนี้หรือเปล่า?

$('#object').css('display');

คุณสามารถตรวจสอบได้ดังนี้:

if($('#object').css('display') === 'block')
{
    //do something
}
else
{
    //something else
}

คำตอบนี้ไม่ตรงกับที่คุณต้องการ แต่อาจมีประโยชน์ในบางกรณี หากคุณทราบว่าองค์ประกอบมีมิติข้อมูลบางส่วนเมื่อแสดงคุณยังสามารถใช้สิ่งนี้

var hasDisplayNone = (element.offsetHeight === 0 && element.offsetWidth === 0);

แก้ไข: เหตุใดจึงอาจดีกว่าการตรวจสอบdisplayคุณสมบัติCSS โดยตรง เนื่องจากคุณไม่จำเป็นต้องตรวจสอบองค์ประกอบหลักทั้งหมด หากบางส่วนองค์ประกอบหลักมีdisplay: noneเด็กมันจะถูกซ่อนไว้มากเกินไป element.style.display !== 'none'แต่ก็ยังมี

ใช่.

var displayValue = document.getElementById('yourid').style.display;

JavaScript พื้นฐาน:

if (document.getElementById("elementId").style.display == 'block') { 
  alert('this Element is block'); 
}

หากต้องการทราบว่าสามารถมองเห็นได้ด้วย JavaScript ธรรมดาหรือไม่ให้ตรวจสอบว่าคุณสมบัติการแสดงผลเป็น 'ไม่มี' หรือไม่ (อย่าตรวจสอบคำว่า 'block' อาจว่างเปล่าหรือ 'inline' และยังมองเห็นได้):

var isVisible = (elt.style.display != "none");

หากคุณใช้ jQuery คุณสามารถใช้สิ่งนี้แทนได้:

var isVisible = $elt.is(":visible");

ด้วยจาวาสคริปต์ที่บริสุทธิ์คุณสามารถตรวจสอบstyle.displayคุณสมบัติ ด้วย jQuery คุณสามารถใช้$('#id').css('display')

คุณสามารถตรวจสอบได้ด้วยตัวอย่างเช่น jQuery:

$("#elementID").css('display');

มันจะส่งคืนสตริงพร้อมข้อมูลเกี่ยวกับคุณสมบัติการแสดงผลขององค์ประกอบนี้