जाँच करें कि क्या तत्व DOM में दिखाई दे रहा है

Question

क्या कोई ऐसा तरीका है जिससे मैं जांच सकता हूं कि कोई तत्व शुद्ध JS (कोई jQuery) में दिखाई दे रहा है या नहीं?

इसलिए, उदाहरण के लिए, इस पृष्ठ में: प्रदर्शन बाइक , यदि आप सौदों (शीर्ष मेनू पर) पर मंडराते हैं, तो सौदों की एक खिड़की दिखाई देती है, लेकिन शुरुआत में यह नहीं दिखाया गया था। यह HTML में है लेकिन यह दिखाई नहीं देता है।

तो, एक DOM एलीमेंट दिया गया है, मैं कैसे देख सकता हूं कि यह दिखाई दे रहा है या नहीं? मैंने कोशिश की:

window.getComputedStyle(my_element)['display']);

लेकिन यह काम नहीं करता है। मुझे आश्चर्य है कि मुझे कौन सी विशेषताओं की जांच करनी चाहिए। यह मेरे दिमाग में आता है:

display !== 'none'
visibility !== 'hidden'

कोई अन्य जो मुझे याद आ रहा है?

Comments

यह प्रदर्शन का उपयोग नहीं करता है, यह दृश्यता का उपयोग करता है इसलिए दृश्यता (छिपी या दृश्य) के लिए जांच करें। पूर्व:document.getElementById('snDealsPanel').style.visibility

— PSL

पीएसएल। यदि मैं इसे और अधिक सामान्य करना चाहता हूं, तो मुझे किन विशेषताओं की जांच करनी चाहिए: दृश्यता, प्रदर्शन ...?

— होममर स्मिथ

आप इसे अपने तरीके से सामान्य बना सकते हैं लेकिन मैं जो कह रहा हूं वह तत्व का निरीक्षण करने वाली दृश्यता का उपयोग करता है।

— पीएसएल

यहाँ मेरी कोड (कोई jQuery) इस प्रश्न के लिए है stackoverflow.com/a/22969337/2274995

— Aleko

लिंक टूट गया है जिससे आपके प्रश्न को समझना आसान नहीं है। कृपया इसे फिर से फ्रेम करें।

— योगीहोस्टिंग 12

Answer 1

इस MDN प्रलेखन के अनुसार , किसी भी तत्व की offsetParentसंपत्ति nullजब भी वापस आएगी , या उसके माता-पिता में से कोई भी, प्रदर्शन शैली की संपत्ति के माध्यम से छिपी होगी। बस सुनिश्चित करें कि तत्व तय नहीं है। इसे जांचने के लिए एक स्क्रिप्ट, यदि position: fixed;आपके पृष्ठ पर कोई तत्व नहीं है, तो निम्न प्रकार दिख सकता है:

// Where el is the DOM element you'd like to test for visibility
function isHidden(el) {
    return (el.offsetParent === null)
}

दूसरी ओर, यदि आप करते स्थिति तय तत्वों, जो इस खोज में कैद की जा सकती है, तो आप उदासी (और धीरे धीरे) उपयोग करना होगा window.getComputedStyle()। उस मामले में समारोह हो सकता है:

// Where el is the DOM element you'd like to test for visibility
function isHidden(el) {
    var style = window.getComputedStyle(el);
    return (style.display === 'none')
}

विकल्प # 2 शायद थोड़ा अधिक सीधा है क्योंकि यह अधिक धार के मामलों के लिए जिम्मेदार है, लेकिन मैंने इसके अच्छे सौदे को धीमा कर दिया है, इसलिए, यदि आपको इस ऑपरेशन को कई बार दोहराना है, तो संभवतः इससे बचने के लिए सबसे अच्छा है।

Comments

वाह कोई मज़ाक नहीं। इमो एक सार्वभौमिक समाधान के रूप में दूसरी विधि का उपयोग करने का कोई कारण नहीं होना चाहिए; किसी भी पृष्ठ में ऐसे तत्व नहीं होने चाहिए जो इसके निर्माता को स्पष्ट रूप से पता न हों, और पहले सभी तत्वों पर ऑफसेटपार्टेंट विधि को चलाने के बाद getComputedStyle () विधि का उपयोग करके कोई भी स्वयं उन्हें देख सकता है।

— एलेक्सजेड

FYI करें, बस पता चला कि el.offsetParentIE9 पर काम नहीं कर रहा था गैर-तय तत्वों के लिए। या तो ऐसा लगता है, वैसे भी। (IE11 के लिए ठीक है, हालांकि।) तो getComputedStyleसब के साथ चला गया ।

— निक

