මූලද්‍රව්‍යයක් jQuery හි සැඟවී ඇත්දැයි පරීක්ෂා කරන්නේ කෙසේද?

කාර්යයන් භාවිතා මූලද්රව්යයක් පිළිබඳ ජනතාවගේ වමා එය කළ හැකි ද .hide(), .show()හෝ .toggle()?

මූලද්‍රව්‍යයක් visibleහෝ තිබේදැයි ඔබ පරීක්ෂා කරන්නේ hiddenකෙසේද?

ප්‍රශ්නය තනි මූලද්‍රව්‍යයකට යොමු වන බැවින්, මෙම කේතය වඩාත් සුදුසු විය හැකිය:

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

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

එය twernt ගේ යෝජනාවට සමාන ය , නමුත් තනි මූලද්‍රව්‍යයකට අදාළ වේ; එය jQuery නිතර අසන පැන වල නිර්දේශිත ඇල්ගොරිතමයට ගැලපේ .

තෝරාගත් මූලද්‍රව්‍යය වෙනත් මූලද්‍රව්‍යයක්, තේරීම් කාරකයක් හෝ ඕනෑම jQuery වස්තුවක් සමඟ පරීක්ෂා කිරීමට අපි jQuery ගේ () භාවිතා කරමු. ගැලපීමක් සොයා ගැනීම සඳහා මෙම ක්‍රමය DOM මූලද්‍රව්‍ය ඔස්සේ ගමන් කරයි, එය සම්මත පරාමිතිය තෘප්තිමත් කරයි. තරඟයක් තිබේ නම් එය සත්‍ය වනු ඇත, එසේ නොමැතිනම් අසත්‍යය ආපසු එවන්න.

ඔබට hiddenතේරීම් කාරකය භාවිතා කළ හැකිය :

// Matches all elements that are hidden
$('element:hidden')

සහ visibleතේරීම්කරු:

// Matches all elements that are visible
$('element:visible')

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: hidden?" . වත් :visibleහෝ :hiddenඔවුන් දෙදෙනාම ලේඛගතකිරීම අනුව ප්රදර්ශනය සොයන ලෙස, මෙම කටයුතු කරනු ඇත. මට තීරණය කළ හැකි තාක් දුරට, CSS දෘශ්‍යතාව හැසිරවීමට තේරීම් කාරයෙක් නොමැත. මෙන්න මම එය විසඳූ ආකාරය (සම්මත jQuery තේරීම් කරන්නන්, වඩාත් ensed නීභූත වාක්‍ය ඛණ්ඩයක් තිබිය හැක):

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

සිට මම කොහොමද ටොගල අංගයක් රාජ්ය තීරණය කරන්නේ කෙසේද?

:visibleසහ :hiddenතේරීම් භාවිතා කිරීමෙන් මූලද්‍රව්‍යයක් බිඳ වැටී ඇත්දැයි ඔබට තීරණය කළ හැකිය .

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');

හුදෙක් ඔබ එහි සැඟවීම් මත පදනම් වූ අංගයක් මත කටයුතු කරන්නේ නම්, ඔබ ඇතුලත් කර ගත හැක :visibleහෝ :hiddenඑම තේරීම් ප්රකාශනයක්. උදාහරණයක් වශයෙන්:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');

බොහෝ විට යමක් දෘශ්‍යමානද නැද්ද යන්න පරීක්ෂා කිරීමේදී, ඔබ වහාම ඉදිරියට ගොස් ඒ සමඟ වෙනත් දෙයක් කිරීමට යන්නේ ය. jQuery දම්වැල මෙය පහසු කරයි.

එබැවින් ඔබට තේරීම් කාරකයක් තිබේ නම් සහ ඔබට යම් ක්‍රියාමාර්ගයක් ගැනීමට අවශ්‍ය වන්නේ දෘශ්‍යමාන හෝ සැඟවුණු නම් පමණි, ඔබට භාවිතා කිරීමට filter(":visible")හෝ filter(":hidden")අනුගමනය කිරීමට අවශ්‍ය ක්‍රියාමාර්ගය සමඟ එය බැඳ තැබිය හැකිය.

එබැවින් ifප්‍රකාශයක් වෙනුවට , මේ වගේ:

if ($('#btnUpdate').is(":visible"))
{
     $('#btnUpdate').animate({ width: "toggle" });   // Hide button
}

හෝ වඩා කාර්යක්ෂම, නමුත් වඩාත් කැත:

var button = $('#btnUpdate');
if (button.is(":visible"))
{
     button.animate({ width: "toggle" });   // Hide button
}

ඔබට ඒ සියල්ල එක පේළියකින් කළ හැකිය:

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });

