HTML শৈলী পরিবর্তন
এইচটিএমএল ডম জাভাস্ক্রিপ্টকে এইচটিএমএল উপাদানের স্টাইল করার অনুমতি দেয়।
একটি HTML উপাদানের শৈলী পরিবর্তন করতে, এই সিনট্যাক্স ব্যবহার করুন:
document.getElementById(id).style.property= new styleউদাহরণ
একটি <p> উপাদানের শৈলী পরিবর্তন করে:
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
</body>
</html>ঘটনা ব্যবহার করে
HTML DOM আপনাকে কোড চালানোর অনুমতি দেয় যখন কোনো ঘটনা ঘটে।
HTML উপাদানগুলিতে "যখন কিছু ঘটে" ব্রাউজার দ্বারা ইভেন্টগুলি তৈরি হয়:
- একটি উপাদান ক্লিক করা হয়
- পাতা লোড হয়
- ইনপুট ক্ষেত্র পরিবর্তন করা হয়
আপনি এই টিউটোরিয়ালের পরবর্তী অধ্যায়ে ঘটনা সম্পর্কে আরও শিখবেন।
উদাহরণ
ব্যবহারকারী যখন একটি বোতামে ক্লিক করেন, তখন id="id1" দিয়ে HTML উপাদানের শৈলী পরিবর্তন করুন:
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">My Heading 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>
</body>
</html>আরো উদাহরণ
উদাহরণ
কিভাবে একটি উপাদান অদৃশ্য করা উপাদান প্রদর্শন বা না?
<input type="button" value="Hide text" onclick="document.getElementById('p1').style.visibility='hidden'">
<input type="button" value="Show text" onclick="document.getElementById('p1').style.visibility='visible'">টিপ:
style.visibility='hidden' , style.display='none' .
ইন্টারেক্টিভ উদাহরণ
নীচের বোতামগুলিতে ক্লিক করে শৈলী পরিবর্তনগুলি দেখুন:
ইন্টারেক্টিভ প্রদর্শনের উপাদান
নীচের বোতামগুলি ব্যবহার করে এই উপাদানটির শৈলী পরিবর্তন করুন৷
জাভাস্ক্রিপ্ট কোড ব্যবহৃত:
function changeColor(color) {
document.getElementById('demoElement').style.color = color;
}
function toggleVisibility() {
const element = document.getElementById('demoElement');
if (element.style.visibility === 'hidden') {
element.style.visibility = 'visible';
} else {
element.style.visibility = 'hidden';
}
}
function changeBackground(color) {
document.getElementById('demoElement').style.backgroundColor = color;
}
function resetStyle() {
const element = document.getElementById('demoElement');
element.style = '';
}HTML DOM শৈলী অবজেক্ট রেফারেন্স
সমস্ত HTML DOM শৈলী বৈশিষ্ট্যের জন্য, আমাদের সম্পূর্ণ HTML DOM শৈলী অবজেক্ট রেফারেন্স দেখুন।
টেক্সট বৈশিষ্ট্য
color, fontSize, fontFamily, fontWeight, textAlign, textDecoration
বক্স বৈশিষ্ট্য
width, height, padding, margin, border, borderRadius
পটভূমি বৈশিষ্ট্য
backgroundColor, backgroundImage, backgroundSize, backgroundPosition
বৈশিষ্ট্য প্রদর্শন করুন
display, visibility, opacity, zIndex, position, top, left