CSS with JavaScript


How to apply CSS effects on HTML tags with JavaScript?

Basically, JavaScript CSS applying is used when we want to apply CSS on the behalf of decision . E.g If value is less than 10 color should be red . etc

Syntax of Applying CSS by JavaScript

document.getElementById(idvalue).style.propertyName = Style Value;

Note . The CSS property name will change in some cases by following technique:

  1. The hyphen or dash ' - ' sign will remove. E.g font-size replaced with fontSize
  2. After removing hyphen or dash ' - ' the next character will capital. E.g fontSize

<script type="text/javascript"> document.getElementById('myparagraph').style.fontSize='30px'; </script>

Different CSS effects using JavaScript

<p id="myparagraph">The small courtesies sweeten life the greater ennoble it.</p> <script type="text/javascript"> document.getElementById('myparagraph').style.fontSize='30px'; document.getElementById('myparagraph').style.color='white'; document.getElementById('myparagraph').style.background='gray'; document.getElementById('myparagraph').style.padding='5px'; document.getElementById('myparagraph').style.borderBottom='2px dashed red'; </script>

Output of above code CSS effects using JavaScript

The small courtesies sweeten life the greater ennoble it.

Chapter Next »