JavaScript দিয়ে CSS স্টাইল যেমন রং, ফন্ট সাইজ ইত্যাদি getElementById(), getElementByClassName() ইত্যাদি মেথড ব্যবহার করে পরিবর্তন করা যায়।
নিচের উদাহরণে getElementById() মেথড ব্যবহার করে এলিমেন্টের ফন্ট স্টাইল এবং ফন্ট সাইজ পরিবর্তন করা হয়েছে।
উদাহরণ-১
নিচের উদাহরণে, "style.fontSize" এবং "style.fontStyle" স্টাইল কমান্ড ব্যবহার করে প্রদত্ত টেক্সটের ফন্ট সাইজ "35px" এবং ফন্ট স্টাইল "italic" করা হয়েছে।
<html> <body> <p id="size">JavaScript can change the style of an HTML element.</p> <p id="style">JavaScript can change the style of an HTML element.</p> <button type="button" onclick="document.getElementById('size').style.fontSize='35px'">Size</button> <button type="button" onclick="document.getElementById('style') .style.fontStyle='italic'">Style</button> </body> </html>উপরোক্ত কোড এক্সিকিউট করলে ব্রাউজারে নিচের চিত্রটি দেখাবে।
উপরের বাটনগুলো ক্লিক করলে প্রথম টেক্সটের ফন্ট সাইজ এবং দ্বিতীয় টেক্সটের ফন্ট স্টাইল পরিবর্তন হয়ে যাবে।
আউটপুট
উদাহরণ-২
নিচের উদাহরণে "style.color" কমান্ড ব্যবহার করে টেক্সটের রং নীল (blue) করা হয়েছে।
<html> <body> <p id="color">JavaScript can change the color of an HTML element.</p> <button type="button" onclick="document.getElementById('color'). style.color='blue'">Color Me</button> </body> </html>উপরোক্ত কোড এক্সিকিউট করলে ব্রাউজার উইন্ডোতে নিচের চিত্রটি দেখাবে।
"Color Me" বাটনে ক্লিক করলে টেক্সটের রং নীল হয়ে যাবে।
আউটপুট
