Using JavaScript, we can programmatically change our webpage's style and presentation. One way to do this is to use JS to select an element and give it an inline style.
First we'll need to select an element. Let's assume we have an HTML element with the ID of "mainContent"

1
var mainContent = document.getElementById("mainContent"); 

Once we have selected the element that we want to style, we can use the same styles that we would use in CSS. For example, to change font color:

1
mainContent.style.color="#ff0000"; //changes font color to red

Or to add 50 pixels of margin around the selected element

1
2
mainContent.style.margin="50px";
 

Any style property that can be written using CSS can also be dynamically written using JavaScript as a string. JS uses the same pixel units as CSS. Just make sure the semicolon is outside of the string quotes.
One important difference between style properties written in JavaScript vs CSS is that JavaScript uses camelCase, while CSS uses hyphen-spaced-text. for example, in CSS we would write this:

1
2
3
4
#mainContent{
    background-repeat: repeat-x;
}
 

While in JavaScript, we would write that same line in CamelCase:

1
2
mainContent.style.backgroundRepeat = "repeat-x";  
 

This is not just an arbitrary quirk of JS. In JS, any "-" would be interpreted as "minus"
for example, saying "background minus repeat" which wouldn't make any sense.
Keep in mind that we obviously will still want to keep most of our styles seperate in our CSS file, away from our .js file. This method is only useful if we NEED to have a style property changed dynamically in a way that CSS alone wouldn't be capible of by it's self.