উপাদানটি ডিওমে দৃশ্যমান কিনা তা পরীক্ষা করে দেখুন

377

খাঁটি জেএস (কোনও জিকুয়েরি নেই) এ কোনও উপাদান দৃশ্যমান কিনা তা আমি কীভাবে পরীক্ষা করতে পারি?

সুতরাং, উদাহরণস্বরূপ, এই পৃষ্ঠায়: পারফরম্যান্স বাইকগুলি , আপনি যদি ডিলগুলি (উপরের মেনুতে) নিয়ে যান তবে ডিলগুলির একটি উইন্ডো প্রদর্শিত হবে, তবে শুরুতে এটি প্রদর্শিত হয়নি। এটি এইচটিএমএলে রয়েছে তবে এটি দৃশ্যমান নয়।

সুতরাং, একটি ডিওএম উপাদান দেওয়া হয়েছে, এটি কীভাবে দেখা যাচ্ছে কিনা তা আমি কীভাবে যাচাই করতে পারি? আমি চেষ্টা করেছিলাম:

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

তবে এটি কাজ করছে বলে মনে হয় না। আমি ভাবছি যে কোন বৈশিষ্ট্যগুলি আমার পরীক্ষা করা উচিত। এটা আমার মনে আসে:

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

আমি নিখোঁজ হতে পারে যে অন্য কেউ?

javascript  dom 
— হোমার স্মিথ
সূত্র
1
এটি প্রদর্শন ব্যবহার করে না, এটি দৃশ্যমানতা ব্যবহার করে তাই দৃশ্যমানতার জন্য পরীক্ষা করুন (লুকানো বা দৃশ্যমান)। উদা:document.getElementById('snDealsPanel').style.visibility
— পিএসএল
PSL। আমি যদি আরও সাধারণভাবে এটি করতে চাই তবে আমার কোন বৈশিষ্ট্যগুলি পরীক্ষা করা উচিত: দৃশ্যমানতা, প্রদর্শন ...?
— হামার স্মিথ
আপনি এটিকে নিজের উপায়ে জেনেরিক তৈরি করতে পারেন তবে আমি যা বলছি তা হ'ল উপাদানটি পরিদর্শন করে দৃশ্যমানতা ব্যবহার করা।
— পিএসএল
এই প্রশ্নের জন্য এখানে আমার কোড (কোনও জেকোয়ারি নেই) stackoverflow.com/a/22969337/2274995
— আলেকো
লিঙ্কটি নষ্ট হয়ে গেছে যা আপনার প্রশ্নটি বোঝা সহজ করে না। দয়া করে এটি আবার ফ্রেম করুন।
— যোগিহোস্টিং

উত্তর:

617

এই এমডিএন ডকুমেন্টেশন অনুসারে , কোনও উপাদানের 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 সম্ভবত কিছুটা সহজ সরল, যেহেতু এটি আরও প্রান্তের কেসগুলির জন্য অ্যাকাউন্ট করে, তবে আমি এটি একটি ভাল চুক্তিটি ধীরে ধীরে ধীরে ধীরেও বাজি ধরছি, তাই যদি আপনাকে এই অপারেশনটি বহুবার পুনরাবৃত্তি করতে হয় তবে সম্ভবত এটি এড়ানো ভাল।

