সিলেক্টর ভিজিবল
সিলেক্টর :visible পৃষ্ঠার সমস্ত দৃশ্যমান
এলিমেন্ট নির্বাচন করে।
visibility: hidden বা
opacity: 0 সহ এলিমেন্টগুলি দৃশ্যমান হিসাবে বিবেচিত হয়, কারণ তারা লেআউটে জায়গা দখল করে।
এলিমেন্টগুলি দৃশ্যমান হিসাবে বিবেচিত হয় যদি তারা ডকুমেন্টে জায়গা দখল করে।
দৃশ্যমান এলিমেন্টগুলির উচ্চতা
এবং প্রস্থ 0 থেকে ভিন্ন।
যেহেতু :visible CSS স্পেসিফিকেশনের অন্তর্গত নয়,
আধুনিক ব্রাউজারে পারফরম্যান্স উন্নত করার জন্য
প্রথমে খাঁটি CSS-সিলেক্টর দিয়ে এলিমেন্ট ফিল্টার করা ভাল,
এবং তারপর .filter(':visible') প্রয়োগ করুন।
অন্য পদ্ধতি ব্যবহার করে এলিমেন্টের দৃশ্যমানতা ট্র্যাক করা,
উদাহরণস্বরূপ, ক্লাস ব্যবহার করে,
ভাল পারফরম্যান্স দিতে পারে।
সিনট্যাক্স
আমরা এভাবে দৃশ্যমান এলিমেন্ট নির্বাচন করি:
$(':visible');
উদাহরণ
চলুন বাটনে ক্লিক করে অদৃশ্য বর্গক্ষেত্রগুলি দেখাই। "দৃশ্যমান" বর্গক্ষেত্রগুলিতে ক্লিক করলে তাদের ব্যাকগ্রাউন্ড হলুদ হয়ে যাবে:
<button id="show">show</button>
<div></div>
<div style="display:none;"></div>
<div></div>
<div></div>
<div style="display:none;"></div>
div {
width: 40px;
height: 40px;
margin: 5px;
border: 2px outset green;
float: left;
}
$('div:visible').click(function() {
$(this).css('background', 'yellow');
});
$('#show').click(function() {
$('div:hidden').show('slow');
});
