CSS with JavaScript

javascript CSS with JavaScript HTML Tag Design 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:

The hyphen or dash ' - ' sign will remove. E.g font-size replaced with fontSize
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.

javascript HTML Tag Design With JavaScript Chapter Next »