— AlexZ
সূত্র
বাহ কোন মজা করছে না। ইমোতে দ্বিতীয় পদ্ধতিটি সর্বজনীন সমাধান হিসাবে ব্যবহার করার কোনও কারণ থাকতে হবে না; কোনও পৃষ্ঠায় স্থির উপাদান থাকা উচিত নয় যার স্রষ্টা সুস্পষ্টভাবে অবগত নয়, এবং প্রথমে সমস্ত উপাদানগুলিতে অফসেট প্যারেন্ট পদ্ধতি চালানোর পরে getComputesStyle () পদ্ধতি ব্যবহার করে ম্যানুয়ালি সেগুলি পরীক্ষা করতে পারে।
— অ্যালেক্সজ
6
এছাড়াও এফওয়াইআই, সবেমাত্র আবিষ্কার করেছেন যে el.offsetParentনির্ধারিত উপাদানগুলির জন্য আই 99 এ কাজ করছে না। বা তাই মনে হয়, যাইহোক। (যদিও IE11 জন্য ঠিক আছে,।) সুতরাং সঙ্গে গিয়েছিলাম getComputedStyleসব পরে।
— নিক
1
@ অ্যালেক্সজেড আমি নিশ্চিত নই যে অফসেট প্যারেন্ট সত্যিকার অর্থে আজকের ব্রাউজারগুলিতে একটি প্রতিস্থাপন করে কিনা, তবে হ্যাঁ কয়েক বছর আগে তারা অভ্যস্ত ছিল, রিপোর্ট থেকে আমি এটাই বুঝি। নোট করুন যে jscreen কেবল সম্পাদনের গতির উল্লেখ করে, যখন প্রতিস্থাপনটি প্রদর্শন সম্পর্কে হয়। এবং রিফ্লোগুলি ইউআইকে দরিদ্র করে তোলে। আমি ব্যক্তিগতভাবে এমন একটি রুটিনের গতিতে যাব না যা সম্ভবত কোনও পৃষ্ঠায় 5/6 বার বলা হয়ে থাকে।
— এথান
2
হায়! getComputedStyleসঠিকভাবে কাজ করে না: plnkr.co/edit/6CSCA2fe4Gqt4jCBP2wu?p= পূর্বরূপ যাইহোক, তাই কি offsetParent- সম্ভবত দুটির সংমিশ্রণটি ব্যবহার করা উচিত?
— লোক মোগ্রাবি
2
ie9 + ie10 এর জন্য আপনি অফসেট প্যারেন্ট = অদেখা উপাদানগুলির জন্য বডি পরীক্ষা করতে পারেন।
— সুপারউবারডুপার
99

অন্য সমস্ত সমাধান আমার জন্য কিছু পরিস্থিতির জন্য ভেঙে গেছে ..

বিজয়ী উত্তরটি এখানে ভঙ্গ দেখুন:

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/hidedVisibleSelectors.js

— লোক মোগ্রাবি
সূত্র
11
এটি trueকোনও উপাদানটির সাথে ফিরে আসবেvisibility:hidden
— যুবল এ।
9
@ ইউয়ালা: হ্যাঁ কারণ উপাদানটি এখনও দৃশ্যমান। একটি উপাদান সেট করার জন্য visibility:hiddenকোনও সামগ্রী দেখায় না, তবে তবুও উপাদানটির প্রস্থ এবং উচ্চতা লাগে!
— জ্যাকব ভ্যান লিনজেন
4
@ মিশেল আপনি সহজেই jQuery কোডটি ব্রাউজ করতে পারবেন এবং আপনি যদি কোনও আধুনিক আইডিই ব্যবহার করেন (তবে না চেষ্টা করে দেখুন) আপনি jQuery বা অন্য কোনও লিব ব্যবহার করার সময় কোডের অংশগুলি সংশোধন করতে পারেন। ওপেন সোর্স প্রকল্পগুলির কোডবেস ব্রাউজ করার সময় আপনি অনেক কিছু শিখতে পারেন।
— লুকাশ লিসিস 21
53

আপনি যদি ব্যবহারকারীর দ্বারা দৃশ্যমান হতে আগ্রহী হন:

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;
    });
});
— ওহাদ নাভন
সূত্র
এলিমে ভিউপোর্টের বাইরে অবস্থান করা থাকলে একটি প্রান্তের কেসটি "যদি (! pointContainer) রিটার্ন মিথ্যা দ্বারা ধরা যেতে পারে;" প্রথম পয়েন্ট কনটেনার চেক করা
— জেরি দেং
ব্যবহারকারী যদি এটি সম্ভবত দেখতে পারে কিনা তা আপনি যদি পরীক্ষা করতে চান তবে আপনাকে একটি scrollIntoViewঅধিকার ব্যবহার করতে হবে ?! এটি বেশ ব্যয়বহুল। অন্য চতুর উপায় আছে?
— কিম কার্ন
36

