এই নির্দেশিকা জাভাস্ক্রিপ্টে HTML DOM এলিমেন্ট 'স্টাইল' বৈশিষ্ট্যের উদ্দেশ্য এবং কাজ সম্পর্কে বিস্তারিত বর্ণনা করে।
জাভাস্ক্রিপ্টে HTML DOM এলিমেন্ট 'স্টাইল' প্রপার্টি কিভাবে কাজ করে?
HTML DOM “ শৈলী ” হল একটি পঠনযোগ্য সম্পত্তি যা সেই অনুযায়ী বরাদ্দকৃত স্টাইলিং বৈশিষ্ট্যের উপর ভিত্তি করে কাজ করে। এছাড়াও, এটি ' সিএসএসস্টাইল ঘোষণা ” অবজেক্ট যা নির্দিষ্ট HTML উপাদানের সমস্ত ইনলাইন শৈলী বৈশিষ্ট্য ধারণ করে।
বিঃদ্রঃ: 'CSSStyleDeclaration' অবজেক্টে প্রধান বিভাগে সংজ্ঞায়িত CSS স্টাইলিং বৈশিষ্ট্য রয়েছে।
সিনট্যাক্স (একটি স্টাইল প্রপার্টি সেট করুন)
উপাদান শৈলী . সম্পত্তি = মানউপরের সিনট্যাক্স অনুসারে, ' শৈলী 'সম্পত্তি শুধুমাত্র একটি প্যারামিটার সমর্থন করে' মান ” যা নির্দিষ্ট স্টাইলিং সম্পত্তির মান উপস্থাপন করে।
সিনট্যাক্স (একটি শৈলী সম্পত্তি ফেরত দিন)
উপাদান শৈলী . সম্পত্তিচলুন ব্যবহারিকভাবে 'স্টাইল' সম্পত্তির উপরোক্ত আলোচিত সিনট্যাক্সগুলি বাস্তবায়ন করি।
উদাহরণ 1: একটি বিশেষ HTML উপাদানের রঙ সেট করতে 'স্টাইল' বৈশিষ্ট্য ব্যবহার করুন
এই উদাহরণটি 'এর মৌলিক সিনট্যাক্স প্রয়োগ করে শৈলী ” প্রপার্টি “স্টাইল” প্রপার্টির মান সেট করতে যাতে নির্দিষ্ট HTML উপাদানের রঙ পরিবর্তন হয়।
HTML কোড
প্রথমে, প্রদত্ত HTML কোডের মাধ্যমে যান:
< h2 > জাভাস্ক্রিপ্টে স্টাইল প্রপার্টি ব্যবহার করুন h2 >
< h3 আইডি = 'H3' > দ্বিতীয় উপশিরোনাম। h3 >
উপরের কোড লাইনে:
- দ্য ' ” HTML ট্যাগ প্রথম উপশিরোনাম উল্লেখ করে।
- দ্য ' ” ট্যাগ একটি নির্ধারিত আইডি “H3” সহ লেভেল 3-এর দ্বিতীয় উপশিরোনাম তৈরি করে।
জাভাস্ক্রিপ্ট কোড
পরবর্তী, বর্ণিত জাভাস্ক্রিপ্ট কোড অনুসরণ করুন:
< লিপি >নথি getElementById ( 'H3' ) . শৈলী . রঙ = 'সবুজ' ;
লিপি >
উপরের কোড স্নিপেটে, ' document.getElementById() 'পদ্ধতি অন্তর্ভুক্ত অ্যাক্সেস করে' 'এর আইডির মাধ্যমে উপাদান' H3 'নির্দিষ্ট সেট করতে' রঙ 'এর মাধ্যমে উপাদানটির বৈশিষ্ট্য মান style.color 'সম্পত্তি।
আউটপুট
আউটপুট দেখায় যে লক্ষ্যযুক্ত HTML উপাদান ভিজ্যুয়াল উপস্থাপনা সেই অনুযায়ী সেট করা হয়েছে 'স্টাইল' বৈশিষ্ট্য ব্যবহার করে।
উদাহরণ 2: প্রয়োগ করা 'স্টাইল' বৈশিষ্ট্যের মান পেতে 'স্টাইল' বৈশিষ্ট্য ব্যবহার করুন
এই উদাহরণে, 'শৈলী' বৈশিষ্ট্যটি এইচটিএমএল উপাদানটির সাধারণ সিনট্যাক্স ব্যবহার করে নির্ধারিত 'শৈলী' বৈশিষ্ট্য খুঁজে বের করতে সহায়তা করে (একটি শৈলী সম্পত্তি ফেরত দিন)।
HTML কোড
HTML কোড এখানে বলা হয়েছে:
< h2 > জাভাস্ক্রিপ্টে স্টাইল প্রপার্টি ব্যবহার করুন h2 >< h3 আইডি = 'H3' শৈলী = 'পটভূমির রঙ: কমলা;' > দ্বিতীয় উপশিরোনাম পটভূমি রঙের মান হল : h3 >
< h4 আইডি = 'ডেমো' >> h4 >
এই কোডে:
- দ্য ' ” HTML ট্যাগ “স্টাইল” অ্যাট্রিবিউট ব্যবহার করে যা “
” HTML এলিমেন্টের পটভূমির রঙ সেট করে।
- দ্য ' ' ট্যাগ একটি আইডি সহ স্তর 4 এর একটি খালি উপশিরোনাম তৈরি করে ' ডেমো ”
জাভাস্ক্রিপ্ট কোড
এখন, প্রদত্ত জাভাস্ক্রিপ্ট কোডটি দেখুন:
< লিপি >const মান = নথি getElementById ( 'H3' ) . শৈলী . পেছনের রং ;
নথি getElementById ( 'ডেমো' ) . innerHTML = মান ;
লিপি >
উপরে লিখিত কোডে:
- পরিবর্তনশীল ' মান 'একটি' দিয়ে ঘোষণা করা হয় const ' কীওয়ার্ড যা প্রয়োগ করে ' document.getElementById() প্রয়োগ করা 'স্টাইল' অ্যাট্রিবিউটের মান পেতে এবং 'শৈলী' বৈশিষ্ট্যের মাধ্যমে '
' এলিমেন্টে প্রয়োগ করার জন্য তার আইডি ব্যবহার করে '
' উপাদান আনার পদ্ধতি।
- 'document.getElementById()' পদ্ধতিটি আবার যোগ করা খালি '
' উপাদানটি অ্যাক্সেস করতে এবং আনা HTML উপাদানের বিপরীতে বরাদ্দকৃত 'স্টাইল' বৈশিষ্ট্যের মান প্রদর্শন করতে এবং এটিকে 'এর মাধ্যমে একটি উপশিরোনাম হিসাবে যুক্ত করতে ব্যবহার করা হয়৷ innerHTML 'সম্পত্তি।
আউটপুট
আউটপুট উপাদানটিতে পটভূমির রঙ প্রয়োগ করে এবং সেট 'স্টাইল' বৈশিষ্ট্যের মানও সেই অনুযায়ী ফেরত দেওয়া হয়।
উপসংহার
জাভাস্ক্রিপ্ট ব্যবহার করে ' শৈলী HTML DOM এলিমেন্টের ইনলাইন 'স্টাইল' বৈশিষ্ট্য বরাদ্দ এবং ফেরত দেওয়ার জন্য বৈশিষ্ট্য। সেই অনুযায়ী পছন্দসই কার্যকারিতা প্রয়োগ করতে এটির একটি অতিরিক্ত 'মান' প্রয়োজন৷ সেট করা এবং পুনরুদ্ধার করা ছাড়াও, বিদ্যমান 'স্টাইল' বৈশিষ্ট্যটি পরিবর্তন করাও উপকারী। এই নির্দেশিকাটি HTML DOM এলিমেন্ট স্টাইল প্রপার্টির মূল উদ্দেশ্য, কাজ এবং ব্যবহারিক বাস্তবায়ন প্রদর্শন করেছে।