تغییر Style از طریق DOM در JavaScript :
در جاوا اسکریپت، می‌توانیم با استفاده از DOM، سبک‌های CSS را تغییر دهیم. این عملکرد می‌تواند به عنوان یکی از راه‌هایی برای دستیابی به انعطاف‌پذیری در طراحی وب‌سایت‌ها باشد. در این مقاله، به توضیح نحوه تغییر Style از طریق DOM در جاوا اسکریپت می‌پردازیم.
DOM یا Document Object Model، یک مدل سازماندهی مستندات HTML یا XML است که از طریق جاوا اسکریپت قابل دسترسی است. با استفاده از DOM، می‌توانیم کنترل کاملی بر روی ساختار و محتوای صفحه وب داشته باشیم و عملیات متعددی از جمله افزودن، حذف، تغییر، خواندن و جابجایی المان‌های HTML، CSS و جاوا اسکریپت را انجام دهیم.
در اینجا، به نحوه تغییر Style یک المان HTML با استفاده از DOM پرداخته می‌شود. ما می‌توانیم با استفاده از DOM، مجموعه‌ای از ویژگی‌های Style را که برای المان HTML تعریف شده‌اند، تغییر دهیم. به عنوان مثال، می‌توانیم رنگ پس‌زمینه یک المان HTML را تغییر دهیم.
برای تغییر Style یک المان HTML، ابتدا باید المان مورد نظر را در DOM پیدا کنیم. برای این منظور، می‌توانیم از توابعی چون getElementById، getElementsByClassName و getElementsByTagName استفاده کنیم. سپس با استفاده از ویژگی style، می‌توانیم تغییرات مورد نظر را انجام دهیم.
در ادامه، یک مثال ساده از تغییر Style یک المان HTML با استفاده از DOM نشان داده شده است:
HTML:
“`
“`
JavaScript:
“`
// پیدا کردن المان HTML
var myDiv = document.getElementById(“myDiv”);
// تغییر Style
myDiv.style.backgroundColor = “blue”;
myDiv.style.color = “white”;
“`
در این مثال، ابتدا المان HTML با شناسه “myDiv” در DOM پیدا شده است. سپس با استفاده از ویژگی style، رنگ پس‌زمینه و رنگ متن المان تغییر داده شده‌اند.
در نتیجه، با استفاده از DOM و ویژگی style، می‌توانیم به سادگی Style المان‌های HTML را تغییر دهیم. این عملکرد می‌تواند به صورت پویا در زمان اجرا انجام شود و انعطاف‌پذیری بیشتری در طراحی صفحات وب فراهم کند.