এটি সাহায্য করতে পারে: এটিকে এলিমেন্টটি সবচেয়ে বেশি বাম দিকে অবস্থিত করে লুকিয়ে রাখুন এবং তারপরে অফসেট লেফট সম্পত্তিটি পরীক্ষা করুন। আপনি যদি jQuery ব্যবহার করতে চান তবে আপনি কেবল : দৃশ্যমান নির্বাচকটি পরীক্ষা করতে পারেন এবং উপাদানটির দৃশ্যমান স্থিতি পেতে পারেন।

এইচটিএমএল:

<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

— মোঃ আশাদুজ্জামান
সূত্র
12
ওপি একটি নো-জিকুয়ের উত্তরটির জন্য অনুরোধ করেছে।
— স্টিফেন কোয়ান
এটি পরে সম্পাদিত হয়েছিল আমার ধারণা। আমি যখন উত্তর দিয়েছি তখন এটি থ্রেডে উল্লেখ করা হয়নি।
— মোঃ আশাদুজ্জামান
2
@ স্টেফেনকুয়ান, আমি উত্তরটি jQuery এবং জাভা স্ক্রিপ্ট উভয় সমাধানের সাথে আপডেট করেছি।
— মোঃ আশাদুজ্জামান
6
jQuery উদাহরণস্বরূপ, সতর্কতাটি "ডিভ দৃশ্যমান?"
— আন্দ্রেই বাজনোভ
আমি কোনও উপাদানটি সম্পূর্ণরূপে গোপনীয় বলে শেষ করতে চাই না কারণ এটির অফসেট লেফট 0 এর চেয়ে কম: যদি এটি কেবলমাত্র 0 এর চেয়ে কম পিক্সেলের কম সংখ্যক এবং এর ডান হাতের অংশটি দৃশ্যমান হয়? (আমি এটি এক নিরীহ নকশার মতো বলে মনে করি তবে আজকাল ওয়েব ডিজাইনারদের সাথে আপনি কখনই জানেন না)) অফসেটলাইফ্টে প্রস্থ যুক্ত করা ভাল এবং ফলাফলটি 0 এর চেয়ে কম কিনা তা সেক্ষেত্রে সম্ভবত ভাল।
— সিলাস এস ব্রাউন
31

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 );
}

আমার উইন / আইই 10, লিনাক্স / ফায়ারফক্স 45, লিনাক্স / ক্রোম.52 ...

JQuery ছাড়া jQuery অনেক ধন্যবাদ!

— Yvan
সূত্র
দুর্দান্ত তবে ওভারফ্লো দ্বারা লুকানো উপাদানগুলি কভার করে না।
— আলফ.দেব
সুন্দর তবে কেন !! (দ্বিগুণ অবহেলা)?
— সুনীল গার্গ
3
বুলিয়ান হিসাবে ফলাফল জোর করা। যেমনটি e.offsetWidthপূর্ণসংখ্যা হিসাবে , শূন্যের চেয়ে বেশি হলে !e.offsetWidthফিরে আসবে (উপাদানটি দৃশ্যমান)। শূন্যের চেয়ে বেশি হলে অন্য হিসাবে যুক্ত করা ফিরে আসবে । এটি সংক্ষিপ্তরূপে বা স্পষ্টতই । falsee.offsetWidth!!!e.offsetWidthtruee.offsetWidthreturn e.offsetWidth > 0 ? true : falsereturn e.offsetWidth > 0
— ইভান
16