@AlexZ मुझे यकीन नहीं है कि अगर ऑफसेटप्रेंटेंट वास्तव में आज के ब्राउज़रों में एक रिफ्लो करता है, लेकिन हाँ कुछ साल पहले, वे करते थे, यही मैं रिपोर्टों से समझता हूं। ध्यान दें कि jsPerf केवल निष्पादन की गति का उल्लेख करता है, जबकि रिफ्लो प्रदर्शन के बारे में है। और reflows UI को खराब बनाता है। मैं व्यक्तिगत रूप से एक दिनचर्या के लिए गति के लिए नहीं जाऊंगा जिसे शायद एक पृष्ठ पर 5/6 बार कहा जाता है।

— एथन

अफसोस! getComputedStyleसही तरीके से काम नहीं करता है: plnkr.co/edit/6CSCA2fe4Gqt4jCBPP2wu?p=preview हालांकि, ऐसा नहीं है offsetParent- शायद दोनों के संयोजन का उपयोग किया जाना चाहिए?

— लड़का मोगरेबी

ie9 + यानी 10 के लिए आप देख सकते हैं कि ऑफसेटप्रेंटेंट = गैर-दृश्य तत्वों के लिए शरीर।

— सुपरब्यूपरडू

Answer 2

अन्य सभी समाधान मेरे लिए कुछ स्थिति के लिए टूट गए ।।

जीतने वाला जवाब देखें:

http://plnkr.co/edit/6CSCA2fe4Gqt4jCBP2wu?p=preview

आखिरकार, मैंने फैसला किया कि सबसे अच्छा समाधान था $(elem).is(':visible')- हालांकि, यह शुद्ध जावास्क्रिप्ट नहीं है। यह jquery है ..

इसलिए मैंने उनके स्रोत को देखा और पाया कि मुझे क्या चाहिए

jQuery.expr.filters.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

यह स्रोत है: https://github.com/jquery/jquery/blob/master/src/css/hiddenVoubleSelectors.js

Comments

यह trueएक तत्व के साथ लौटेगाvisibility:hidden

— युवल ए।

@YuvalA .: हाँ क्योंकि तत्व अभी भी दिखाई दे रहा है। एक तत्व सेट करना visibility:hiddenअब कोई सामग्री नहीं दिखाता है, लेकिन फिर भी तत्व की चौड़ाई और ऊंचाई लेता है!

— याकूब वैन लिंगेन

@Michael आप आसानी से jQuery कोड ब्राउज़ कर सकते हैं और यदि आप किसी भी आधुनिक IDE का उपयोग कर रहे हैं (यदि ऐसा नहीं है तो कोशिश करें) आप jQuery या किसी अन्य परिवाद का उपयोग करते हुए सही कोड भागों में कूद सकते हैं। ओपन सोर्स प्रोजेक्ट्स के कोडबेस ब्राउज़ करते समय आप बहुत कुछ सीख सकते हैं।

— लुकास एलिसिस

Answer 3

यदि आप उपयोगकर्ता द्वारा दिखाई देने में रुचि रखते हैं:

function isVisible(elem) {
    if (!(elem instanceof Element)) throw Error('DomUtil: elem is not an element.');
    const style = getComputedStyle(elem);
    if (style.display === 'none') return false;
    if (style.visibility !== 'visible') return false;
    if (style.opacity < 0.1) return false;
    if (elem.offsetWidth + elem.offsetHeight + elem.getBoundingClientRect().height +
        elem.getBoundingClientRect().width === 0) {
        return false;
    }
    const elemCenter   = {
        x: elem.getBoundingClientRect().left + elem.offsetWidth / 2,
        y: elem.getBoundingClientRect().top + elem.offsetHeight / 2
    };
    if (elemCenter.x < 0) return false;
    if (elemCenter.x > (document.documentElement.clientWidth || window.innerWidth)) return false;
    if (elemCenter.y < 0) return false;
    if (elemCenter.y > (document.documentElement.clientHeight || window.innerHeight)) return false;
    let pointContainer = document.elementFromPoint(elemCenter.x, elemCenter.y);
    do {
        if (pointContainer === elem) return true;
    } while (pointContainer = pointContainer.parentNode);
    return false;
}

परीक्षण किया गया ( मोचा शब्दावली का उपयोग करते हुए ):

