javascript - একটি উপাদান jQuery লুকানো হয় কিনা তা আমি কিভাবে পরীক্ষা করব?




dom visibility (20)

ফাংশন ব্যবহার করে, একটি উপাদান দৃশ্যমানতা টগল করা সম্ভব। .hide() , .show() বা .toggle()

একটি উপাদান দৃশ্যমান বা লুকানো যদি আপনি কিভাবে পরীক্ষা করবে?


ক্লাস টগলিং ব্যবহার করুন, শৈলী সম্পাদনা নয়। । ।

"গোপন" উপাদানগুলির জন্য মনোনীত ক্লাসগুলি ব্যবহার করা সহজ এবং এটিও সবচেয়ে কার্যকর পদ্ধতিগুলির মধ্যে একটি। 'কোনও' এর Display শৈলী সহ 'লুকানো' শ্রেণিতে টগল করা সেই শৈলীটি সরাসরি সম্পাদনা করার চেয়ে দ্রুত সঞ্চালন করবে। আমি স্ট্যাক ওভারফ্লো প্রশ্নে বেশ সুন্দরভাবে কিছু ব্যাখ্যা করেছি একই উপাদানের দৃশ্যমান / লুকানো দুটি উপাদান চালু করা

জাভাস্ক্রিপ্ট শ্রেষ্ঠ অভ্যাস এবং অপ্টিমাইজেশান

এখানে গুগল ফ্রন্ট-এন্ড ইঞ্জিনিয়ার ইঞ্জিনিয়ার নিকোলাস জাকাসের গুগল টেক টকির সত্যিকার আলোকিত ভিডিও:


Adblocker জন্য দৃশ্যমান চেক ব্যবহার উদাহরণটি সক্রিয় করা হয়:

