در جاوااسکریپت، می‌توان استایل عناصر HTML را به صورت دینامیک تغییر داد تا ظاهر و طراحی صفحه وب واکنش‌گرا و تعاملی شود.

🔹 1. تغییر استایل مستقیم با style

• می‌توان هر ویژگی CSS را با element.style.property تغییر داد

let box = document.getElementById("box");
box.style.backgroundColor = "blue";
box.style.width = "200px";
box.style.height = "150px";
box.style.border = "2px solid black";

نکته: در جاوااسکریپت، ویژگی‌های CSS با camelCase نوشته می‌شوند.
مثال: background-color → backgroundColor, font-size → fontSize

🔹 2. استفاده از کلاس‌ها با classList

• اضافه کردن، حذف یا تغییر کلاس‌ها روش حرفه‌ای‌تر برای تغییر استایل است

let box = document.getElementById("box");

// اضافه کردن کلاس
box.classList.add("active");

// حذف کلاس
box.classList.remove("highlight");

// تغییر کلاس (toggle)
box.classList.toggle("visible");

// بررسی کلاس
console.log(box.classList.contains("active")); // true یا false

• با CSS، تغییرات ظاهر را در فایل stylesheet مدیریت می‌کنیم و JS تنها کلاس‌ها را تغییر می‌دهد

.active { background-color: green; }
.highlight { border: 2px solid red; }
.visible { display: block; }

🔹 3. تغییر چند ویژگی همزمان

• می‌توان از style.cssText برای تغییر چند ویژگی یکجا استفاده کرد

let box = document.getElementById("box");
box.style.cssText = "background-color: orange; width: 300px; height: 200px; border-radius: 10px;";

🔹 4. دسترسی به استایل‌های محاسبه‌شده

• با window.getComputedStyle(element) می‌توان مقدار نهایی استایل (شامل استایل CSS و inline) را دریافت کرد

let box = document.getElementById("box");
let styles = window.getComputedStyle(box);
console.log(styles.backgroundColor);
console.log(styles.width);

🔹 5. نمایش/مخفی کردن عناصر

• تغییر نمایش با display یا visibility

let box = document.getElementById("box");

// مخفی کردن
box.style.display = "none";

// نمایش دادن
box.style.display = "block";

// یا با visibility
box.style.visibility = "hidden"; // مخفی ولی فضا را نگه می‌دارد
box.style.visibility = "visible";

🔹 6. انیمیشن و تغییر تدریجی استایل

• با استفاده از transition و تغییر style، انیمیشن ساده ایجاد می‌کنیم

/* CSS */
#box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 0.5s ease;
}

// JS
let box = document.getElementById("box");
box.style.width = "200px";
box.style.backgroundColor = "blue";

✅ خلاصه

• تغییر CSS → تغییر ظاهر عناصر با style مستقیم یا classList

• element.style.property → تغییر ویژگی‌های inline

• classList.add/remove/toggle → مدیریت استایل با کلاس‌ها

• cssText → تغییر چند ویژگی همزمان

• getComputedStyle() → دسترسی به استایل نهایی عنصر

• نمایش/مخفی کردن: display و visibility

• انیمیشن ساده → با transition و تغییر style