প্রতিটি অ্যাপ্লিকেশন বা ওয়েবপৃষ্ঠার জন্য পাঠ্য হল সবচেয়ে গুরুত্বপূর্ণ এবং সবচেয়ে দৃশ্যমান সম্পদ, পাঠ্যের ব্যবহার ছাড়া নির্মাতা তার চিন্তাভাবনা সম্পূর্ণরূপে প্রকাশ করতে বা সঠিকভাবে তথ্য সরবরাহ করতে পারে না। এর প্রয়োজনীয়তা এবং গুরুত্বের কারণে, এটির স্টাইলিং বেশিরভাগ বিকাশকারীদের জন্য একটি দুঃস্বপ্ন হয়ে ওঠে। স্ট্যাটিক টেক্সটের জন্য, CSS বৈশিষ্ট্য এবং এর কাঠামো অনেক সাহায্য করে কিন্তু তবুও, একটি বৈশিষ্ট্যের প্রয়োজন আছে যা গতিশীলভাবে শৈলীতে প্রয়োগ করা যেতে পারে। সৌভাগ্যবশত, এই সম্পত্তি জাভাস্ক্রিপ্ট দ্বারা সরবরাহ করা হয়েছে যার নাম “ টেক্সট ডেকোরেশন ”
এই ব্লগটি টেক্সট ডেকোরেশন প্রপার্টির মাধ্যমে HTML এলিমেন্টের উপর শৈলী প্রয়োগ করার পদ্ধতি প্রদান করবে।
এইচটিএমএল ডম স্টাইল টেক্সট ডেকোরেশন প্রপার্টি ব্যবহার করে কীভাবে শৈলী প্রয়োগ করবেন?
DOM শৈলী ' টেক্সট ডেকোরেশন 'সম্পত্তি মূলত যোগ করার মত স্টাইলিং সম্পাদন করে' আন্ডারলাইন', 'ওভারলাইন', 'লাইন-থ্রু', এবং 'ব্লিঙ্ক' একটি নির্বাচিত উপাদানের উপরে। এই সম্পত্তি যখন সেট করা হয় “ কোনটি ” ডিফল্ট স্টাইলিংকে সরিয়ে দেয় যা সেই উপাদানটির উপর অ্যাঙ্কর ট্যাগের মতো প্রয়োগ করা হয়।
বাক্য গঠন
DOM শৈলী টেক্সট ডেকোরেশন সম্পত্তির জন্য সিনট্যাক্স হল:
eleObj শৈলী . টেক্সট ডেকোরেশন = 'কোনও নয়|ওভারলাইন|ব্লিঙ্ক|আন্ডারলাইন|প্রাথমিক
'কে বরাদ্দ করা যেতে পারে এমন মানগুলি সম্পর্কে একটি দ্রুত ধারণা পেতে নীচের টেবিলটি দেখুন টেক্সট ডেকোরেশন 'সম্পত্তি:
| মান | ব্যাখ্যা |
|---|---|
| কোনটি | সমস্ত পূর্ব-সংজ্ঞায়িত স্টাইলিং অপসারণ করে পাঠ্যকে প্লেইন ফরম্যাটে রূপান্তর করুন; এটা ডিফল্ট। |
| ওভারলাইন | নির্বাচিত পাঠ্যের উপরে বা উপরে একটি লাইন সন্নিবেশ করান। |
| পলক | টেক্সট ব্লিঙ্ক করে কিন্তু এটি সব ওয়েব ব্রাউজার দ্বারা সমর্থিত নয়। |
| আন্ডারলাইন | এটি নির্বাচিত পাঠ্যের নীচে বা নীচে লাইনটি রাখে। |
| প্রাথমিক | প্রয়োগকৃত সম্পত্তিকে তার ডিফল্ট মান সেট করুন যা আমাদের ক্ষেত্রে কিছুই নয়। |
| লাইন-থ্রু | পাঠ্যের কেন্দ্রে অর্থাৎ পাঠ্যের মাঝখানে লাইনটি রাখুন। |
| উত্তরাধিকারী | মূল বা মূল উপাদানে প্রয়োগ করা সম্পত্তি উত্তরাধিকারসূত্রে পাওয়া যায়। |
এখন, এর প্রতিটি মানের জন্য বাস্তবায়ন প্রক্রিয়া এবং পাঠ্যের উপর এর প্রভাবের দিকে নজর দেওয়া যাক। টেক্সট ডেকোরেশন 'সম্পত্তি।
উদাহরণ 1: 'টেক্সট ডেকোরেশন = কোনটি নয়' সম্পত্তি
এর বাস্তব বাস্তবায়ন ' টেক্সট ডেকোরেশন 'সম্পত্তির একটি মান আছে' কোনটি নীচের কোডে ব্যাখ্যা করা হবে:
< শরীর >
< কেন্দ্র >
< h1 শৈলী = 'রঙ: ক্যাডেটব্লু;' > লিনাক্স < / h1 >
< বোতাম অনক্লিক = 'প্রয়োগকারী()' > প্রয়োগকারী < / বোতাম >
< পি > যখন textDecoration সম্পত্তির মান কোনটিতে সেট করা হয় না: < / পি >
< h3 আইডি = 'ব্যবহারের ক্ষেত্রে' শৈলী = 'টেক্সট-সজ্জা: ওভারলাইন;' > টার্গেটেড এলিমেন্ট < / h3 >
< / কেন্দ্র >
< লিপি >
ফাংশন প্রয়োগকারী() {
document.getElementById('useCase').style.textDecoration = 'কিছুই নয়';
}
< / লিপি >
< / শরীর >
উপরে বর্ণিত কোডের ব্যাখ্যা:
- প্রথমে, একটি '< ব্যবহার করুন বোতাম >' একটি বোতাম তৈরি করতে ট্যাগ করুন এবং এটিকে একটি ইভেন্ট লিসেনার বরাদ্দ করুন ' অনক্লিক ” এই ইভেন্ট শ্রোতা “নামক একটি জাভাস্ক্রিপ্ট ফাংশন ট্রিগার করে প্রয়োগকারী ”
- এর পরে, একটি লক্ষ্যযুক্ত উপাদান তৈরি করুন ' h3 'এবং এটিকে 'এর একটি অনন্য আইডি বরাদ্দ করুন ব্যবহারের ক্ষেত্রে ” এছাড়াও, CSS প্রয়োগ করুন ' পাঠ্য-সজ্জা 'সম্পত্তি এর একটি মান আছে' ওভারলাইন 'এর সাহায্যে' শৈলী ” বৈশিষ্ট্য।
- এখন লিখুন ' প্রয়োগকারী ()' ফাংশন বডি এবং এর আইডির মাধ্যমে লক্ষ্যযুক্ত উপাদান নির্বাচন করুন ' ব্যবহারের ক্ষেত্রে 'এবং শৈলী সংযুক্ত করুন' টেক্সট ডেকোরেশন 'সম্পত্তি।
- এর পরে, সম্পত্তিটির একটি মান নির্ধারণ করুন “ কোনটি ” উপাদানের উপর যে কোনো প্রাক-প্রয়োগিত পাঠ্য-সজ্জা স্টাইলিং অপসারণ করতে।
উপরের কোডটি কার্যকর করার পরে ওয়েবপৃষ্ঠাটির দৃশ্য:
আউটপুট দেখায় যে প্রি-স্টাইলিং টার্গেটেড এলিমেন্টে প্রয়োগ করা হয় সেটিকে 'এর একটি মান নির্ধারণ করে সরিয়ে দেওয়া হয় কোনটি ”
উদাহরণ 2: 'টেক্সট ডেকোরেশন = প্রাথমিক' সম্পত্তি
নীচের কোড স্নিপেটটি 'এর বাস্তবায়নকে চিত্রিত করে টেক্সট ডেকোরেশন 'সম্পত্তি যখন 'এর মান প্রাথমিক 'এটি নিযুক্ত করা হয়েছে:
< লিপি >ফাংশন প্রয়োগকারী ( ) {
নথি getElementById ( 'ব্যবহারের ক্ষেত্রে' ) . শৈলী . টেক্সট ডেকোরেশন = 'প্রাথমিক' ;
}
লিপি >
উপরের কোড কম্পাইলেশনের পরে উত্পন্ন আউটপুট নীচে দেখানো হয়েছে:
উপরের আউটপুটটি দেখায় যে পাঠ্য সজ্জার মান তার ডিফল্ট মানতে সেট করা হয়েছে যা ' কোনটি এবং তাই সমস্ত প্রাক-স্টাইল ফিরিয়ে দেওয়া হয়েছে।
উদাহরণ 3: 'টেক্সট ডেকোরেশন = ওভারলাইন' সম্পত্তি
নীচের কোডটি 'এর ব্যবহারিক বাস্তবায়ন দেখায় টেক্সট ডেকোরেশন 'সম্পত্তি যখন 'এর মান ওভারলাইন ' এটি প্রদান করা হয়:
< শরীর >< কেন্দ্র >
< h1 শৈলী = 'রঙ: ক্যাডেটব্লু;' > লিনাক্স < / h1 >
< বোতাম অনক্লিক = 'প্রয়োগকারী()' > প্রয়োগকারী < / বোতাম >
< পি > যখন textDecoration সম্পত্তির মান ওভারলাইনে সেট করা হয়: < / পি >
< h3 আইডি = 'ব্যবহারের ক্ষেত্রে' > টার্গেটেড এলিমেন্ট < / h3 >
< / কেন্দ্র >
< লিপি >
ফাংশন প্রয়োগকারী() {
document.getElementById('useCase').style.textDecoration = 'ওভারলাইন';
}
< / লিপি >
< / শরীর >
উপরের কোডের ব্যাখ্যা নিচে দেওয়া হল:
- প্রথমত, ' বোতাম' এবং 'h3 ” উপাদান একই পদ্ধতিতে তৈরি করা হয় এবং CSS প্রপার্টি যা এর উপর প্রয়োগ করা হয় 'h3' উপাদান এখন সরানো হয়েছে।
- এরপর, ভিতরে ' প্রয়োগকারী ' ফাংশনটি লক্ষ্যযুক্ত উপাদান নির্বাচন করা হয় এবং ' টেক্সট ডেকোরেশন 'সম্পত্তির একটি মান আছে' ওভারলাইন ” উপাদানটিতে বরাদ্দ করা হয়েছে।
উপরের কোডটি কার্যকর করার পরে আউটপুট নীচে প্রদর্শিত হয়:
আউটপুট 'এর প্রভাব দেখায়' টেক্সট ডেকোরেশন = ওভারলাইন ' টেক্সট উপর সম্পত্তি.
উদাহরণ 4: 'টেক্সট ডেকোরেশন = আন্ডারলাইন' প্রপার্টি
পাঠ্যের ব্যবহারিক বাস্তবায়ন যখন “এর মান আন্ডারলাইন 'কে বরাদ্দ করা হয়েছে' টেক্সট ডেকোরেশন 'সম্পত্তি নীচে বর্ণিত হয়েছে:
< লিপি >ফাংশন প্রয়োগকারী ( ) {
নথি getElementById ( 'ব্যবহারের ক্ষেত্রে' ) . শৈলী . টেক্সট ডেকোরেশন = 'আন্ডারলাইন' ;
}
লিপি >
সংকলনের পরে, আউটপুটটি এইরকম দেখায়:
আউটপুট দেখায় যে লাইনটি পাঠ্যের নীচে যোগ করা হয়েছে।
উদাহরণ 5: 'টেক্সট ডেকোরেশন = লাইন-থ্রু' প্রপার্টি
এর ভিজ্যুয়াল বাস্তবায়ন ' টেক্সট ডেকোরেশন 'মূল্য বিশিষ্ট সম্পত্তি' লাইনের মাধ্যমে 'নীচে দেখানো হয়েছে:
< লিপি >ফাংশন প্রয়োগকারী ( ) {
নথি getElementById ( 'ব্যবহারের ক্ষেত্রে' ) . শৈলী . টেক্সট ডেকোরেশন = 'রেখার মাধ্যমে' ;
}
লিপি >
উপরের কোডের জন্য উত্পন্ন আউটপুট নীচে প্রদর্শিত হয়:
আউটপুট 'এর দ্বারা সম্পন্ন প্রভাব দেখায়' লাইনের মাধ্যমে লক্ষ্যযুক্ত উপাদান পাঠ্যের উপরে।
উপসংহার
HTML DOM শৈলী ' টেক্সট ডেকোরেশন টেক্সট উপাদানে গতিশীল স্টাইলিং সঞ্চালনের জন্য জাভাস্ক্রিপ্টের মাধ্যমে এইচটিএমএল উপাদানের স্টাইলিং নিয়ে বিশেষভাবে কাজ করে। এটিতে একাধিক মান বরাদ্দ করা যেতে পারে ' টেক্সট ডেকোরেশন ” স্টাইলিং এর বিভিন্ন বৈচিত্র সম্পাদন করতে। এই মানগুলি হল ' কোনটিই নয়”, “ওভারলাইন”, “আন্ডারলাইন”, “লাইন-থ্রু”, “প্রাথমিক”, “ব্লিঙ্ক” এবং “ইনহেরিট ” এই ব্লগটি সফলভাবে ব্যাখ্যা করেছে যে প্রক্রিয়াটির মাধ্যমে বিকাশকারী টেক্সট ডেকোরেশন সম্পত্তি ব্যবহার করে শৈলী প্রয়োগ করতে পারে।