$(document).ready(function(){
  if(!$("#ablockercheck").is(":visible"))
    $("#ablockermsg").text("Please disable adblocker.").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ad-placement" id="ablockercheck"></div>
<div id="ablockermsg" style="display: none"></div>

"ablockercheck" একটি আইডি যা adblocker ব্লক। এটি দৃশ্যমান হলে এটি পরীক্ষা করে দেখুন যদি অ্যাডব্লকার চালু থাকে তবে আপনি এটি সনাক্ত করতে পারবেন।


আপনি উভয় চেক করতে হবে ... প্রদর্শন পাশাপাশি দৃশ্যমানতা:

if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
    // The element is not visible
} else {
    // The element is visible
}

যদি আমরা $(this).is(":visible") চেক করি, jQuery স্বয়ংক্রিয়ভাবে উভয় জিনিসগুলির জন্য চেক করে।


আপনি প্লেইন জাভাস্ক্রিপ্ট ব্যবহার করে এটি করতে পারেন:

function isRendered(domObj) {
    if ((domObj.nodeType != 1) || (domObj == document.body)) {
        return true;
    }
    if (domObj.currentStyle && domObj.currentStyle["display"] != "none" && domObj.currentStyle["visibility"] != "hidden") {
        return isRendered(domObj.parentNode);
    } else if (window.getComputedStyle) {
        var cs = document.defaultView.getComputedStyle(domObj, null);
        if (cs.getPropertyValue("display") != "none" && cs.getPropertyValue("visibility") != "hidden") {
            return isRendered(domObj.parentNode);
        }
    }
    return false;
}

নোট:

  1. সর্বত্র কাজ করে

  2. Nested উপাদান জন্য কাজ করে

  3. সিএসএস এবং ইনলাইন শৈলী জন্য কাজ করে

  4. একটি কাঠামো প্রয়োজন হয় না


আরেকটি উত্তর আপনাকে বিবেচনা করা উচিত যদি আপনি কোনও উপাদান গোপন রাখেন তবে আপনাকে অবশ্যই jQuery ব্যবহার করতে হবে, তবে এটি আসলে লুকানোর পরিবর্তে, আপনি পুরো উপাদানটি সরিয়ে ফেলুন, তবে আপনি তার HTML সামগ্রী এবং ট্যাগটিকে নিজের একটি jQuery পরিবর্তনশীলতে অনুলিপি করুন এবং তারপরে যদি আপনাকে স্ক্রিনে এমন ট্যাগ থাকে তবে স্বাভাবিকভাবেই if (!$('#thetagname').length)


উদাহরণ:

$(document).ready(function() {
  if ($("#checkme:hidden").length) {
    console.log('Hidden');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkme" class="product" style="display:none">
  <span class="itemlist"><!-- Shows Results for Fish --></span> Category:Fish
  <br>Product: Salmon Atlantic
  <br>Specie: Salmo salar
  <br>Form: Steaks
</div>


এই প্রশ্নের কোনটিই আমি বুঝতে পারছি না যে প্রশ্নটি আমি কী বুঝি, যা আমি অনুসন্ধান করছিলাম, "আমি কীভাবে জিনিসগুলি পরিচালনা করবো যা visibility: hidden ?" । উভয় :visible না :hidden এই হ্যান্ডেল করবে, কারণ তারা উভয় ডকুমেন্টেশন প্রতি প্রদর্শনের জন্য খুঁজছেন। যতদূর আমি নির্ধারণ করতে পারি, সিএসএস দৃশ্যমানতা পরিচালনা করার জন্য কোন নির্বাচক নেই। এখানে আমি কিভাবে এটি সমাধান করেছি (স্ট্যান্ডার্ড jQuery নির্বাচকরা, আরো সংকোচিত সিনট্যাক্স হতে পারে):

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});

এক সহজভাবে hidden বা visible বৈশিষ্ট্য ব্যবহার করতে পারেন, যেমন:

$('element:hidden')
$('element:visible')

অথবা আপনি নিম্নলিখিত হিসাবে একই সঙ্গে সহজ করতে পারেন।

$(element).is(":visible")

এটা দৃশ্যমান না কিনা তা পরীক্ষা করার জন্য আমি ব্যবহার করি ! :

if ( !$('#book').is(':visible')) {
    alert('#book is not visible')
}

অথবা নিচেরটি হল স্যাম, একটি পরিবর্তনশীলতে jQuery নির্বাচক সংরক্ষণ করার জন্য যখন আপনি এটি একাধিকবার প্রয়োজন তখন ভাল কর্মক্ষমতা:

var $book = $('#book')

if(!$book.is(':visible')) {
    alert('#book is not visible')
}

এটি আমার জন্য কাজ করে, এবং আমি আমার ডিভ লুকানো / দৃশ্যমান করতে show() এবং hide() লুকিয়েছি:

if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}


কিভাবে উপাদান দৃশ্যমানতা এবং jQuery কাজ করে ;

একটি উপাদান display:none সাথে লুকানো থাকতে পারে display:none , visibility:hidden বা opacity:0 । ঐ পদ্ধতির মধ্যে পার্থক্য:

  • display:none উপাদান লুকান, এবং এটি কোন স্থান গ্রহণ করা হয় না;
  • visibility:hidden উপাদান visibility:hidden , কিন্তু এটি এখনও লেআউট মধ্যে স্থান নেয়;
  • opacity:0 উপাদানটিকে "দৃশ্যমানতা: লুকানো" হিসাবে লুকিয়ে রাখে এবং এটি এখনও লেআউটটিতে স্থান নেয়; একমাত্র পার্থক্য হলো অপ্রাসঙ্গিকতাটি উপাদানটিকে স্বচ্ছভাবে স্বচ্ছ করতে দেয়।

    if ($('.target').is(':hidden')) {
      $('.target').show();
    } else {
      $('.target').hide();
    }
    if ($('.target').is(':visible')) {
      $('.target').hide();
    } else {
      $('.target').show();
    }
    
    if ($('.target-visibility').css('visibility') == 'hidden') {
      $('.target-visibility').css({
        visibility: "visible",
        display: ""
      });
    } else {
      $('.target-visibility').css({
        visibility: "hidden",
        display: ""
      });
    }
    
    if ($('.target-visibility').css('opacity') == "0") {
      $('.target-visibility').css({
        opacity: "1",
        display: ""
      });
    } else {
      $('.target-visibility').css({
        opacity: "0",
        display: ""
      });
    }
    

    দরকারী jQuery টগল পদ্ধতি:

    $('.click').click(function() {
      $('.target').toggle();
    });
    
    $('.click').click(function() {
      $('.target').slideToggle();
    });
    
    $('.click').click(function() {
      $('.target').fadeToggle();
    });
    

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

এটি প্রথমদিকে কিছুটা পাল্টা-স্বজ্ঞাত মনে হচ্ছে - যদিও jQuery ডকুমেন্টেশনের ঘনিষ্ঠ দৃষ্টিভঙ্গি প্রাসঙ্গিক তথ্য দেয়:

উপাদানগুলিকে বিভিন্ন কারণে লুকানো বলে মনে করা যেতে পারে: [...] তাদের প্রস্থ এবং উচ্চতা স্পষ্টভাবে 0 এ সেট করা হয় [...]

সুতরাং এই আসলে বক্স মডেল এবং উপাদান জন্য গণিত শৈলী সম্পর্কে জ্ঞান করে তোলে। এমনকি যদি প্রস্থ এবং উচ্চতাটি স্পষ্টভাবে 0 তে সেট না থাকে তবে সেগুলি নিখুঁতভাবে সেট করা যেতে পারে।

নিচের উদাহরণটি দেখুন:

console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false
.foo {
  position: absolute;
  left: 10px;
  top: 10px;
  background: #ff0000;
}

.bar {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  background: #0000ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
  <div class="bar"></div>
</div>

JQUERY 3.x জন্য আপডেট করুন:

JQuery 3 সঙ্গে বর্ণিত আচরণ পরিবর্তন হবে! যদি শূন্য প্রস্থ এবং / অথবা উচ্চতা সহ কোনও বিন্যাস বাক্স থাকে তবে উপাদানগুলিকে দৃশ্যমান বলে মনে করা হবে।

JQuery 3.0.0-alpha1 সহ JSFiddle:

http://jsfiddle.net/pM2q3/7/

একই জেএস তারপর এই আউটপুট আছে হবে:

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false

যেহেতু প্রশ্নটি একটি একক উপাদান বোঝায়, এই কোডটি আরও উপযুক্ত হতে পারে:

// Checks css for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible"); 

// The same works with hidden
$(element).is(":hidden"); 

Twernt এর পরামর্শ হিসাবে একই, কিন্তু একটি একক উপাদান প্রয়োগ; এবং এটি jQuery FAQ এ প্রস্তাবিত অ্যালগরিদম মিলেছে


সব পরে, কোন উদাহরণ আমাকে suits, তাই আমি আমার নিজের লিখেছেন।

পরীক্ষা (ইন্টারনেট এক্সপ্লোরার filter:alpha কোন সমর্থন নেই filter:alpha ):

একটি) নথি লুকানো না চেক করুন

বো) একটি উপাদান শূন্য প্রস্থ / উচ্চতা / অস্বচ্ছতা বা display:none আছে কিনা তা পরীক্ষা করুন display:none / visibility:hidden ইনলাইন শৈলীগুলিতে visibility:hidden