উপরে কয়েকটি দম্পতির উত্তর একত্রিত:

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

অ্যালেক্সজেডের মতো বলেছিলেন, আপনি কী সন্ধান করছেন তা সুনির্দিষ্টভাবে জানা থাকলে এটি আপনার অন্যান্য বিকল্পগুলির তুলনায় ধীর হতে পারে তবে এটি উপাদানগুলির গোপনীয় সমস্ত প্রধান উপায়গুলি ধরা উচিত।

তবে এটি নির্ভর করে যে আপনার পক্ষে কী দৃশ্যমান। উদাহরণস্বরূপ, একটি ডিভের উচ্চতা 0 পিক্সারে সেট করা যেতে পারে তবে ওভারফ্লো বৈশিষ্ট্যের উপর নির্ভর করে সামগ্রীগুলি এখনও দৃশ্যমান। বা কোনও ডিভির বিষয়বস্তুগুলিকে ব্যাকগ্রাউন্ডের মতোই রঙ করা যেতে পারে যাতে এটি ব্যবহারকারীদের কাছে দৃশ্যমান না হয় তবে এখনও পৃষ্ঠায় রেন্ডার করা হয়। অথবা একটি ডিভ স্ক্রিনের বাইরে সরানো হতে পারে বা অন্য ডিভসের পিছনে লুকানো থাকতে পারে বা এর সামগ্রীগুলি অ-দৃশ্যমান হতে পারে তবে সীমানা এখনও দৃশ্যমান। একটি নির্দিষ্ট পরিমাণে "দৃশ্যমান" একটি বিষয়গত শব্দ।

— ম্যাথু
সূত্র
1
দুর্দান্ত, তবে স্টাইল.ওপ্যাসিটি, স্টাইল.উইট এবং স্টাইল.উইথ একটি স্ট্রিং ফিরিয়ে দেয় যাতে এটি কাজ করে না! ==
— মাসলো
শৈলীর মাধ্যমে কোনও উপাদান আড়াল করার অন্য উপায়টি হ'ল এটির রঙটি পটভূমির রঙের সাথে মেলে বা জেড-ইনডেক্স অন্যান্য উপাদানগুলির চেয়ে কম হতে পারে।
— নিউ এভারেস্ট
display:noneএই যোগ করা দুর্দান্ত হবে। একটি সঠিক কাজের সমাধান!
— গিজো ভার্গেস
7

অ্যালেক্সজেডের গেটকম্পিউড স্টাইল () সমাধানের তুলনায় আমি আরও পারফরম্যান্স সলিউশন পেয়েছি যখন কারও পজিশনে 'স্থির' উপাদান থাকে, যদি কেউ কিছু এজ কেস উপেক্ষা করতে আগ্রহী হয় (মন্তব্যগুলি দেখুন):

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;
}

পার্শ্ব নোট: কঠোরভাবে বলতে গেলে, "দৃশ্যমানতা" প্রথমে সংজ্ঞায়িত করা দরকার। আমার ক্ষেত্রে, আমি যতক্ষণ না সমস্যা ছাড়াই এটিতে সমস্ত ডিওএম পদ্ধতি / বৈশিষ্ট্যগুলি চালাতে পারি ততক্ষণ আমি একটি উপাদান দৃশ্যমান বিবেচনা করছি (এমনকি যদি অস্বচ্ছতা 0 বা সিএসএসের দৃশ্যমান বৈশিষ্ট্য 'লুকানো' ইত্যাদি)।

— Munawwar
সূত্র
6

যদি উপাদানটি নিয়মিত দৃশ্যমান হয় (প্রদর্শন: ব্লক এবং ভিজিবিিলিটি: দৃশ্যমান) তবে কিছু প্যারেন্ট পাত্রে লুকানো থাকে, তবে আমরা এটি পরীক্ষার জন্য ক্লায়েন্টউইথ এবং ক্লায়েন্টহাইট ব্যবহার করতে পারি ।

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