describe.only('visibility', function () {
    let div, visible, notVisible, inViewport, leftOfViewport, rightOfViewport, aboveViewport,
        belowViewport, notDisplayed, zeroOpacity, zIndex1, zIndex2;
    before(() => {
        div = document.createElement('div');
        document.querySelector('body').appendChild(div);
        div.appendChild(visible = document.createElement('div'));
        visible.style       = 'border: 1px solid black; margin: 5px; display: inline-block;';
        visible.textContent = 'visible';
        div.appendChild(inViewport = visible.cloneNode(false));
        inViewport.textContent = 'inViewport';
        div.appendChild(notDisplayed = visible.cloneNode(false));
        notDisplayed.style.display = 'none';
        notDisplayed.textContent   = 'notDisplayed';
        div.appendChild(notVisible = visible.cloneNode(false));
        notVisible.style.visibility = 'hidden';
        notVisible.textContent      = 'notVisible';
        div.appendChild(leftOfViewport = visible.cloneNode(false));
        leftOfViewport.style.position = 'absolute';
        leftOfViewport.style.right = '100000px';
        leftOfViewport.textContent = 'leftOfViewport';
        div.appendChild(rightOfViewport = leftOfViewport.cloneNode(false));
        rightOfViewport.style.right       = '0';
        rightOfViewport.style.left       = '100000px';
        rightOfViewport.textContent = 'rightOfViewport';
        div.appendChild(aboveViewport = leftOfViewport.cloneNode(false));
        aboveViewport.style.right       = '0';
        aboveViewport.style.bottom       = '100000px';
        aboveViewport.textContent = 'aboveViewport';
        div.appendChild(belowViewport = leftOfViewport.cloneNode(false));
        belowViewport.style.right       = '0';
        belowViewport.style.top       = '100000px';
        belowViewport.textContent = 'belowViewport';
        div.appendChild(zeroOpacity = visible.cloneNode(false));
        zeroOpacity.textContent   = 'zeroOpacity';
        zeroOpacity.style.opacity = '0';
        div.appendChild(zIndex1 = visible.cloneNode(false));
        zIndex1.textContent = 'zIndex1';
        zIndex1.style.position = 'absolute';
        zIndex1.style.left = zIndex1.style.top = zIndex1.style.width = zIndex1.style.height = '100px';
        zIndex1.style.zIndex = '1';
        div.appendChild(zIndex2 = zIndex1.cloneNode(false));
        zIndex2.textContent = 'zIndex2';
        zIndex2.style.left = zIndex2.style.top = '90px';
        zIndex2.style.width = zIndex2.style.height = '120px';
        zIndex2.style.backgroundColor = 'red';
        zIndex2.style.zIndex = '2';
    });
    after(() => {
        div.parentNode.removeChild(div);
    });
    it('isVisible = true', () => {
        expect(isVisible(div)).to.be.true;
        expect(isVisible(visible)).to.be.true;
        expect(isVisible(inViewport)).to.be.true;
        expect(isVisible(zIndex2)).to.be.true;
    });
    it('isVisible = false', () => {
        expect(isVisible(notDisplayed)).to.be.false;
        expect(isVisible(notVisible)).to.be.false;
        expect(isVisible(document.createElement('div'))).to.be.false;
        expect(isVisible(zIndex1)).to.be.false;
        expect(isVisible(zeroOpacity)).to.be.false;
        expect(isVisible(leftOfViewport)).to.be.false;
        expect(isVisible(rightOfViewport)).to.be.false;
        expect(isVisible(aboveViewport)).to.be.false;
        expect(isVisible(belowViewport)).to.be.false;
    });
});

Comments

एक किनारे का मामला अगर हाथी व्यूपोर्ट के बाहर स्थित है, तो उसे "if (पॉइंटकॉर्नर) झूठे" द्वारा पकड़ा जा सकता है; पहले बिंदु पर जाँचकर्ता

— जेरी डेंग

यदि आप जांचना चाहते हैं कि क्या उपयोगकर्ता संभवतः इसे देख सकता है, तो आपको एक scrollIntoViewअधिकार का उपयोग करना होगा ?! यह काफी महंगा है। क्या कोई और चतुर तरीका है?

— किम कर्न

Answer 4

यह मदद कर सकता है: तत्व को सबसे बाईं ओर स्थिति से छिपाएं और फिर ऑफसेट संपत्ति की जांच करें। यदि आप jQuery का उपयोग करना चाहते हैं, तो आप बस : दृश्यमान चयनकर्ता की जांच कर सकते हैं और तत्व की दृश्यता स्थिति प्राप्त कर सकते हैं ।

HTML:

<div id="myDiv">Hello</div>

सीएसएस:

<!-- for javaScript-->
#myDiv{
   position:absolute;
   left : -2000px;
}

<!-- for jQuery -->
#myDiv{
    visibility:hidden;
}

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

var myStyle = document.getElementById("myDiv").offsetLeft;

if(myStyle < 0){
     alert("Div is hidden!!");
}

jQuery:

if(  $("#MyElement").is(":visible") == true )
{  
     alert("Div is visible!!");        
}

jsFiddle

Comments

ओपी एक no-jQuery उत्तर का अनुरोध करता है।

— स्टीफन क्वान

यह बाद में संपादित किया गया था मुझे लगता है। जब मैंने उत्तर दिया तो इसका उल्लेख धागे में नहीं था।

