জাভাস্ক্রিপ্ট সহ উপাদান সিএসএস প্রদর্শন পরীক্ষা করুন

Question

কোনও উপাদানটির সিএসএস display == blockবা noneজাভাস্ক্রিপ্ট ব্যবহার করছে কিনা তা পরীক্ষা করা সম্ভব ?

Answer 1

যেমন sdleihssirhc নীচে বলেছে, যদি উপাদানটি displayউত্তরাধিকার সূত্রে প্রাপ্ত হয় বা কোনও সিএসএস বিধি দ্বারা নির্দিষ্ট করা হচ্ছে, আপনাকে তার গণিত শৈলীটি পেতে হবে :

return window.getComputedStyle(element, null).display;

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

console.log(document.getElementById('someIDThatExists').style.display);

আপনি একটি স্ট্রিং মান দিতে হবে।

Comments

যদি এটি ইনলাইন সিএসএস না থাকে?

— jscriPoint

সরলতার জন্য, কেন সবসময় গণনা শৈলী পাওয়া যায় না?

— ক্যাড গ্যাল্ট

কি currentStyle? এটি কখনও শুনেনি, পরীক্ষা করেও document.body.currentStyleকিছুই পেয়েছে (অবাক হয় নি)

— vsync

@vsync (এবং ভবিষ্যতের রেফারেন্সের জন্য) এমডিএন অনুসারে এটি ইন্টারনেট এক্সপ্লোরারের পুরানো সংস্করণের মালিকানাধীন সম্পত্তি।

— ব্যবহারকারী 202729

মন্তব্যের জন্য ধন্যবাদ। আধুনিক ওয়েবের জন্য উত্তর আপডেট হয়েছে।

— ড্যান ডেভিস ব্র্যাকেট

Answer 2

যদি স্টাইলটি ইনলাইন বা জাভাস্ক্রিপ্ট সহ ঘোষিত হয় তবে আপনি কেবলমাত্র styleবস্তুটিতে আসতে পারেন:

return element.style.display === 'block';

অন্যথায়, আপনাকে গণনা করা স্টাইলটি পেতে হবে এবং ব্রাউজারের অসঙ্গতি রয়েছে। আইই একটি সাধারণ currentStyleঅবজেক্ট ব্যবহার করে তবে অন্য প্রত্যেকে একটি পদ্ধতি ব্যবহার করে:

return element.currentStyle ? element.currentStyle.display :
                              getComputedStyle(element, null).display;

nullFirefox সংস্করণ 3 এবং নিচে প্রয়োজন ছিল।

Comments

এই ক্ষেত্রে এই == হওয়া উচিত নয়?

— কাই কিং

@ কাই ট্রিপল ইক্যুট টাইপ জোর করে না। ক্রকফোর্ড ব্যাখ্যা করেছেন কেন , বিভাগে " ===এবং !==অপারেটরগুলি"।

— sdleihssirhc

এটা বেশ আকর্ষণীয়। মজার বিষয় কীভাবে এতোগুলি প্রোগ্রামিংয়ের পরে এই জাতীয় কিছু বিজ্ঞপ্তি থেকে বাঁচতে পারে। আমি সর্বদা এই পরামর্শটি গ্রহণ করেছিলাম যে === কঠোর বুলিয়ান ছিল। জানা ভাল.

— কাই কিং

@ কাই: এখানে ব্যবহার ===না করে ব্যবহার করতে সমস্যা ==নেই, তবে সমানভাবে কোনও লাভ নেই। উভয় অপারেন্ডগুলি স্ট্রিং হওয়ার গ্যারান্টিযুক্ত, সুতরাং উভয় অপারেটর হুবহু একই পদক্ষেপগুলি সম্পাদন করে।

— টিম ডাউন

@hippietrail এবং প্রায় 10 বছর পরে (2019-10-27) এখনও সমস্যা আছে। এমডিএন কী বলেছে তা

— ফিলিপ আলামেদা এ

Answer 3

JQuery এর জন্য, আপনি কি এরকম বোঝাতে চান?

$('#object').css('display');

আপনি এটি এটি পরীক্ষা করতে পারেন:

if($('#object').css('display') === 'block')
{
    //do something
}
else
{
    //something else
}

Comments

উত্তরের জটিলতা এড়িয়ে চলুন। আমি জানি যে jQuery কিছুটা স্ট্যান্ডার্ড হয়ে উঠছে, তবে কোনও উপাদানের প্রদর্শন শৈলীর পরীক্ষা করার জন্য একটি পুরো ফ্রেমওয়ার্ক যুক্ত করার কোনও কারণ নেই।

— zzzzBov

হ্যাঁ তবে আমি এটি করেছি কারণ অন্য প্রত্যেকেই কাঁচা জাভাস্ক্রিপ্টের উত্তর দিয়েছিল, তাই যদি তিনি jquery ব্যবহার করছেন তবে নির্দিষ্ট না করে তবে পোস্টটিতে কিছুটা ব্যবহার হবে

— কাই কিং

Answer 4

এই উত্তরটি আপনি যা চান ঠিক তা নয় তবে এটি কিছু ক্ষেত্রে কার্যকর হতে পারে। যদি আপনি জানেন যে উপাদানটির প্রদর্শিত হওয়ার সময় কিছু মাত্রা থাকে তবে আপনি এটি ব্যবহার করতে পারেন:

var hasDisplayNone = (element.offsetHeight === 0 && element.offsetWidth === 0);

সম্পাদনা: সিএসএস displayসম্পত্তি সরাসরি যাচাই করার চেয়ে কেন এটি ভাল হতে পারে ? কারণ আপনার সমস্ত অভিভাবক উপাদানগুলি পরীক্ষা করার দরকার নেই। যদি কিছু মূল উপাদান থাকে তবে display: noneএর বাচ্চাগুলি খুব লুকানো রয়েছে তবে এখনও রয়েছে element.style.display !== 'none'।

Comments

আসলে, এটি দরকারী।

— জোনাটাস ওয়াকার 24'17

Answer 5

হ্যাঁ.

var displayValue = document.getElementById('yourid').style.display;

Answer 6

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

if (document.getElementById("elementId").style.display == 'block') { 
  alert('this Element is block'); 
}

Answer 7

এটি সরল জাভাস্ক্রিপ্টের সাথে দৃশ্যমান কিনা তা জানতে, প্রদর্শন সম্পত্তিটি 'কোনওটিই নয়' কিনা তা পরীক্ষা করুন ('ব্লক' এর জন্য পরীক্ষা করবেন না, এটি ফাঁকা বা 'ইনলাইন' হতে পারে এবং এখনও দৃশ্যমান হতে পারে):

var isVisible = (elt.style.display != "none");

আপনি jQuery ব্যবহার করে থাকেন, আপনি পরিবর্তে এটি ব্যবহার করতে পারেন:

var isVisible = $elt.is(":visible");

Answer 8

খাঁটি জাভাস্ক্রিপ্টের সাহায্যে আপনি style.displayসম্পত্তিটি পরীক্ষা করতে পারেন । JQuery এর সাথে আপনি ব্যবহার করতে পারেন$('#id').css('display')

Answer 9

আপনি উদাহরণস্বরূপ jQuery দিয়ে এটি পরীক্ষা করতে পারেন:

$("#elementID").css('display');

এটি এই উপাদানটির প্রদর্শন সম্পত্তি সম্পর্কিত তথ্য সহ স্ট্রিংটি ফিরিয়ে দেবে।