JavaScript দিয়ে HTML DOM – CSS পরিবর্তন (Changing CSS)
ওয়েবপেজের উপাদানের স্টাইল (CSS) পরিবর্তন করার জন্য JavaScript খুবই শক্তিশালী একটি টুল। আপনি HTML DOM এর মাধ্যমে যেকোনো এলিমেন্টের CSS প্রপার্টি সরাসরি পরিবর্তন করতে পারেন এবং এর মাধ্যমে ডাইনামিক, ইন্টারেক্টিভ ওয়েবপেজ তৈরি করতে পারেন।
CSS পরিবর্তনের প্রধান পদ্ধতিসমূহ
- inline style পরিবর্তন করা — JavaScript দিয়ে সরাসরি style প্রপার্টির মান দেওয়া।
- class যোগ/অপসারণ — classList API ব্যবহার করে class যোগ বা অপসারণ।
- CSS Stylesheet পরিবর্তন — CSS rules পরিবর্তন বা নতুন rules যোগ করা।
১. Inline Style পরিবর্তন
যেকোনো HTML এলিমেন্টের style প্রপার্টি ব্যবহার করে সরাসরি CSS পরিবর্তন করা যায়।
// HTML
<div id="box" style="width: 150px; height: 150px; background-color: lightblue;">বক্স</div>
<button onclick="changeColor()">রঙ পরিবর্তন করো</button>
// JavaScript
function changeColor() {
const box = document.getElementById('box');
box.style.backgroundColor = 'tomato'; // ব্যাকগ্রাউন্ড রঙ পরিবর্তন
box.style.width = '200px'; // প্রস্থ পরিবর্তন
box.style.borderRadius = '15px'; // কোণ গোলাকার করা
}
কোডের ব্যাখ্যা:
document.getElementById('box')দিয়ে ডিভ এলিমেন্টটি সিলেক্ট করেছি।style.backgroundColorপ্রপার্টির মাধ্যমে ব্যাকগ্রাউন্ড রঙ পরিবর্তন করেছি।- অন্যান্য CSS প্রপার্টিও একইভাবে পরিবর্তন করা যায়, যেমন
width,borderRadius,fontSizeইত্যাদি।
২. classList API দিয়ে CSS Class যোগ/অপসারণ
এলিমেন্টের class পরিবর্তন করাও CSS পরিবর্তনের একটি ভালো পদ্ধতি, এতে কোড পরিষ্কার থাকে এবং একই CSS class বারবার ব্যবহার করা যায়।
// HTML
<style>
.red-bg { background-color: red; color: white; }
.big-text { font-size: 24px; font-weight: bold; }
</style>
<div id="text">আমি স্টাইল পরিবর্তন হতে চাই!</div>
<button onclick="toggleStyles()">স্টাইল টগল করো</button>
// JavaScript
function toggleStyles() {
const el = document.getElementById('text');
el.classList.toggle('red-bg'); // red-bg ক্লাস যোগ বা অপসারণ
el.classList.toggle('big-text'); // big-text ক্লাস যোগ বা অপসারণ
}
কোডের ব্যাখ্যা:
classList.toggle()ব্যবহার করে ক্লাস যোগ বা অপসারণ করা হয়।- CSS ক্লাস দিয়ে একাধিক স্টাইল একসাথে নিয়ন্ত্রণ করা সহজ হয়।
৩. JavaScript দিয়ে Stylesheet Rules পরিবর্তন
JavaScript দিয়ে CSS Stylesheet-এর নিয়ম (Rules) পরিবর্তন করাও সম্ভব। এর জন্য আপনি DOM এর মাধ্যমে Stylesheet অবজেক্ট অ্যাক্সেস করে নির্দিষ্ট নিয়মের CSS প্রপার্টি আপডেট করতে পারেন।
কীভাবে কাজ করে:
- প্রথমে Stylesheet অবজেক্ট পেতে হবে, যা সাধারণত
document.styleSheetsএর মাধ্যমে পাওয়া যায়। - তারপর নির্দিষ্ট Stylesheet থেকে
cssRules(বা ব্রাউজার অনুযায়ীrules) অ্যাক্সেস করতে হবে। - প্রত্যেক
cssRuleএর মধ্যেstyleপ্রপার্টি থাকে যেখান থেকে CSS প্রপার্টি পরিবর্তন করা যায়।
উদাহরণ:
// HTML এর মধ্যে একটি style tag
<style id="dynamicStyles">
.highlight {
background-color: yellow;
color: black;
font-weight: normal;
}
</style>
<div class="highlight">আমি হাইলাইটেড টেক্সট</div>
<button onclick="changeHighlightStyle()">হাইলাইট স্টাইল পরিবর্তন করো</button>
// JavaScript
function changeHighlightStyle() {
// style element থেকে stylesheet অবজেক্ট পাওয়া
const styleSheet = document.getElementById('dynamicStyles').sheet;
// stylesheet এর প্রথম নিয়ম (rule) নেওয়া
const firstRule = styleSheet.cssRules[0];
// style এর প্রপার্টি পরিবর্তন
firstRule.style.backgroundColor = 'orange';
firstRule.style.color = 'white';
firstRule.style.fontWeight = 'bold';
}
কোড ব্যাখ্যা:
- স্টাইল ট্যাগে
.highlightক্লাসের জন্য CSS লিখা আছে। - JavaScript দিয়ে আমরা ঐ style ট্যাগ থেকে stylesheet অবজেক্ট নিচ্ছি।
- তারপর প্রথম CSS রুল (যেটা
.highlight) এর style প্রপার্টিতে যেকোনো CSS মান পরিবর্তন করছি। - বাটনে ক্লিক করলে এই পরিবর্তন প্রয়োগ হবে এবং হাইলাইটেড ডিভের রঙ ও ফন্টওজন পরিবর্তিত হবে।
সাবধানতা ও ব্রাউজার কম্প্যাটিবিলিটি:
- সাধারণত
cssRulesঅধিকাংশ ব্রাউজারে কাজ করে, তবে Internet Explorer এrulesব্যবহার করতে হতে পারে। - যদি Stylesheet সিএসএস ফাইল থেকে লোড করা হয় (external), তাহলে সিকিউরিটি কারণে (CORS policy) direct পরিবর্তন নাও হতে পারে। ইন্টারনাল style ট্যাগ হলে সহজে পরিবর্তন করা যায়।