මෙම :visibleඅනුව තේරීම් එම jQuery ප්රලේඛනය :

• ඒවායේ CSS displayඅගයක් ඇත none.
• ඒවා සමඟ ආකෘති මූලද්‍රව්‍ය වේ type="hidden".
• ඒවායේ පළල සහ උස පැහැදිලිවම 0 ලෙස සකසා ඇත.
• මුතුන් මිත්තෙකුගේ මූලද්රව්යයක් සඟවා ඇත, එබැවින් මූලද්රව්යය පිටුවෙහි නොපෙන්වයි.

මූලද්රව්ය visibility: hiddenහෝ opacity: 0ඔවුන් තවමත් සැකැස්ම තුළ ඉඩක් පරිභෝජනය සිට, දෘශ්ය ලෙස සලකයි.

මෙය සමහර අවස්ථාවල ප්‍රයෝජනවත් වන අතර අනෙක් ඒවායින් නිෂ් less ල වේ, මන්ද display != noneදෙමව්පියන්ගේ දෘශ්‍යතාව නොසලකා හරිමින් ( ) මූලද්‍රව්‍යය දෘශ්‍යමාන දැයි පරීක්ෂා කර බැලීමට ඔබට අවශ්‍ය නම්, එසේ .css("display") == 'none'කිරීම වේගවත් වනවා පමණක් නොව දෘශ්‍යතා පරීක්‍ෂණය නිවැරදිව ලබා දෙනු ඇත.

දර්ශනය වෙනුවට දෘශ්‍යතාව පරීක්ෂා කිරීමට ඔබට අවශ්‍ය නම්, ඔබ භාවිතා කළ යුත්තේ : .css("visibility") == "hidden".

ද සැලකිල්ලට ගත අතිරේක jQuery සටහන් :

:visibleCSQ පිරිවිතරයේ කොටසක් නොවන jQuery දිගුවක් වන නිසා , භාවිතා කරන විමසුම් වලට :visibleස්වදේශික DOM querySelectorAll()ක්‍රමය මඟින් සපයනු ලබන කාර්ය සාධනය ඉහළ නැංවිය නොහැක . :visibleමූලද්‍රව්‍ය තෝරාගැනීමේදී හොඳම කාර්ය සාධනය ලබා ගැනීම සඳහා, පළමුව පිරිසිදු CSS තේරීමක් භාවිතා කරමින් මූලද්‍රව්‍ය තෝරන්න, ඉන්පසු භාවිතා කරන්න .filter(":visible").

එසේම, ඔබ කාර්ය සාධනය ගැන සැලකිලිමත් වන්නේ නම්, ඔබ දැන් පරීක්ෂා කර බැලිය යුතුය දැන් ඔබ මාව දකිනවාද… කාර්ය සාධනය පෙන්වන්න / සඟවන්න (2010-05-04). මූලද්රව්ය පෙන්වීමට සහ සැඟවීමට වෙනත් ක්රම භාවිතා කරන්න.

මෙය මා වෙනුවෙන් ක්‍රියාත්මක වන අතර, මම භාවිතා කරන්නේ show()සහ hide()මගේ දිව සැඟවීමට / දෘශ්‍යමාන කිරීමට ය:

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

කොහොමද අංගයක් සැඟවීම් සහ සියළු ක්රියා ;

මූලද්රව්යයක් සමඟ සැඟවිය හැකිය display:none, visibility:hiddenහෝ opacity:0. එම ක්‍රම අතර වෙනස:

• display:none මූලද්රව්යය සඟවයි, එය කිසිදු ඉඩක් නොගනී;
• 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();
  });

සරල ජාවාස්ක්‍රිප්ට් භාවිතයෙන් ඔබට මෙය කළ හැකිය:

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. කැදැලි මූලද්රව්ය සඳහා ක්රියා කරයි

3. CSS සහ පේළිගත ශෛලීන් සඳහා ක්‍රියා කරයි

4. රාමුවක් අවශ්ය නොවේ

මම CSS පන්තිය භාවිතා කරමි .hide { display: none!important; } .

සැඟවීමට / පෙන්වීමට, මම අමතන්න .addClass("hide")/.removeClass("hide"). දෘශ්‍යතාව පරීක්ෂා කිරීම සඳහා, මම භාවිතා කරමි.hasClass("hide") .

ඔබ භාවිතා කිරීමට .toggle()හෝ .animate()ක්‍රම භාවිතා කිරීමට අදහස් නොකරන්නේ නම්, මූලද්‍රව්‍ය පරීක්ෂා කිරීමට / සැඟවීමට / පෙන්වීමට එය සරල හා පැහැදිලි ක්‍රමයකි .

