JavaScript ile eleman CSS görüntüsünü kontrol edin

97

Bir elemanın CSS'sini display == blockveya noneJavaScript'i kullanıp kullanmadığını kontrol etmek mümkün müdür ?

javascript css

— Seth
kaynak

115

Sdleihssirhc'nin aşağıda söylediği gibi, eğer öğe displaymiras alınıyorsa veya bir CSS kuralı tarafından belirtiliyorsa, onun hesaplanmış stilini almanız gerekir :

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

Öğeler style, stil satır içi olarak veya JavaScript ile bildirilmişse, size ne istediğinizi söyleyecek bir özelliğe sahiptir:

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

size bir dize değeri verecektir.

— Dan Davies Brackett
kaynak

2

Ya satır içi css yoksa?

— jscripter

5

Basit olması için, neden her zaman hesaplanan stili elde etmiyorsunuz?

— cade galt

12

nedir currentStyle? hiç duymadım, ayrıca kontrol etmedim document.body.currentStyleve hiçbir şey

— alamadım

1

@vsync (ve ileride başvurmak üzere) MDN'ye göre , bu, Internet Explorer'ın eski sürümünün tescilli bir özelliğidir.

— user202729

2

Yorumlarınız için teşekkürler. Modern web için yanıt güncellendi.

— Dan Davies Brackett

78

Stil satır içi olarak veya JavaScript ile bildirilmişse, sadece stylenesneye ulaşabilirsiniz :

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

Aksi takdirde, hesaplanan stili almanız gerekir ve tarayıcı tutarsızlıkları vardır. IE basit bir currentStylenesne kullanır , ancak diğer herkes bir yöntem kullanır:

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

nullFirefox sürüm 3 ve aşağıdaki gerekti.

— sdleihssirhc
kaynak

bu == bu durumda olmamalı mı?

— Kai Qing

@Kai Üçlü eşit, tür zorlaması yapmaz. Crockford, " ===ve !==Operatörler " adlı bölümde nedenini açıklıyor .

— sdleihssirhc

Bu oldukça ilginç. Yıllarca süren programlamadan sonra böyle bir şeyin gözden kaçması ne tuhaf. Ben her zaman ==='nin katı mantıksal olduğu önerisini benimsemiştim. Bunu bildiğim iyi oldu.

— Kai Qing

3

@Kai: kullanarak hiçbir sorun yok, ===yerine ==burada, ama aynı derecede hiçbir avantaj ya yoktur. Her iki işlenenin de dize olması garanti edilir, bu nedenle her iki operatör de tam olarak aynı adımları gerçekleştirir.

— Tim Down

1

@hippietrail Ve neredeyse 10 yıl sonra (2019-10-27) hala sorunlar var. MDN raporlarını

— Felipe Alameda

37

JQuery için böyle mi demek istiyorsun?

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

Bunu şu şekilde kontrol edebilirsiniz:

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

— Kai Qing
kaynak

9

Cevabı aşırı karmaşıklaştırmaktan kaçının. JQuery'nin bir şekilde bir standart haline geldiğini biliyorum, ancak yalnızca bir öğenin görüntü stilini kontrol etmek için bütün bir çerçeve eklemenin bir nedeni yok.

— zzzzBov

14

Evet ama bunu yaptım çünkü diğer herkes ham javascript cevabını verdi, bu yüzden jquery kullanıyordu ancak belirtmediyse, o zaman yazıda bir miktar kullanım olurdu

— Kai Qing

18

Bu cevap tam olarak istediğiniz şey değil, ancak bazı durumlarda faydalı olabilir. Öğenin görüntülendiğinde bazı boyutları olduğunu biliyorsanız, bunu da kullanabilirsiniz:

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

DÜZENLEME: Bu neden CSS displayözelliğinin doğrudan kontrolünden daha iyi olabilir ? Çünkü tüm ana öğeleri kontrol etmenize gerek yoktur. Bazı üst öğe varsa display: none, alt öğeleri de gizlenir, ancak yine de gizlidir element.style.display !== 'none'.

— Martin Jiřička
kaynak

Gerçekten, bu yararlıdır.

— Jonatas Walker

7

Evet.

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

— Victor
kaynak

5

Temel JavaScript:

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

— Chugworth
kaynak

2

Düz JavaScript ile görünür olup olmadığını öğrenmek için, display özelliğinin "yok" olup olmadığını kontrol edin ("blok" seçeneğini işaretlemeyin, boş veya "satır içi" de olabilir ve hala görünür olabilir):

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

JQuery kullanıyorsanız, bunun yerine bunu kullanabilirsiniz:

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

— MarkXA
kaynak

0

Saf javascript ile style.displayözelliği kontrol edebilirsiniz . JQuery ile kullanabilirsiniz$('#id').css('display')

— Joyce Babu
kaynak

-1

Örneğin jQuery ile kontrol edebilirsiniz:

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

Bu elemanın display özelliği hakkında bilgi içeren dizge döndürecektir.

— Marek Tuchalski
kaynak