— एम। एस। आशदुज्जमन

@StephenQuan, मैंने jQuery और जावा स्क्रिप्ट समाधान के साथ उत्तर को अपडेट किया है।

— मो। अषादुज्जमन

jQuery के उदाहरण के लिए, अलर्ट को यह नहीं कहना चाहिए कि "डिव दिखाई दे रहा है?"

— आंद्रेई बाजानोव

मैं एक तत्व को पूरी तरह से छिपाना चाहता हूं क्योंकि इसका ऑफसेट केवल 0 से कम है: क्या होगा अगर यह केवल 0 से कम पिक्सेल की एक छोटी संख्या है और इसका दाहिना हिस्सा दिखाई दे रहा है? (मैं मानता हूं कि यह एक मूर्खतापूर्ण डिजाइन की तरह प्रतीत होगा, लेकिन आप इन दिनों वेब डिज़ाइनरों के साथ कभी नहीं जानते हैं।) ऑफसेटलेफ़्ट में चौड़ाई जोड़ना बेहतर है और देखें कि परिणाम अभी भी 0. से कम है या नहीं।

— सिलास एस। ब्राउन

Answer 5

उसी कोड का उपयोग करें जैसे jQuery करता है:

jQuery.expr.pseudos.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

तो, एक समारोह में:

function isVisible(e) {
    return !!( e.offsetWidth || e.offsetHeight || e.getClientRects().length );
}

मेरे Win / IE10, Linux / Firefox.45, Linux / Chrome.52 में एक आकर्षण की तरह काम करता है ...

JQuery के बिना jQuery के लिए बहुत धन्यवाद!

Comments

अच्छा है, लेकिन तत्वों को अतिप्रवाह द्वारा छिपाया नहीं जाता है।

— अल्फ.देव

अच्छा है लेकिन क्यों !! (दोहरी उपेक्षा)

— सुनील गर्ग

बूलियन के रूप में परिणाम को मजबूर करने के लिए। के रूप में e.offsetWidthएक पूर्णांक है, !e.offsetWidthवापस आ जाएगी false, तो e.offsetWidthशून्य से अधिक है (तत्व दिखाई देता है)। तो एक और जोड़ने !के रूप में !!e.offsetWidthवापस आ जाएगी true, तो e.offsetWidthशून्य से अधिक है। यह return e.offsetWidth > 0 ? true : falseजाहिर है या के लिए एक आशुलिपि है return e.offsetWidth > 0।

— यवन

Answer 6

ऊपर एक जोड़े के जवाब का संयोजन:

function isVisible (ele) {
    var style = window.getComputedStyle(ele);
    return  style.width !== "0" &&
    style.height !== "0" &&
    style.opacity !== "0" &&
    style.display!=='none' &&
    style.visibility!== 'hidden';
}

जैसे कि एलेक्सजेड ने कहा, यह आपके कुछ अन्य विकल्पों की तुलना में धीमा हो सकता है यदि आप अधिक विशिष्ट रूप से जानते हैं कि आप क्या देख रहे हैं, लेकिन यह सभी मुख्य तरीकों को छिपाना चाहिए।

लेकिन, यह भी निर्भर करता है कि आपके लिए क्या मायने रखता है। उदाहरण के लिए, एक div की ऊँचाई 0px पर सेट की जा सकती है, लेकिन सामग्री अभी भी अतिप्रवाह गुणों के आधार पर दिखाई देती है। या एक div की सामग्री को पृष्ठभूमि के समान रंग बनाया जा सकता है इसलिए यह उपयोगकर्ताओं को दिखाई नहीं देता है लेकिन फिर भी पृष्ठ पर प्रदान किया जाता है। या एक डिव को स्क्रीन से दूर ले जाया जा सकता है या अन्य डिव के पीछे छिपाया जा सकता है, या यह सामग्री गैर-दृश्य हो सकती है लेकिन सीमा अभी भी दिखाई दे रही है। कुछ हद तक "दृश्यमान" एक व्यक्तिपरक शब्द है।

Comments

अच्छा है, लेकिन style.opacity, style.height और style.width एक स्ट्रिंग लौटाता है तो यह साथ काम नहीं करेगा! ==

— मास्लो

एक और तरीका है कि एक तत्व को शैली के माध्यम से छिपाया जा सकता है वह यह है कि यह रंग पृष्ठभूमि के रंग से मेल खा सकता है, या यह जेड-इंडेक्स अन्य तत्वों की तुलना में कम हो सकता है।

— न्यू एवरेस्ट

इसे जोड़ना display:noneबहुत अच्छा होगा। एक उचित कार्य समाधान!

— गिजो वर्गीस

Answer 7

