در این بخش از سری آموزش جاوا اسکریپت قصد داریم شما را با نحوه استایل دهی DOM در جاوا اسکریپت آشنا کنیم.
استایل دهی DOM در جاوا اسکریپت
شما می توانید برای تغییر نمایش بصری سندهای HTML بصورت داینامیک با جاوا اسکریپت استایل هایی را اعمال کنید. تقریبا می توانید تمام استایل ها همانند فونت, رنگ, حاشیه ها, پس زمینه, تراز بندی, عرض و ارتفاع, موقعیت و… را ست کنید.
ست کردن استایل خطی المان ها
استایل های خطی مستقیما روی المان خاص با خصوصیت style اعمال می شود. در جاوا اسکریپت خصوصیت style برای دریافت یا ست کردن استایل یک المان استفاده می شود.
مثال زیر به شما نحوه ست کردن رنگ و فونت یک المان با id=”intro” نشان می دهد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS Set Inline Styles Demo</title> </head> <body> <p id="intro">This is a paragraph.</p> <p>This is another paragraph.</p> <script> // Selecting element var elem = document.getElementById("intro"); // Appling styles on element elem.style.color = "blue"; elem.style.fontSize = "18px"; elem.style.fontWeight = "bold"; </script> </body> </html> |
تبدیل نام خصوصیات CSS در جاوا اسکریپت
خصوصیات زیادی از CSS مثل font-size, background-image, text-decoration و غیره دارای – در نام هستند. از آنجا که خط ربط یا همان – در جاوا اسکریپت یک اپراتور رزرو شده است و به عنوان علامت منها تفسیر می شود پس غیر ممکن است که عبارتی مثل elm.style.font-size بنویسید.
بنابراین در جاوا اسکریپت, نام های خصوصیت CSS که شامل یک یا چند خط ربط هسند حرف اول آنها به صورت حروف بزرگ تبدیل می شود. که با حذف کردن – و تبدیل به حروف بزرگ هر حرف بعد از – انجام می شود.
برای همین font-size تبدیل به fontSize و border-left-style نیز به borderLeftStyle می شود.
دریافت استایل های المان
همانند روش بالا می توانید با خصوصیت style مقدار استایل خاصی از المان را دریافت کنید.
مثال زیر به شما نحوه دریافت استایل های المان با id=”intro” نشان می دهد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS Get Element's Style Demo</title> </head> <body> <p id="intro" style="color:red; font-size:20px;">This is a paragraph.</p> <p>This is another paragraph.</p> <script> // Selecting element var elem = document.getElementById("intro"); // Getting style information from element alert(elem.style.color); // Outputs: red alert(elem.style.fontSize); // Outputs: 20px alert(elem.style.fontStyle); // Outputs nothing </script> </body> </html> |
خصوصیت style زمانی که قصد دریافت اطلاعات استایل از المان دارید, آنقدرها هم مفید نیست چرا که فقط استایل هایی که در بخش style=”” المان ست شده اند را دریافت می کند و نمی توانید استایل های دیگر مثل استایل های جاسازی (embed) شده یا استایل اعمال شده توسط فایل css خارجی را دریافت کنید.
برای دریافت تمام مقادیر خصوصیات CSS که برای رندر یک المان استفاده شده است می توانید از متد window.getComputedStyle() بهره ببرید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Get Computed Style Demo</title> <style type="text/css"> #intro { font-weight: bold; font-style: italic; } </style> </head> <body> <p id="intro" style="color:red; font-size:20px;">This is a paragraph.</p> <p>This is another paragraph.</p> <script> // Selecting element var elem = document.getElementById("intro"); // Getting computed style information var styles = window.getComputedStyle(elem); alert(styles.getPropertyValue("color")); // Outputs: rgb(255, 0, 0) alert(styles.getPropertyValue("font-size")); // Outputs: 20px alert(styles.getPropertyValue("font-weight")); // Outputs: 700 alert(styles.getPropertyValue("font-style")); // Outputs: italic </script> </body> </html> |
نکته: مقدار ۷۰۰ برای font-weight مشابه کلمه کلیدی bold است. کلمه کلید رنگ red نیز مشابه rgb(255,0,0) است.
افزودن کلاس های CSS به المان ها
شما می توانید مقدار کلاس های المان HTML را با خصوصیت className دریافت یا ست کنید.
از آنجا که class یک کلمه رزرو شده در جاوا اسکریپت است, بنابراین جاوا اسکریپت از خصوصیت className برای اشاره به مقدار مشخصه class در html استفاده می کند.
مثال زیر به شما نحوه افزودن کلاس یا جایگزین کردن کلاس فعلی به المان <div> که id=”info” را دارد استفاده می کند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS Add or Replace CSS Classes Demo</title> <style> .highlight { background: yellow; } </style> </head> <body> <div id="info" class="disabled">Something very important!</div> <script> // Selecting element var elem = document.getElementById("info"); elem.className = "note"; // Add or replace all classes with note class elem.className += " highlight"; // Add a new class highlight </script> </body> </html> |
راه بسیار بهتری نیز برای کار کردن با کلاس ها وجود دارد. می توانید از خصوصیت classList به آسانی برای دریافت, ست یا حذف کلاس های CSS استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS classList Demo</title> <style> .highlight { background: yellow; } </style> </head> <body> <div id="info" class="disabled">Something very important!</div> <script> // Selecting element var elem = document.getElementById("info"); elem.classList.add("hide"); // Add a new class elem.classList.add("note", "highlight"); // Add multiple classes elem.classList.remove("hide"); // Remove a class elem.classList.remove("disabled", "note"); // Remove multiple classes elem.classList.toggle("visible"); // If class exists remove it, if not add it // Determine if class exist if(elem.classList.contains("highlight")) { alert("The specified class exists on the element."); } </script> </body> </html> |
امیدوارم از آموزش استایل دهی DOM در جاوا اسکریپت نهایت استفاده را برده باشید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