প্লাঙ্কার (এখানে ক্লিক করুন)

— Vlada
সূত্র
ele.style.visibility !== 'hidden'এখানে অপ্রয়োজনীয়। সেক্ষেত্রে ক্লায়েন্টউইথ এবং ক্লায়েন্টহাইট ০ হবে
— সাবদাভিস
5

যদি আমরা কেবল দৃশ্যমানতা সনাক্তকরণের প্রাথমিক উপায়গুলি সংগ্রহ করি তবে আমাকে ভুলে যাবেন না:

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

এবং কীভাবে বৈশিষ্ট্যগুলি অর্জন করতে হয়:

element.getAttribute(attributename);

সুতরাং, আপনার উদাহরণে:

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

তবে কি? এটি এখানে কাজ করে না। কাছাকাছি তাকান এবং আপনি দেখতে পাবেন যে দৃশ্যমানতা উপাদানটির কোনও গুণ হিসাবে নয়, styleসম্পত্তি ব্যবহার করে আপডেট হচ্ছে । আপনি যা করছেন তা চেষ্টা করার সাথে এটি অনেক সমস্যার একটি। অন্যগুলির মধ্যে: আপনি নিশ্চয়তা দিতে পারবেন না যে কোনও উপাদানটিতে আসলে দেখার মতো কিছু আছে, কারণ এটির দৃশ্যমানতা, প্রদর্শন এবং অস্বচ্ছতা সবগুলিরই সঠিক মান রয়েছে। এটিতে এখনও সামগ্রীর অভাব থাকতে পারে, বা এটির দৈর্ঘ্য এবং প্রস্থের অভাব থাকতে পারে। অন্য একটি বস্তু এটি অস্পষ্ট করতে পারে। আরো বিস্তারিত জানার জন্য, একটি দ্রুত গুগল সার্চ প্রকাশিত এই , এবং এমনকি সমস্যা সমাধানের চেষ্টা করতে একটি লাইব্রেরি অন্তর্ভুক্ত করা হয়েছে। (YMMV)

শক্তিশালী জন রেজিগের অন্তর্দৃষ্টি সহ চমৎকার উত্তর সহ নিম্নলিখিতগুলি যা এই প্রশ্নের সম্ভাব্য নকল, তা পরীক্ষা করে দেখুন। যাইহোক, আপনার নির্দিষ্ট ব্যবহারের ক্ষেত্রে স্ট্যান্ডার্ডটি থেকে কিছুটা আলাদা, সুতরাং আমি পতাকাঙ্কণ থেকে বিরত থাকব:

(সম্পাদনা করুন: ওপি তাঁর স্ক্র্যাপিং পৃষ্ঠাগুলি বলছে, তাদের তৈরি করছে না, তাই প্রয়োগযোগ্য নয়) আরও ভাল বিকল্প? মডেল বৈশিষ্ট্যগুলিতে উপাদানের দৃশ্যমানতার সাথে আবদ্ধ করুন এবং সর্বদা সেই মডেলটিতে দৃশ্যমানতা কন্টিনজেন্ট করুন, এনজি-শো দিয়ে অ্যাংুলার যেমন করেন। আপনি যে কোনও সরঞ্জাম ব্যবহার করে তা করতে পারেন: কৌণিক, সরল জেএস, যাই হোক না কেন। আরও ভাল, আপনি সময়ের সাথে সাথে DOM বাস্তবায়ন পরিবর্তন করতে পারেন তবে আপনি সর্বদা DOM এর পরিবর্তে মডেল থেকে রাষ্ট্রটি পড়তে সক্ষম হবেন। ডম থেকে আপনার সত্য পড়া খারাপ is এবং ধীর। মডেলটি চেক করা আরও ভাল, এবং এটি বাস্তবায়নের উপর নির্ভর করে যাতে ডিওএম রাষ্ট্রটি মডেলটির প্রতিফলন ঘটায়। (এবং সেই অনুমানটি নিশ্চিত করতে স্বয়ংক্রিয় পরীক্ষার ব্যবহার করুন))