ආදර්ශන සබැඳිය

$('#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="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png" alt="" width="300"/>

මූලාශ්රය:

බ්ලොගර් ප්ලග් එන් ප්ලේ - jQuery මෙවලම් සහ විජට්: මූලද්‍රව්‍යය සැඟවී ඇත්දැයි හෝ jQuery භාවිතයෙන් දෘශ්‍යමාන වන්නේ කෙසේදැයි බලන්න

යමෙකුට සරලව hiddenහෝ visibleගුණාංග භාවිතා කළ හැකිය , වැනි:

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

හෝ ඔබ සමඟ එම සරල හැකි වනුයේ පහත සඳහන් වේ.

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

ebdivලෙස සැකසිය යුතුය style="display:none;". එය ප්‍රදර්ශනය සහ සැඟවීම යන දෙකටම ක්‍රියා කරයි:

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

ඔබ සැලකිල්ලට ගත යුතු තවත් පිළිතුරක් නම්, ඔබ මූලද්‍රව්‍යයක් සඟවන්නේ නම්, ඔබ jQuery භාවිතා කළ යුතුය , නමුත් ඇත්ත වශයෙන්ම එය සැඟවීම වෙනුවට, ඔබ මුළු මූලද්‍රව්‍යයම ඉවත් කරයි, නමුත් ඔබ එහි HTML අන්තර්ගතය සහ ටැගය jQuery විචල්‍යයකට පිටපත් කර , පසුව ඔබ කළ යුත්තේ තිරය මත එවැනි ටැගයක් තිබේදැයි පරීක්ෂා කිරීම පමණි if (!$('#thetagname').length).

:hiddenJQuery හි තේරීම් කාරකයට එරෙහිව මූලද්‍රව්‍යයක් පරික්ෂා කිරීමේදී ඔවුන්ගේ ළමා මූලද්‍රව්‍ය දෘශ්‍යමාන වුවද නිරපේක්ෂ ස්ථානගත කළ මූලද්‍රව්‍යයක් සැඟවුණු බව හඳුනාගත හැකිය .

මෙය මුලින් ම තරමක් ප්‍රති-බුද්ධිමත් බවක් පෙනේ - 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

මෙය ක්‍රියාත්මක විය හැකිය:

expect($("#message_div").css("display")).toBe("none");

උදාහරණයක්:

$(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>

එය නොපෙනේ දැයි පරීක්ෂා කිරීමට මම භාවිතා කරන්නේ !:

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

නැතහොත් පහත දැක්වෙන්නේ ද සෑම් ය, ඔබට කිහිප වතාවක් අවශ්‍ය වූ විට වඩා හොඳ කාර්ය සාධනයක් ලබා ගැනීම සඳහා විචල්‍යයක් තුළ jQuery තේරීම සුරකිනු ඇත:

var $book = $('#book')

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

පන්ති ටොගල කිරීම භාවිතා කරන්න, විලාස සංස්කරණය නොවේ. . .

"සැඟවී" මූලද්රව්ය සඳහා නම් කරන ලද පන්ති භාවිතා කිරීම පහසු වන අතර වඩාත් කාර්යක්ෂම ක්රමයකි. Display'කිසිවක්' නැති ශෛලියක් සහිත 'සැඟවුණු' පන්තියක් ටොගල කිරීමෙන් එම ශෛලිය කෙලින්ම සංස්කරණය කිරීමට වඩා වේගවත් වනු ඇත. එකම කොටසක දෘශ්‍යමාන / සැඟවුණු මූලද්‍රව්‍ය දෙකක් හැරවීම මම ස්ටැක් පිටාර ගැලීමේ ප්‍රශ්නයේ දී ඉතා හොඳින් විස්තර කළෙමි .

ජාවාස්ක්‍රිප්ට් හොඳම භාවිතයන් සහ ප්‍රශස්තකරණය

ගූගල් ඉදිරිපස ඉංජිනේරු නිකලස් සකාස් විසින් ගූගල් ටෙක් කතාවක සැබවින්ම ප්‍රබුද්ධ වීඩියෝවක් මෙන්න:

• ඔබේ ජාවාස්ක්‍රිප්ට් වේගවත් කරන්න (යූ ටියුබ්)

ඇඩ්බ්ලොකර් සඳහා දෘශ්‍ය චෙක්පත භාවිතා කිරීමේ උදාහරණය සක්‍රීය කර ඇත:

$(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 අවහිර කරන හැඳුනුම්පතකි. එබැවින් එය දෘශ්‍යමාන දැයි පරීක්ෂා කිරීමෙන් ඔබට ඇඩ් බ්ලෝකර් සක්‍රිය කර ඇත්දැයි හඳුනාගත හැකිය.

ඇත්තෙන්ම, උදාහරණ කිසිවක් මට ගැළපෙන්නේ නැත, එබැවින් මම මගේම ලිවීමි.

පරීක්ෂණ (ඉන්ටර්නෙට් එක්ස්ප්ලෝරර්ගේ සහය නැත filter:alpha):

අ) ලේඛනය සැඟවී නොමැතිදැයි පරීක්ෂා කරන්න

b) මූලද්‍රව්‍යයක ශුන්‍ය පළල / උස / පාරාන්ධතාව හෝ display:none/ visibility:hiddenපේළිගත ශෛලීන් තිබේදැයි පරීක්ෂා කරන්න

ඇ) මූලද්‍රව්‍යයේ කේන්ද්‍රය (සෑම පික්සල් / කොනක්ම පරීක්ෂා කිරීමට වඩා වේගවත් බැවින්) වෙනත් මූලද්‍රව්‍යයන් විසින් සඟවා නොමැතිදැයි පරීක්ෂා කරන්න (සහ සියලු මුතුන් මිත්තන්, උදාහරණයක් ලෙස: overflow:hidden / අනුචලනය / එක් මූලද්‍රව්‍යයක් තවත් එකක්) හෝ තිර දාරවලින් නොමැතිදැයි පරීක්ෂා කරන්න.

)) මූලද්‍රව්‍යයක ශුන්‍ය පළල / උස / පාරාන්ධතාව හෝ display:none/ දෘශ්‍යතාව තිබේදැයි පරීක්ෂා කරන්න : ගණනය කළ මෝස්තර වලින් සැඟවී ඇත (සියලුම මුතුන් මිත්තන් අතර)