जब एक स्थिति 'निश्चित' तत्वों की होती है, तो मुझे एलेक्सज के getComputedStyle () समाधान की तुलना में अधिक प्रदर्शनकारी समाधान मिल गया है , यदि कोई कुछ किनारे के मामलों (टिप्पणियों की जांच) को अनदेखा करने के लिए तैयार है:

function isVisible(el) {
    /* offsetParent would be null if display 'none' is set.
       However Chrome, IE and MS Edge returns offsetParent as null for elements
       with CSS position 'fixed'. So check whether the dimensions are zero.

       This check would be inaccurate if position is 'fixed' AND dimensions were
       intentionally set to zero. But..it is good enough for most cases.*/
    if (!el.offsetParent && el.offsetWidth === 0 && el.offsetHeight === 0) {
        return false;
    }
    return true;
}

साइड नोट: सख्ती से बोलते हुए, "दृश्यता" को पहले परिभाषित करने की आवश्यकता है। मेरे मामले में, मैं एक ऐसे तत्व पर विचार कर रहा हूं जब तक कि मैं समस्याओं के बिना उस पर सभी DOM तरीके / गुण चला सकता हूं (भले ही अस्पष्टता 0 हो या सीएसएस दृश्यता संपत्ति 'छिपी हुई है' आदि)।

Answer 8

(: ब्लॉक और visibillity: प्रदर्शन दिखाई) यदि तत्व नियमित दिखाई दे रहा है, लेकिन कुछ पैरेंट कंटेनर छिपा हुआ है, तो हम उपयोग कर सकते हैं clientWidth और clientHeight कि जांच करने के लिए।

function isVisible (ele) {
  return  ele.clientWidth !== 0 &&
    ele.clientHeight !== 0 &&
    ele.style.opacity !== 0 &&
    ele.style.visibility !== 'hidden';
}

प्लंकर (यहां क्लिक करें)

Comments

ele.style.visibility !== 'hidden'यहाँ बेमानी है। उस मामले में, clientWidth और clientHeight हो जाएगा 0.

— subdavis

Answer 9

यदि हम दृश्यता का पता लगाने के बुनियादी तरीकों को एकत्र कर रहे हैं, तो मुझे मत भूलना:

opacity > 0.01; // probably more like .1 to actually be visible, but YMMV

और कैसे गुण प्राप्त करें:

element.getAttribute(attributename);

तो, आपके उदाहरण में:

document.getElementById('snDealsPanel').getAttribute('visibility');

लेकिन वाह? यह यहाँ काम नहीं करता है। करीब से देखें और आप पाएंगे कि दृश्यता को तत्व पर एक विशेषता के रूप में नहीं, बल्कि styleसंपत्ति का उपयोग करके अपडेट किया जा रहा है। यह कई समस्याओं में से एक है जिसे आप करने की कोशिश कर रहे हैं। दूसरों में: आप इस बात की गारंटी नहीं दे सकते कि वास्तव में किसी तत्व में देखने के लिए कुछ है, सिर्फ इसलिए कि इसकी दृश्यता, प्रदर्शन और अस्पष्टता सभी में सही मूल्य हैं। इसमें अभी भी सामग्री की कमी हो सकती है, या इसमें ऊँचाई और चौड़ाई की कमी हो सकती है। एक अन्य वस्तु इसे अस्पष्ट कर सकती है। अधिक विवरण के लिए, एक त्वरित Google खोज से यह पता चलता है , और यहां तक ​​कि समस्या को हल करने की कोशिश करने के लिए एक पुस्तकालय भी शामिल है। (YMMV)

निम्नलिखित प्रश्नों की जांच करें, जो इस प्रश्न के डुप्लिकेट हैं, उत्कृष्ट उत्तर के साथ, शक्तिशाली जॉन रेजिग से कुछ अंतर्दृष्टि सहित। हालाँकि, आपका विशिष्ट उपयोग-मामला मानक एक से थोड़ा अलग है, इसलिए मैं फ़्लैगिंग से बचना चाहूँगा:

• कैसे बताएं कि क्या कोई DOM तत्व वर्तमान व्यूपोर्ट में दिखाई दे रहा है?
• यह कैसे जांचा जाए कि क्या कोई तत्व जावास्क्रिप्ट के साथ वास्तव में दिखाई दे रहा है?

(संपादित करें: ओपी सय्यस स्क्रैपिंग पेजेस, उन्हें सृजन नहीं कर रहे हैं, इसलिए इस विषय को लागू करना बेहतर है) एक बेहतर विकल्प है? मॉडल के गुणों के लिए तत्वों की दृश्यता को बांधें और हमेशा उस मॉडल पर दृश्यता को आकस्मिक बनाएं, जितना कि कोणीय शो के साथ नहीं है। आप यह कर सकते हैं कि आप किसी भी उपकरण का उपयोग कर सकते हैं: कोणीय, सादा जेएस, जो भी हो। बेहतर अभी भी, आप समय के साथ DOM कार्यान्वयन को बदल सकते हैं, लेकिन आप DOM के बजाय हमेशा मॉडल से स्थिति पढ़ सकते हैं। DOM से आपकी सच्चाई पढ़ना बुरा है। और धीमा। मॉडल की जांच करने के लिए बहुत बेहतर है, और यह सुनिश्चित करने के लिए अपने कार्यान्वयन में विश्वास है कि डोम राज्य मॉडल को दर्शाता है। (और उस धारणा की पुष्टि करने के लिए स्वचालित परीक्षण का उपयोग करें।)