— এক্সএমএল
সূত্র
আমি সাইটগুলি পার্সিং করছি, এটি আমার নিজের সাইটের জন্য নয় ... :)
— হোমার স্মিথ
4

গৃহীত উত্তরটি আমার পক্ষে কার্যকর হয়নি। বছর 2020 উত্তর :

1) (elem.offsetParent! == নাল) পদ্ধতি ফায়ারফক্সে দুর্দান্ত কাজ করে তবে ক্রোমে নয়। ক্রোমের জন্য "অবস্থান: স্থির;" পৃষ্ঠাটিতে দৃশ্যমান থাকলেও উপাদানটিকে অফসেট প্যারেন্ট রিটার্নটি "নাল" করে দেবে।

ডেমো:

//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) (getComputesStyle (এলেম)। ডিসপ্লে! == 'কিছুই নয়') কাজ করে না কারণ উপাদান অদৃশ্য হতে পারে কারণ বাবা এক প্রদর্শন সম্পত্তি কেউ সেট করা থাকে, 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>
স্নিপেট প্রসারিত করুন

3) (এগারো ক্লায়েন্টহাইট! == 0) । এই পদ্ধতি স্থির অবস্থান দ্বারা প্রভাবিত হয় না এবং এটি উপাদান পিতামাতার দৃশ্যমান নয় কিনা তাও পরীক্ষা করে। তবে এটিতে সিএসএস লেআউট নেই এমন সাধারণ উপাদানগুলির সাথে সমস্যা রয়েছে, এখানে আরও দেখুন

ডেমো:

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 পদ্ধতির সংমিশ্রণটি ব্যবহার করতে হবে।

— crisc82
সূত্র
3

কেবল রেফারেন্সের জন্য এটি লক্ষ্য করা উচিত getBoundingClientRect() নির্দিষ্ট ক্ষেত্রে কাজ করতে পারে।

উদাহরণস্বরূপ, একটি সাধারণ চেক যা উপাদানটি ব্যবহার করে লুকিয়ে রয়েছে display: noneতা কিছুটা দেখতে দেখতে পাওয়া যায়:

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

এটি কার্যকরও কারণ এটি শূন্য-প্রস্থ, শূন্য-উচ্চতা এবং কেসগুলিও কভার করে position: fixed। যাইহোক, এটি লুকানো উপাদানগুলির সাথে opacity: 0বা visibility: hidden(তবে নয় offsetParent) এর প্রতিবেদন করবে না ।

— দেহধারী
সূত্র
আমার পক্ষে সেরা উত্তর ... সহজ এবং কার্যকর। এবং 3 বছর পরে কোন একক উত্সাহ! "ভিড় জ্ঞান" এর মূল্য প্রদর্শন করতে এগিয়ে যায়। আমার সংস্করণ: var isVisible = el => (r => r.width && r.height)(el.getBoundingClientRect());। তারপর আমি নিম্নলিখিত পদ্ধতিতে উপাদানের অ্যারে ফিল্টার করতে পারেন: $$(sel).filter(isVisible)।
— 7vujy0f0hy
আমি এটি সবচেয়ে সহজ সমাধানটি বিকাশকারী.মোজিলা.আর.ইন.এস.
— ইউএস
ব্যবহারকারীর কাছে দৃশ্যমান হলে এটি কাজ করে না .... আপনি যদি স্ক্রোল থেকে সরিয়ে ফেলেন তবে এটি সত্যই থাকবে
— রায় ফস
3

সুতরাং আমি যা খুঁজে পেয়েছি তা হ'ল সবচেয়ে সম্ভাব্য পদ্ধতি:

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