පරීක්ෂා කර ඇත

ඇන්ඩ්‍රොයිඩ් 4.4 (ස්වදේශීය බ්‍රව්සරය / ක්‍රෝම් / ෆයර්ෆොක්ස්), ෆයර්ෆොක්ස් (වින්ඩෝස් / මැක්), ක්‍රෝම් (වින්ඩෝස් / මැක්), ඔපෙරා (වින්ඩෝස් ප්‍රෙස්ටෝ / මැක් වෙබ්කිට්), ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් (ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 5-11 ලේඛන ක්‍රම + ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 8 අතථ්‍ය යන්ත්‍රය), සහ සෆාරි (වින්ඩෝස් / මැක් / iOS).

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

ඔබ දෙකම පරීක්ෂා කළ යුතුය ... දර්ශනය මෙන්ම දෘශ්‍යතාව:

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

අපි පරික්ෂා කරන්නේ නම් $(this).is(":visible"), jQuery විසින් දේවල් දෙකම ස්වයංක්‍රීයව පරික්ෂා කරයි.

සමහර විට ඔබට මේ වගේ දෙයක් කළ හැකිය

$(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>

බූලියන් අගයක් පරික්ෂා කිරීමෙන් දෘශ්‍යතාව සරලව පරීක්ෂා කරන්න, වැනි:

if (this.hidden === false) {
    // Your code
}

සෑම කාර්යයක් සඳහාම මම මෙම කේතය භාවිතා කළෙමි. එසේ නොමැතිනම් ඔබට is(':visible')මූලද්‍රව්‍යයක දෘශ්‍යතාව පරීක්ෂා කිරීම සඳහා භාවිතා කළ හැකිය .

මන්ද 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;
    }
});

නමුත් මූලද්‍රව්‍යයේ CSS පහත සඳහන් ආකාරයට සමාන නම් කුමක් කළ යුතුද?

.element{
    position: absolute;left:-9999;    
}

එබැවින් Stack Overflow ප්‍රශ්නයට මෙම පිළිතුර මූලද්‍රව්‍යයක් තිරයෙන් පිටත තිබේදැයි පරීක්ෂා කරන්නේ කෙසේද යන්න සලකා බැලිය යුතුය.

මූලද්‍රව්‍යය UI හි පෙන්වා තිබේද නැද්ද යන්න මැන බැලීම සඳහා දෘශ්‍යතාව / දර්ශන ගුණාංග පරීක්ෂා කිරීම සඳහා ශ්‍රිතයක් නිර්මාණය කළ හැකිය.

function checkUIElementVisible(element) {
    return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}

වැඩ කරන ෆිදෙල්

මූලද්‍රව්‍යයේ තත්වය පරීක්ෂා කර එය ටොගල් කිරීම සඳහා ත්‍රිමාණ කොන්දේසි සහිත ප්‍රකාශනයක් ද මෙහි ඇත:

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });

if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}