গ) উপাদানটির কেন্দ্রে (প্রতিটি পিক্সেল / কোণার পরীক্ষার তুলনায় এটি দ্রুততর কারণ) কেন তা অন্যান্য উপাদান (এবং সমস্ত পূর্বপুরুষ, উদাহরণ: overflow:hidden / স্ক্রোল / অন্য উপাদানগুলির উপর একটি উপাদান) দ্বারা overflow:hidden কিনা তা পরীক্ষা করুন অথবা স্ক্রীন প্রান্তগুলি

ঘ) কোন উপাদানটির শূন্য প্রস্থ / উচ্চতা / অস্বচ্ছতা বা display:none আছে কিনা তা পরীক্ষা করুন display:none / দৃশ্যমানতা: গণিত শৈলীগুলিতে লুকানো display:none (সমস্ত পূর্বপুরুষদের মধ্যে)

পরীক্ষা করা হয়েছে

অ্যান্ড্রয়েড 4.4 (নেটিভ ব্রাউজার / ক্রোম / ফায়ারফক্স), ফায়ারফক্স (উইন্ডোজ / ম্যাক), ক্রোম (উইন্ডোজ / ম্যাক), অপেরা (উইন্ডোজ Presto / ম্যাক ওয়েবকিট), ইন্টারনেট এক্সপ্লোরার (ইন্টারনেট এক্সপ্লোরার 5-11 ডকুমেন্ট মোড + ইন্টারনেট এক্সপ্লোরার 8 ভার্চুয়াল মেশিন), সাফারি (উইন্ডোজ / ম্যাক / আইওএস)

