آموزش جاوا اسکریپت – جلسه 15 – تعریف استایل و کلاس CSS

در جلسه 14 از آموزش جامع جاوا اسکریپت، به مبحث جذاب انیمیشن و انواع آن در جاوا اسکریپت پرداختیم. در این جلسه قصد داریم نحوه استایل نویسی در javascript را آموزش دهیم.

روش های تعریف استایل های CSS:

همانطور که می دانید یک المان را به دو روش می توان استایل دهی کرد:

تعریف یک کلاس CSS و استفاده از اتریبیوت class در المان:

<div class="...">

تعریف مستقیم property های css برای المان با استفاده از اتریبیوت:

<div style="...">

جاوا اسکریپت می تواند هر دوی style و class را تغییر دهد. ما همیشه باید استفاده از اتریبیوت class را به style ترجیح دهیم. اما مواقعی وجود دارد که چاره ای نداریم که از اتریبیوت style برای تعریف cssاستفاده کنیم. مانند وقتیکه می خواهیم مختصات یک المان را بصورت داینامیک در جاوا اسکریپت محاسبه کنیم و آن را بصورت استایل برای المان تعریف کنیم:

let top = /* complex calculations */;
let left = /* complex calculations */;

elem.style.left = left; // e.g '123px', calculated at run-time
elem.style.top = top; // e.g '456px'

در سایر موارد توصیه می شود استایل های موردنظر را در یک فایل css تعریف کنید و از اتریبیوت class در المان استفاده کنید.

className و classList:

className:

تغییر نام کلاس (class name) یکی از کارهای رایج در اسکریپت نویسی می باشد. با استفاده از className می توان مقدار اتریبیوت class یک المان را در جاوااسکریپت بدست آورد. بعنوان مثال:

<body class="main page">
  <script>
    alert(document.body.className); // main page
  </script>
</body>

با assign کردن یک مقدار به عبارت elem.className کل رشته کلاس ها را جایگزین می کند. اما گاهی اوقات می خواهیم فقط یک کلاس را اضافه کنیم یا حذف کنیم. برای اینکار یک property دیگر داریم بنام elem.classList

بعنوان مثال:

<body class="main page">
  <script>
    // add a class
    document.body.classList.add('article');

    alert(document.body.className); // main page article
  </script>
</body>

در این مثال یک کلاس جدید بنام article به لیست کلاس های قبلی المان اضافه کردیم. لیست نهایی کلاس ها به شکل main page article خواهد شد.

بنابراین می توانیم بر اساس نیاز خود از یکی از property های فوق (className یا classList) برای درج/حذف یک کلاس css در المان استفاده کنیم.

متدهای classList:

elem.classList.add/remove(“class”) : حذف یا اضافه کردن یک کلاس css
elem.classList.toggle(“class”) : درج کلاس css اگر از قبل وجود نداشته باشد و در غیر اینصورت حذف آن.
elem.classList.contains(“class”) : چک می کند که آیا کلاس موردنظر برای المان تعریف شده است با خیر.

علاوه بر موارد فوق، classList قابل پیمایش است و بصورت زیر می توان از ساختار for..of استفاده کرد:

<body class="main page">
  <script>
    for (let name of document.body.classList) {
      alert(name); // main, and then page
    }
  </script>
</body>

استایل المان (Element Style):

برای تغییر مقدار اتریبیوت style در یک المان، می توان elem.style را تعریف کرد. مثلا برای تغییر صفت width المان داریم: elem.style.width

اگر صفت css بصورت چندکلمه ای باشد، باید بصورت camelCase تعریف شود:

background-color  => elem.style.backgroundColor
z-index                    => elem.style.zIndex
border-left-width  => elem.style.borderLeftWidth

بعنوان مثال:

document.body.style.backgroundColor = prompt('background color?', 'green');

کد فوق رنگ بک گراند را بصورت یک پیغام پاپ آپ از کاربر می پرسد.

نکته: property هایی که بصورت پیشوندی تعریف می شوند، مانند –moz-border-radius- نیز بصورت camelCaseتعریف می شوند:

button.style.MozBorderRadius = '5px';
button.style.WebkitBorderRadius = '5px';

ریست کردن استایل های property:

گاهی اوقات ممکن است بخواهیم استایلی را که برای یک المان تعریف کرده ایم حذف کنیم. مثلا توسط دستور elem.style.display = “none” یک المان را مخفی کرده ایم. الان می خواهیم مجددا آن را نمایش دهیم. باید دستور elem.style.display = “” را بنویسیم

بعنوان مثال:

// if we run this code, the <body> will blink
document.body.style.display = "none"; // hide

setTimeout(() => document.body.style.display = "", 1000); // back to normal

تعریف چند استایل بطور همزمان توسط cssText:

تا اینجا استایل هایی که توسط elem.style تعریف کردیم بصورت تکی بود. مثلا elem.style.color اما اگر بخواهیم چندین استایل را در یک دستور تعریف کنیم نمی توانیم بصورت elem.style=’color: white; fontSize: 12px’ تعریف کنیم زیرا style آبجکت است و فقط خواندنی (read-only)

راهکاری که برای انجام اینکار وجود دارد استفاده از cssText بصورت زیر است:

<div id="div">Button</div>

<script>
  // we can set special style flags like "important" here
  div.style.cssText=`color: red !important;
    background-color: yellow;
    width: 100px;
    text-align: center;
  `;

  alert(div.style.cssText);
</script>

دستور cssText بندرت استفاده می شود زیرا با تعریف آن، تمام استایل های قبلی المان حذف خواهد شد.

تعریف واحد اندازه گیری مقادیر فراموش نشود:

هنگام تعریف استایل های css در javascript یادتان نرود که حتما یونیت یا واحد اندازه گیری موردنظر را تعریف کنید. مثلا نمی توان نوشت: elem.style.top=10 بلکه باید بنویسیم: elem.style.top=’10px’

بعنوان مثال:

<body>
  <script>
    // doesn't work!
    document.body.style.margin = 20;
    alert(document.body.style.margin); // '' (empty string, the assignment is ignored)

    // now add the CSS unit (px) - and it works
    document.body.style.margin = '20px';
    alert(document.body.style.margin); // 20px

    alert(document.body.style.marginTop); // 20px
    alert(document.body.style.marginLeft); // 20px
  </script>
</body>

خواندن استایل های تعریف شده توسط getComputedStyle:

تا الان یاد گرفتیم که چگونه استایل های دلخواه برای یک المان در جاوااسکریپت تعریف کنیم. اما اگر بخواهیم این استایل ها را بخوانیم باید چکار کنیم؟ بعنوان مثال می خواهیم margin و padding مربوط به یک المان را بخوانیم.

ما نمی توانیم مقدار یک property را بوسیله elem.style بدست بیاوریم. بعنوان مثال کد زیر را در نظر بگیرید:

<head>
  <style> body { color: red; margin: 5px } </style>
</head>
<body>

  The red text
  <script>
    alert(document.body.style.color); // empty
    alert(document.body.style.marginTop); // empty
  </script>
</body>

فرض کنید می خواهیم 20 پیکسل به مارجین فعلی المان اضافه کنیم. ابتدا باید مقدار حال حاضر آن را داشته باشیم.

روش انجام اینکار استفاده از getComputedStyle می باشد. فرمت استفاده از این متد بصورت زیر است:

getComputedStyle(element, [pseudo])

آرگومان element: المانی که می خواهیم استایل آن را بخوانیم.
آرگومان pseudo: اگر المان شامل سودو کد باشد مثلا ::before آنرا در این بخش تعریف می کنیم.

خروجی متد فوق آبجکتی از استایل ها می باشد.

بعنوان مثال:

<head>
  <style> body { color: red; margin: 5px } </style>
</head>
<body>

  <script>
    let computedStyle = getComputedStyle(document.body);

    // now we can read the margin and the color from it

    alert( computedStyle.marginTop ); // 5px
    alert( computedStyle.color ); // rgb(255, 0, 0)
  </script>

</body>

نکته: همیشه باید نام کامل property موردنظر را اعلام کنیم تا یک خروجی متناسب دریافت کنیم. مانند paddingLeft یا fontSize . وگرنه نتیجه دلخواه بدست نمی آید. مثلا اگر ما مقدار paddingLeft را می خواهیم و از دستور getComputedStyle(elem).padding برای گرفتن مقدار آن استفاده کنیم به نتیجه دلخواه نخواهیم رسید.

در جلسه شانزدهم از آموزش جاوا اسکریپت درباره دیزاین پترن های javascript بطور مفصل صحبت خواهیم کرد.

فهرست مطالب پنهان

1 روش های تعریف استایل های CSS:

2 className و classList:

2.1 className:

2.2 متدهای classList:

3 استایل المان (Element Style):

4 ریست کردن استایل های property:

5 تعریف چند استایل بطور همزمان توسط cssText:

5.1 تعریف واحد اندازه گیری مقادیر فراموش نشود:

5.2 خواندن استایل های تعریف شده توسط getComputedStyle: