JavaScript and CSS.

Setting Inline Styles

• Always set the property as a string.
• myElement.style.color = "#ff0000";
• myElement.style.left = "40px";
• myElement.style.width = "230px";
• myElement.style.fontWeight = "bold";               // notice, it's not font-weight, '-' is subtract in js
• myElement.style.backgroundColor = "#123";    // notice, it's not background-color
• myElement.style.backgroundRepeat = "repeat-x";

Setting the Class

• 'class' is reserved keyword in js.
• myElement.className = "someCSSclass";
• myElement.className = "";

Example

// In myStyle.css
// .example {
// color: #fff;
// }

// JavaScript
document.getElementById("mainContent").className = "example";

var currPos = 0;
var intervalHandle;
function beginAnimate() {
    document.getElementById("join").style.position = "absolute";
    document.getElementById("join").style.left = "0px";
    document.getElementById("join").style.top = "100px";
    intervalHandle = setInterval (animate, 60);
}

function animate() {
    currPos += 6;
    document.getElementById("join").style.left = currPos + "px";
    if (currPos > 800) {
        clearInterval (intervalHandle);
        document.getElementById("join").style.position = "";
        document.getElementById("join").style.left = "";
        document.getElementById("join").style.top = "";
    }
}

window.onload = function() {
    settimeout (beginAnimate, 4000);
}