var is_visible = (function () {
    var x = window.pageXOffset ? window.pageXOffset + window.innerWidth - 1 : 0,
        y = window.pageYOffset ? window.pageYOffset + window.innerHeight - 1 : 0,
        relative = !!((!x && !y) || !document.elementFromPoint(x, y));
        function inside(child, parent) {
            while(child){
                if (child === parent) return true;
                child = child.parentNode;
            }
        return false;
    };
    return function (elem) {
        if (
            document.hidden ||
            elem.offsetWidth==0 ||
            elem.offsetHeight==0 ||
            elem.style.visibility=='hidden' ||
            elem.style.display=='none' ||
            elem.style.opacity===0
        ) return false;
        var rect = elem.getBoundingClientRect();
        if (relative) {
            if (!inside(document.elementFromPoint(rect.left + elem.offsetWidth/2, rect.top + elem.offsetHeight/2),elem)) return false;
        } else if (
            !inside(document.elementFromPoint(rect.left + elem.offsetWidth/2 + window.pageXOffset, rect.top + elem.offsetHeight/2 + window.pageYOffset), elem) ||
            (
                rect.top + elem.offsetHeight/2 < 0 ||
                rect.left + elem.offsetWidth/2 < 0 ||
                rect.bottom - elem.offsetHeight/2 > (window.innerHeight || document.documentElement.clientHeight) ||
                rect.right - elem.offsetWidth/2 > (window.innerWidth || document.documentElement.clientWidth)
            )
        ) return false;
        if (window.getComputedStyle || elem.currentStyle) {
            var el = elem,
                comp = null;
            while (el) {
                if (el === document) {break;} else if(!el.parentNode) return false;
                comp = window.getComputedStyle ? window.getComputedStyle(el, null) : el.currentStyle;
                if (comp && (comp.visibility=='hidden' || comp.display == 'none' || (typeof comp.opacity !=='undefined' && comp.opacity != 1))) return false;
                el = el.parentNode;
            }
        }
        return true;
    }
})();

ব্যবহারবিধি:

is_visible(elem) // boolean

হয়তো আপনি এই মত কিছু করতে পারেন

$(document).ready(function() {
   var visible = $('#tElement').is(':visible');

   if(visible) {
      alert("visible");
                    // Code
   }
   else
   {
      alert("hidden");
   }
});
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<input type="text" id="tElement" style="display:block;">Firstname</input>


Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout (যেমন jQuery: দৃশ্যমান নির্বাচক হিসাবে বর্ণনা করা হয়েছে) - আমরা এই উপায়ে উপাদানটি আসলে দৃশ্যমান কিনা তা পরীক্ষা করতে পারি:

function isElementReallyHidden (el) {
    return $(el).is(":hidden") || $(el).css("visibility") == "hidden" || $(el).css('opacity') == 0;
}

var booElementReallyShowed = !isElementReallyHidden(someEl);
$(someEl).parents().each(function () {
    if (isElementReallyHidden(this)) {
        booElementReallyShowed = false;
    }
});

ebdiv style="display:none;" সেট করা উচিত । এটি প্রদর্শন এবং লুকানোর জন্য কাজ করে:

$(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });    
});

$('#clickme').click(function() {
  $('#book').toggle('slow', function() {
    // Animation complete.
    alert($('#book').is(":visible")); //<--- TRUE if Visible False if Hidden
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">
  Click here
</div>
<img id="book" src="http://www.chromefusion.com/wp-content/uploads/2012/06/chrome-logo.jpg" alt="" />

সূত্র:

ব্লগার প্লাগ এন প্লে - jQuery সরঞ্জাম এবং উইজেট: এলিমেন্ট লুকানো বা jQuery ব্যবহার করে দৃশ্যমান কিনা তা দেখতে

jsFiddle:

JSFiddle - ipsjolly - k4wwj


if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // element is hidden
}

উপরের পদ্ধতি পিতামাতার দৃশ্যমানতা বিবেচনা করে না। পিতামাতার পাশাপাশি আপনি .is(":hidden") বা .is(":visible")

উদাহরণ স্বরূপ,

<div id="div1" style="display:none">
  <div id="div2" style="display:block">Div2</div>
</div>

উপরের পদ্ধতিটি দৃশ্যমান div2 বিবেচনা করবে যখন :visible না। কিন্তু উপরের দিকটি বেশিরভাগ ক্ষেত্রেই দরকারী হতে পারে, বিশেষ করে যখন লুকানো পিতা-মাতার মধ্যে কোনও ত্রুটির ডিভিস দৃশ্যমান থাকে কিনা তা খুঁজে বের করতে হবে যেমন শর্তে :visible কাজ করবে না।





visibility