এটি এই সত্যগুলির উপর ভিত্তি করে তৈরি করা হয়েছে:

  • একজন display: none উপাদান (এমনকি একটি নীড়যুক্ত) এর প্রস্থ বা উচ্চতাও নেই।
  • visiblityহয় hiddenএমনকি নেস্টেড উপাদানের জন্য।

সুতরাং কোন offsetParentপিতামাতার রয়েছে তা পরীক্ষা করার জন্য DOM ট্রিতে পরীক্ষা বা লুপ আপ করার দরকার নেই visibility: hidden। এটি আই 9 9 তেও কাজ করা উচিত।

আপনি যুক্তি দিতে পারেন opacity: 0এবং ভেঙে পড়া উপাদানগুলির (প্রস্থ রয়েছে তবে উচ্চতা নেই - বা ভিসা বিপরীতে) সত্যই দৃশ্যমান নয়। তবে তারপরে আবার সেগুলি গোপন বলে বলা হয় না।

— Tokimon
সূত্র
3

ওহাদ নাভনের উত্তরটিতে কিছুটা সংযোজন।

যদি উপাদানটির কেন্দ্র অন্য উপাদানটির সাথে থাকে তবে আমরা এটি খুঁজে পাব না।

সুতরাং উপাদানটির একটি বিন্দু দৃশ্যমান বলে প্রমাণিত হয়েছে তা নিশ্চিত করার জন্য

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;
}
— গাই মেসিকা
সূত্র
3

উপরের গুয়ু মেসিকার উত্তরের উপর উন্নতি করা , ভঙ্গ করা এবং মিথ্যা ফিরিয়ে দেওয়া যদি সেন্টার পয়েন্ট 'এক্স' হয় তবে 0 টি উপাদানটি ভুল হিসাবে ডান দিকের দৃষ্টিতে যেতে পারে। এখানে একটি ঠিক আছে:

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;
}
— ইস্রায়েল
সূত্র
2

Http://code.jquery.com/jquery-1.11.1.js এর jQuery কোডটিতে একটি আইএসডিন পরম রয়েছে

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. জিনডেক্সের ভিত্তিতে অন্যান্য উপাদানগুলির আড়ালে থাকা উপাদানগুলি
  2. স্বচ্ছতার সাথে উপাদানগুলি তাদের অদৃশ্য করে তোলে
  3. উপাদানগুলি পর্দার বাইরে অবস্থিত (যেমন বাম: -1000px)
  4. দৃশ্যমানতার সাথে উপাদানগুলি: লুকানো
  5. প্রদর্শন সহ উপাদানগুলি: কোনওটি নয়
  6. কোন দৃশ্যমান পাঠ্য বা উপ উপাদান সহ উপাদানসমূহ
  7. উচ্চতা বা প্রস্থ সহ উপাদানগুলি 0 তে সেট করুন
— স্কট ইজু
সূত্র
0

কয়েকটি অনুরূপ উপাদানের মধ্যে কেবলমাত্র দৃশ্যমান হিসাবে খুঁজে পেতে আমি এখানে কোড লিখেছি এবং 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");
    }
  }
— উল্লিখিত না
সূত্র
0

এটি আমিই করেছি:

এইচটিএমএল এবং সিএসএস: ডিফল্টরূপে উপাদান লুকানো তৈরি করে

<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>
— আজাস জানশার
সূত্র
-1

দৃশ্যমানতা সহ সমস্ত CSS বৈশিষ্ট্যগুলির জন্য এটি নির্ধারণের এটি একটি উপায়:

এইচটিএমএল:

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

CSS:

#element
{
visibility:hidden;
}

জাভাস্ক্রিপ্ট:

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

এটি যে কোনও CSS সম্পত্তির জন্য কাজ করে এবং অত্যন্ত বহুমুখী এবং নির্ভরযোগ্য।

— উইলিয়াম গ্রিন
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.