Periksa tampilan elemen CSS dengan JavaScript

97

Apakah mungkin untuk memeriksa apakah suatu elemen CSS display == blockatau nonemenggunakan JavaScript?

javascript css Seth
sumber

Jawaban:

115

Seperti yang dikatakan sdleihssirhc di bawah ini, jika elemen displaydiwariskan atau ditentukan oleh aturan CSS, Anda harus mendapatkan gaya yang dihitung :

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

Elemen memiliki styleproperti yang akan memberi tahu Anda apa yang Anda inginkan, jika gaya dideklarasikan sebaris atau dengan JavaScript:

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

akan memberi Anda nilai string.

Dan Davies Brackett
sumber
2
Bagaimana jika tidak memiliki inline css?
jscripter
5
Untuk kesederhanaan, mengapa tidak selalu mendapatkan gaya yang dihitung?
cade galt
12
apa currentStyle? tidak pernah mendengarnya, juga memeriksa document.body.currentStyledan tidak mendapat apa-apa (tidak terkejut)
vsync
1
@vsync (dan untuk referensi di masa mendatang) Menurut MDN , ini adalah properti milik Internet Explorer versi lama.
pengguna202729
2
Terima kasih atas komentarnya. Jawaban diperbarui untuk web modern.
Dan Davies Brackett
78

Jika gaya dideklarasikan sebaris atau dengan JavaScript, Anda bisa langsung melihat styleobjeknya:

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

Jika tidak, Anda harus mendapatkan gaya yang dihitung, dan ada inkonsistensi browser. IE menggunakan currentStyleobjek sederhana , tetapi semua orang menggunakan metode:

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

The nulldiperlukan di Firefox versi 3 dan di bawah.

sdleihssirhc.dll
sumber
seharusnya ini tidak menjadi == dalam kasus ini?
Kai Qing
@Kai Tiga orang setara tidak melakukan pemaksaan tipe. Crockford menjelaskan alasannya , di bagian yang disebut " ===dan !==Operator".
sdleihssirhc
Itu sangat menarik. Lucu bagaimana hal seperti ini bisa luput dari perhatian setelah bertahun-tahun pemrograman. Saya selalu mengadopsi saran bahwa === adalah boolean yang ketat. Senang mendengarnya.
Kai Qing
3
@Kai: Tidak ada masalah dengan menggunakan ===daripada di ==sini, tapi juga tidak ada keuntungannya. Kedua operan dijamin sebagai string, jadi kedua operator melakukan langkah yang persis sama.
Tim Down
1
@hippietrail Dan hampir 10 tahun kemudian (2019-10-27) masih ada masalah. Periksa apa yang dilaporkan MDN
Felipe Alameda A
37

Untuk jQuery, maksud Anda seperti ini?

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

Anda dapat memeriksanya seperti ini:

if($('#object').css('display') === 'block')
{
    //do something
}
else
{
    //something else
}
Kai Qing
sumber
9
Hindari jawaban yang terlalu rumit. Saya tahu bahwa jQuery menjadi semacam standar, tetapi tidak ada alasan untuk menambahkan seluruh kerangka kerja hanya untuk memeriksa gaya tampilan elemen.
zzzzBov
14
Ya, tapi saya melakukan ini karena semua orang memberikan jawaban javascript mentah, jadi jika dia menggunakan jquery tetapi tidak menentukannya maka akan ada gunanya dalam posting
Kai Qing
18

Jawaban ini tidak persis seperti yang Anda inginkan, tetapi mungkin berguna dalam beberapa kasus. Jika Anda mengetahui bahwa elemen memiliki beberapa dimensi saat ditampilkan, Anda juga dapat menggunakan ini:

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

EDIT: Mengapa ini mungkin lebih baik daripada pemeriksaan langsung displayproperti CSS ? Karena Anda tidak perlu mencentang semua elemen induk. Jika beberapa elemen induk memiliki display: none, turunannya juga disembunyikan tetapi masih memiliki element.style.display !== 'none'.

Martin Jiřička
sumber
Memang ini bermanfaat.
Jonatas Walker
7

Iya.

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

JavaScript Dasar:

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

Untuk mengetahui apakah itu terlihat dengan JavaScript biasa, periksa apakah properti tampilan adalah 'tidak ada' (jangan centang 'blok', bisa juga kosong atau 'sebaris' dan masih terlihat):

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

Jika Anda menggunakan jQuery, Anda dapat menggunakan ini sebagai gantinya:

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

Dengan javascript murni Anda dapat memeriksa style.displayproperti. Dengan jQuery Anda bisa menggunakan$('#id').css('display')

Joyce Babu
sumber
-1

Anda dapat memeriksanya dengan misalnya jQuery:

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

Ini akan mengembalikan string dengan informasi tentang properti tampilan elemen ini.

Marek Tuchalski
sumber