استایل دهی css در جاوااسکریپت

در ادامه آموزش جاوااسکریپت، به مبحث استایل دهی و ارتباط بین کدهای css و جاوااسکریپت در زیباتر کردن صفحه وب و نیز پویا کردن استایل‌ها می‌رسیم. تصو کنید بخواهیم با فشره شدن دکمه‌ای، رنگ قسمتی از صفح تغییر کند و یا پنهان و آشکار شود، این کار به کمک همکاری جاوااسکریپت و css انجام می‌شود. در ادامه یا سینتکس و مثال‌هایی از این نوع آشنا می‌شویم.

1- استایل‌دهی داخل کد جاوااسکریپت

myElement.style.color = "red";
myElement.style.left="40px";
myElement.style.fontWeight="bold";
myElement.style.backgroundColor="#193542";

توجه داشته باشید که برای فراخوانی استایل‌ها، نام آنها همانند css نوشته می‌شود به جز استایل‌هایی که دارای خط تیره یا - در نام خود هستند. - در جاوااسکریپت عمل تفریق را انجام می‌دهد. پس برای فراخوانی استایل‌هایی مانند background-color، آنها را بصورت camelCase اینگونه می‌نویسیم. backgroundColor

2- تغییر کلاس در جاوااسکریپت

می‌توانیم استایل مورد نظرمان را به صورت یک کلاس در css استایل‌دهی کنیم و با دستور جاوااسکریپت، این کلاس را به المان اعمال کنیم یا پاک کنیم

myElement.className="cssClass";
myElement.className=""; //برای پاک کردن کلاس از المان

مثال 1:

function preparePage() {
	document.getElementById("mainContent").onclick = function() {
        if ( document.getElementById("mainContent").className == "example") {
             document.getElementById("mainContent").className = "";
        } else {
           document.getElementById("mainContent").className = "example";
        }
	};
}

window.onload =  function() {
	preparePage();
};
//کد بالا در هنگام لود شدن صفحه اجرا می‌شود و با هربار کلیک شدن، کلاس آن المان را عوض می‌کند

مثال2:

var currentPos = 0;
var intervalHandle;
//تعریف اولیه متغیرها

function beginAnimate() {
	document.getElementById("join").style.position = "absolute";
	document.getElementById("join").style.left = "0px";
    document.getElementById("join").style.top = "100px";
    // تابع مورد نظر را اجرا کن animatebox
    intervalHandle = setInterval(animateBox,50);
}

function animateBox() {
    // تغییر فاصله المان از سمت چپ
    currentPos+=5;
    document.getElementById("join").style.left = currentPos + "px";
    // 
    if ( currentPos > 900) {
        // پاک کردن دوره زمانی
        clearInterval(intervalHandle);
        // بازگرداندن استایل قبلی المان
        document.getElementById("join").style.position = "";
        document.getElementById("join").style.left = "";
        document.getElementById("join").style.top = "";
    }
}

window.onload =  function() {
	setTimeout(beginAnimate,5000);
};