সিলেক্টর ভিজিবল

সিলেক্টর :visible পৃষ্ঠার সমস্ত দৃশ্যমান এলিমেন্ট নির্বাচন করে। visibility: hidden বা opacity: 0 সহ এলিমেন্টগুলি দৃশ্যমান হিসাবে বিবেচিত হয়, কারণ তারা লেআউটে জায়গা দখল করে। এলিমেন্টগুলি দৃশ্যমান হিসাবে বিবেচিত হয় যদি তারা ডকুমেন্টে জায়গা দখল করে। দৃশ্যমান এলিমেন্টগুলির উচ্চতা এবং প্রস্থ 0 থেকে ভিন্ন। যেহেতু :visible CSS স্পেসিফিকেশনের অন্তর্গত নয়, আধুনিক ব্রাউজারে পারফরম্যান্স উন্নত করার জন্য প্রথমে খাঁটি CSS-সিলেক্টর দিয়ে এলিমেন্ট ফিল্টার করা ভাল, এবং তারপর .filter(':visible') প্রয়োগ করুন। অন্য পদ্ধতি ব্যবহার করে এলিমেন্টের দৃশ্যমানতা ট্র্যাক করা, উদাহরণস্বরূপ, ক্লাস ব্যবহার করে, ভাল পারফরম্যান্স দিতে পারে।

সিনট্যাক্স

আমরা এভাবে দৃশ্যমান এলিমেন্ট নির্বাচন করি:

javascript$(':visible');

উদাহরণ

চলুন বাটনে ক্লিক করে অদৃশ্য বর্গক্ষেত্রগুলি দেখাই। "দৃশ্যমান" বর্গক্ষেত্রগুলিতে ক্লিক করলে তাদের ব্যাকগ্রাউন্ড হলুদ হয়ে যাবে:

html<button id="show">show</button>
<div></div>
<div style="display:none;"></div>
<div></div>
<div></div>
<div style="display:none;"></div>

cssdiv {
  width: 40px;
  height: 40px;
  margin: 5px;
  border: 2px outset green;
  float: left;
}

javascript$('div:visible').click(function() {
  $(this).css('background', 'yellow');
});

$('#show').click(function() {
  $('div:hidden').show('slow');
});

আরও দেখুন