क्या आप जावास्क्रिप्ट के साथ ऑब्जेक्ट का सीएसएस डिस्प्ले देख सकते हैं?

Question

क्या यह जांचना संभव है कि किसी ऑब्जेक्ट का सीएसएस display == block या none जावास्क्रिप्ट का उपयोग कर रहा है?

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

आप एक स्ट्रिंग मान दे देंगे:

Answer 1

तत्वों एक style संपत्ति है जो आपको बताएगा कि आप क्या चाहते हैं, अगर शैली इनलाइन या जावास्क्रिप्ट के साथ घोषित किया गया था की है।

sdleihssirhc के रूप में नीचे कहते हैं, अगर तत्व के display विरासत में मिला जा रहा है या एक CSS नियम द्वारा निर्दिष्ट किया जा रहा है, तो आप इसका परिकलित शैली पाने के लिए की आवश्यकता होगी:

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

Answer 2

हाँ।

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

Answer 3

jQuery के लिए, क्या आपको इसका मतलब है?

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

आप इस तरह यह जांच कर सकते हैं:

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

Answer 4

तो शैली इनलाइन या जावास्क्रिप्ट के साथ घोषित किया गया था, तो आप सिर्फ style वस्तु को प्राप्त कर सकते हैं: अन्यथा

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

, आप 'गणना की शैली प्राप्त करनी होगी, और ब्राउज़र असंगतताएं हैं। आईई एक सरल currentStyle ऑब्जेक्ट का उपयोग करता है, लेकिन हर किसी के लिए एक विधि का उपयोग करता है:

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

null फ़ायरफ़ॉक्स में आवश्यक है।

Answer 5

आप उदाहरण jQuery के लिए के साथ इसे देख सकते हैं:

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

यह इस तत्व की प्रदर्शन संपत्ति के बारे में जानकारी के साथ स्ट्रिंग वापस आ जाएगी।

Answer 6

शुद्ध जावास्क्रिप्ट के साथ आप style.display संपत्ति देख सकते हैं। jQuery के साथ आप $('#id').css('display')

Answer 7

उपयोग कर सकते हैं पता लगाने के लिए अगर यह सादा जावास्क्रिप्ट के साथ दिखाई दे रहा है, यह देखना होगा कि प्रदर्शन संपत्ति 'कोई नहीं' ('ब्लॉक' के लिए की जांच नहीं करते, यह भी रिक्त या 'इनलाइन' हो सकता है और अभी भी है दिखाई देना):

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

आप jQuery का उपयोग कर रहे हैं, तो आप उपयोग कर सकते हैं इस के बजाय:

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

Answer 8

बेसिक जावास्क्रिप्ट:

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

Answer 9

यह उत्तर बिल्कुल वही नहीं है जो आप चाहते हैं, लेकिन यह कुछ मामलों में उपयोगी हो सकता है।

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

संपादित करें:: क्यों इस सीएसएस display संपत्ति के प्रत्यक्ष जांच की तुलना में बेहतर हो सकता है जैसा कि आप जानते तत्व कुछ आयाम है जब प्रदर्शित, आप भी इस का उपयोग कर सकते हैं? क्योंकि आपको सभी मूल तत्वों की जांच करने की आवश्यकता नहीं है।अगर कुछ मूल तत्वों में display: none है, तो इसके बच्चे भी छिपे हुए हैं लेकिन अभी भी element.style.display !== 'none' है।