سری آموزش جاوا اسکریپت: دستکاری سبک عناصر

در این پست یاد خواهیم گرفت که چگونه استایل عناصر HTML را با استفاده از ویژگی های استایل تغییر دهیم.

اصلاح سبک های درون خطی

را style ویژگی به شما امکان می دهد سبک درون خطی یک عنصر را تنظیم کنید.

نحو

element.style

به عنوان مثال اگر می خواهید تنظیم کنید background-color از یک عنصر می توانید آن را به این صورت انجام دهید:

<p>I am a paragraph</p>

let p = document.querySelector("p");

p.style.backgroundColor =' red';

ویژگی های سبک زیادی وجود دارد که می توانید با استفاده از این نحو تنظیم کنید مانند:

• زمینه
• پس زمینه پیوست
• رنگ پس زمینه
• تصویر پس زمینه
• موقعیت پس زمینه
• پس زمینه تکرار
• مرز
• حاشیه پایین
• borderBottomColor
• borderBottomStyle
• borderBottomWidth
• رنگ لبه
• مرز چپ
• borderLeftColor
• borderLeftStyle
• borderLeftWidth
• مرز راست
• borderRightColor
• borderRightStyle
• borderRightWidth

لیست بالا تنها چند مورد از املاک موجود است، اما تعداد بیشتری نیز وجود دارد.

ویژگی className

را className ویژگی یک عنصر رشته ای حاوی لیستی از کلاس های CSS عنصر را برمی گرداند که با فاصله از هم جدا شده اند.

نحو

element.className;

بیایید به یک مثال نگاه کنیم:

<ul id="list" class="main-list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

const list = document.getElementById("list");

console.log(list.className);

ویژگی classList

را classList ویژگی فقط خواندنی است و مجموعه ای زنده از کلاس های CSS را برمی گرداند.
با وجود اینکه classList فقط خواندنی است، هنوز هم می‌توان برای دستکاری کلاس‌های موجود در آن استفاده کرد.

دریافت کلاس های یک عنصر

<ul id="list" class="main-list 3-item list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

const list = document.getElementById("list");

for( let classes of list.classList){
  console.log(classes);
}

یک کلاس به یک عنصر اضافه کنید

<ul id="list" class="main-list 3-item list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

const list = document.getElementById("list");

list.classList.add("newClass", "another");

for( let classes of list.classList){
  console.log(classes);
}

حذف کلاس یک عنصر

<ul id="list" class="main-list 3-item list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

const list = document.getElementById("list");

list.classList.remove('main-list');

for( let classes of list.classList){
  console.log(classes);
}

بررسی کنید که آیا عنصر کلاس خاصی دارد یا خیر

این ویژگی یک Boolean برمی گرداند. اگر عنصر دارای آن کلاس خاص باشد، true را برمی گرداند در غیر این صورت false را برمی گرداند.

<ul id="list" class="main-list 3-item list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

const list = document.getElementById("list");

console.log(list.classList.contains("main-list"));

تغییر ویژگی

را toggle() متد یک نام کلاس را در صورت وجود از لیست کلاس یک عنصر حذف می کند و در صورت عدم وجود نام کلاس را در لیست کلاس قرار می دهد.

<ul id="list" class="main-list 3-item list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

const list = document.getElementById("list");

list.classList.toggle("main-list");

for( let classes of list.classList){
  console.log(classes);
}