Comments

मैं पार्सिंग साइट्स हूं, यह मेरी अपनी साइट के लिए नहीं है ... :)

— होमर स्मिथ

Answer 10

स्वीकृत उत्तर ने मेरे लिए काम नहीं किया। वर्ष 2020 उत्तर :

1) फ़ायरफ़ॉक्स में (elem.offsetParent! == null) विधि ठीक काम करती है लेकिन क्रोम में नहीं। Chrome के लिए "स्थिति: निश्चित;" यदि पृष्ठ में दिखाई देता है तो भी ऑफसेटपार्टेंट रिटर्न "अशक्त" बना देगा।

डेमो:

//different results in Chrome and Firefox
console.log(document.querySelector('#hidden1').offsetParent); //null Chrome & Firefox
console.log(document.querySelector('#fixed1').offsetParent); //null in Chrome, not null in Firefox

    <div id="hidden1" style="display:none;"></div>
    <div id="fixed1" style="position:fixed;"></div>

आप इस आदमी को मेगास्टेस्ट https://stackoverflow.com/a/11639664/4481831 (अंतर देखने के लिए इसे कई ब्राउज़रों के साथ चलाएं) देख सकते हैं।

2) (getComputedStyle (elem) .display! == 'none') काम नहीं करता है क्योंकि तत्व अदृश्य हो सकता है क्योंकि माता-पिता के प्रदर्शन की संपत्ति में से कोई भी किसी पर सेट नहीं होता है, getComputedStyle उसे पकड़ नहीं पाएगा।

डेमो:

var child1 = document.querySelector('#child1');
console.log(getComputedStyle(child1).display);
//child will show "block" instead of "none"

<div id="parent1" style="display:none;">
  <div id="child1" style="display:block"></div>
</div>

३) द (इल्म.क्लिएंटहाइट! == ०) । यह विधि निश्चित स्थिति से प्रभावित नहीं होती है और यह भी जांच लेती है कि तत्व माता-पिता को दिखाई नहीं दे रहे हैं या नहीं। लेकिन इसमें सरल तत्वों की समस्याएं हैं जिनके पास सीएसएस लेआउट नहीं है, यहां अधिक देखें

डेमो:

console.log(document.querySelector('#div1').clientHeight); //not zero
console.log(document.querySelector('#span1').clientHeight); //zero

<div id="div1">test1 div</div>
<span id="span1">test2 span</span>

4) (elem.getClientRects ()। लंबाई! == 0) जो पिछले 3 तरीकों की समस्याओं को पार करने के लिए लगता है। हालाँकि, इसमें ऐसे तत्वों की समस्या है जो पृष्ठ में छिपाने के लिए सीएसएस ट्रिक्स (अन्य तब "प्रदर्शन: कोई नहीं") का उपयोग करते हैं।

console.log(document.querySelector('#notvisible1').getClientRects().length);
console.log(document.querySelector('#notvisible1').clientHeight);
console.log(document.querySelector('#notvisible2').getClientRects().length);
console.log(document.querySelector('#notvisible2').clientHeight);
console.log(document.querySelector('#notvisible3').getClientRects().length);
console.log(document.querySelector('#notvisible3').clientHeight);

<div id="notvisible1" style="height:0; overflow:hidden; background-color:red;">not visible 1</div>

<div id="notvisible2" style="visibility:hidden; background-color:yellow;">not visible 2</div>

<div id="notvisible3" style="opacity:0; background-color:blue;">not visible 3</div>

निष्कर्ष: तो जो मैंने आपको दिखाया है वह यह है कि कोई भी तरीका सही नहीं है। एक उचित दृश्यता जांच करने के लिए आपको अंतिम 3 विधियों के संयोजन का उपयोग करना चाहिए।

Answer 11

बस संदर्भ के लिए यह ध्यान दिया जाना चाहिए कि getBoundingClientRect()कुछ मामलों में काम कर सकता है।

उदाहरण के लिए, एक साधारण जांच जो तत्व का उपयोग display: noneकर छिपी हुई है वह कुछ इस तरह दिख सकती है:

var box = element.getBoundingClientRect();
var visible = box.width && box.height;

