Accessing CSS Styles Using JavaScript

Almost any css properties can be set by javascript using the name of the css property as the Javascript property. The problem is, some characters like the dash("-") are not allowed within a JavaScript property. And we all know that CSS has many properties that contain dash in them, like font-family and border-right. Therefore, Javascript uses a lowerCamelCase syntax, which means that every component starts with an uppercase letter, but not the very first one. So font-family in CSS can be set using fontFamily property in Javascript.

There are 2 common ways to access CSS on the page: 1. using event handlers of HTML attributes and submitting a reference to the current element as parameter, like onClick="handler(this)". 2. accessing the element directly using document.getElementById("elementName")

Here's an example of the first approach:

<script language="javascript">
function useVerdana(elementName){
elementName.style.fontFamily="verdana";
}
</script>
<p id="myelement" onClick="useVerdana(this)">This is the element content</p>

And here's an example of the second approach, doing exactly the same thing:

<script language="javascript">
function useVerdana(){
var elementName=document.getElementById("myelement");
elementName.style.fontFamily="verdana";
}
</script>
<p id="myelement" onClick="useVerdana()">This is the element content</p>

And remember, there's NO DASH in javascript property!. That's actually the moral of this story.

Hope this helps,