यह आसान भी है क्योंकि यह शून्य-चौड़ाई, शून्य-ऊंचाई और position: fixedमामलों को भी कवर करता है । हालांकि, इसके साथ छिपा हुआ तत्व रिपोर्ट नहीं करेगा opacity: 0या visibility: hidden(लेकिन न तो होगा offsetParent)।

Comments

मेरे लिए सबसे अच्छा जवाब ... सरल और प्रभावी। और 3 साल बाद कोई भी अपवित्र नहीं! "भीड़ ज्ञान" के लायक दिखाने के लिए जाता है। मेरे संस्करण: var isVisible = el => (r => r.width && r.height)(el.getBoundingClientRect());। फिर मैं निम्नलिखित तरीके से तत्वों के सरणियों को फ़िल्टर कर सकता हूं $$(sel).filter(isVisible):।

— 7vujy0f0hy

मुझे यह सबसे सरल समाधान डेवलपर

— pmozilla.org/en-US/docs/Web/API/Element/…

उपयोगकर्ता को दिखाई देने पर यह काम नहीं करता है .... यदि आप दूर स्क्रॉल करते हैं तो यह सही रहेगा

— रे फॉस

Answer 12

तो मुझे जो मिला वह सबसे संभव तरीका है:

function visible(elm) {
  if(!elm.offsetHeight && !elm.offsetWidth) { return false; }
  if(getComputedStyle(elm).visibility === 'hidden') { return false; }
  return true;
}

यह इन तथ्यों पर निर्मित है:

• एक display: noneतत्व (यहां तक ​​कि एक नेस्टेड) ​​की चौड़ाई नहीं है और न ही ऊंचाई।
• visiblityहै hiddenभी नेस्टेड तत्वों के लिए।

तो offsetParentमाता-पिता के पास परीक्षण करने के लिए डोम ट्री में परीक्षण या लूपिंग की कोई आवश्यकता नहीं है visibility: hidden। यह IE 9 में भी काम करना चाहिए।

आप तर्क दे सकते हैं कि क्या opacity: 0और ध्वस्त हो चुके तत्व (चौड़ाई नहीं है, लेकिन ऊँचाई नहीं है - या वीज़ा वर्सा) वास्तव में दिखाई नहीं दे रहा है। लेकिन फिर वे प्रति छिपा हुआ नहीं कह रहे हैं।

Answer 13

ओहद नौसन के जवाब के लिए एक छोटा सा अतिरिक्त।

यदि तत्व का केंद्र दूसरे तत्व से संबंधित है, तो हम उसे नहीं खोज पाएंगे।

तो यह सुनिश्चित करने के लिए कि तत्व का एक बिंदु दिखाई दे रहा है

function isElementVisible(elem) {
    if (!(elem instanceof Element)) throw Error('DomUtil: elem is not an element.');
    const style = getComputedStyle(elem);
    if (style.display === 'none') return false;
    if (style.visibility !== 'visible') return false;
    if (style.opacity === 0) return false;
    if (elem.offsetWidth + elem.offsetHeight + elem.getBoundingClientRect().height +
        elem.getBoundingClientRect().width === 0) {
        return false;
    }
    var elementPoints = {
        'center': {
            x: elem.getBoundingClientRect().left + elem.offsetWidth / 2,
            y: elem.getBoundingClientRect().top + elem.offsetHeight / 2
        },
        'top-left': {
            x: elem.getBoundingClientRect().left,
            y: elem.getBoundingClientRect().top
        },
        'top-right': {
            x: elem.getBoundingClientRect().right,
            y: elem.getBoundingClientRect().top
        },
        'bottom-left': {
            x: elem.getBoundingClientRect().left,
            y: elem.getBoundingClientRect().bottom
        },
        'bottom-right': {
            x: elem.getBoundingClientRect().right,
            y: elem.getBoundingClientRect().bottom
        }
    }

    for(index in elementPoints) {
        var point = elementPoints[index];
        if (point.x < 0) return false;
        if (point.x > (document.documentElement.clientWidth || window.innerWidth)) return false;
        if (point.y < 0) return false;
        if (point.y > (document.documentElement.clientHeight || window.innerHeight)) return false;
        let pointContainer = document.elementFromPoint(point.x, point.y);
        if (pointContainer !== null) {
            do {
                if (pointContainer === elem) return true;
            } while (pointContainer = pointContainer.parentNode);
        }
    }
    return false;
}

Answer 14

यदि केंद्र बिंदु 'X <0 गलत है, तो @Guy मेसिका के उत्तर के ऊपर , तोड़ना और वापस लौटना बेहतर है क्योंकि तत्व सही पक्ष दृश्य में जा सकता है। यहाँ एक तय है:

private isVisible(elem) {
    const style = getComputedStyle(elem);

    if (style.display === 'none') return false;
    if (style.visibility !== 'visible') return false;
    if ((style.opacity as any) === 0) return false;

    if (
        elem.offsetWidth +
        elem.offsetHeight +
        elem.getBoundingClientRect().height +
        elem.getBoundingClientRect().width === 0
    ) return false;

    const elementPoints = {
        center: {
            x: elem.getBoundingClientRect().left + elem.offsetWidth / 2,
            y: elem.getBoundingClientRect().top + elem.offsetHeight / 2,
        },
        topLeft: {
            x: elem.getBoundingClientRect().left,
            y: elem.getBoundingClientRect().top,
        },
        topRight: {
            x: elem.getBoundingClientRect().right,
            y: elem.getBoundingClientRect().top,
        },
        bottomLeft: {
            x: elem.getBoundingClientRect().left,
            y: elem.getBoundingClientRect().bottom,
        },
        bottomRight: {
            x: elem.getBoundingClientRect().right,
            y: elem.getBoundingClientRect().bottom,
        },
    };

    const docWidth = document.documentElement.clientWidth || window.innerWidth;
    const docHeight = document.documentElement.clientHeight || window.innerHeight;

    if (elementPoints.topLeft.x > docWidth) return false;
    if (elementPoints.topLeft.y > docHeight) return false;
    if (elementPoints.bottomRight.x < 0) return false;
    if (elementPoints.bottomRight.y < 0) return false;

    for (let index in elementPoints) {
        const point = elementPoints[index];
        let pointContainer = document.elementFromPoint(point.x, point.y);
        if (pointContainer !== null) {
            do {
                if (pointContainer === elem) return true;
            } while (pointContainer = pointContainer.parentNode);
        }
    }
    return false;
}

Answer 15

Http://code.jquery.com/jquery-1.11.1.js से jQuery कोड में एक isHidden परम है

var isHidden = function( elem, el ) {
    // isHidden might be called from jQuery#filter function;
    // in that case, element will be second argument
    elem = el || elem;
    return jQuery.css( elem, "display" ) === "none" || !jQuery.contains( elem.ownerDocument, elem );
};

तो ऐसा लगता है कि मालिक दस्तावेज़ से संबंधित एक अतिरिक्त जांच है

मुझे आश्चर्य है कि अगर यह वास्तव में निम्नलिखित मामलों को पकड़ता है:

1. ZIndex के आधार पर अन्य तत्वों के पीछे छिपे हुए तत्व
2. पारदर्शिता से भरे तत्व उन्हें अदृश्य बनाते हैं
3. स्क्रीन बंद तत्व (यानी बाएं: -1000px)
4. दृश्यता के साथ तत्व: छिपा हुआ
5. प्रदर्शन के साथ तत्व: कोई नहीं
6. कोई दृश्य पाठ या उप तत्व वाले तत्व
7. ऊँचाई या चौड़ाई वाले तत्व 0 पर सेट होते हैं

Answer 16

यहां कुछ समान तत्वों के बीच एकमात्र दृश्य को खोजने के लिए मैंने लिखा कोड है, और jQuery के बिना इसके "वर्ग" विशेषता का मान लौटाएं:

  // Build a NodeList:
  var nl = document.querySelectorAll('.myCssSelector');

  // convert it to array:
  var myArray = [];for(var i = nl.length; i--; myArray.unshift(nl[i]));

  // now find the visible (= with offsetWidth more than 0) item:
  for (i =0; i < myArray.length; i++){
    var curEl = myArray[i];
    if (curEl.offsetWidth !== 0){
      return curEl.getAttribute("class");
    }
  }

Answer 17

यह जो मैंने किया है:

HTML और CSS: डिफ़ॉल्ट रूप से छिपे हुए तत्व को बनाया

<html>
<body>

<button onclick="myFunction()">Click Me</button>

<p id="demo" style ="visibility: hidden;">Hello World</p> 

</body>
</html> 

जावास्क्रिप्ट: दृश्यता छिपी है या नहीं यह जांचने के लिए एक कोड जोड़ा गया:

<script>
function myFunction() {
   if ( document.getElementById("demo").style.visibility === "hidden"){
   document.getElementById("demo").style.visibility = "visible";
   }
   else document.getElementById("demo").style.visibility = "hidden";
}
</script>

Answer 18

यह दृश्यता सहित सभी सीएसएस गुणों के लिए इसे निर्धारित करने का एक तरीका है:

एचटीएमएल:

<div id="element">div content</div>

सीएसएस:

#element
{
visibility:hidden;
}

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

var element = document.getElementById('element');
 if(element.style.visibility == 'hidden'){
alert('hidden');
}
else
{
alert('visible');
}

यह किसी भी सीएसएस संपत्ति के लिए काम करता है और बहुत ही बहुमुखी और विश्वसनीय है।