JavaScript & CSS

En JavaScript, il est possible de modifier le style de la page : modifier la couleur d'un bloc, sa position, ses dimensions, ses bordures, le masquer, etc...

Exemple : Modification des propriétés CSS en JavaScript

Cet exemple montre comment modifier le CSS d'un DIV à l'aide d'appel de fonction en JavaScript:

<!DOCTYPE html>

<html>

<style>
	#exemple {
		background-color:#f00;
		color: #0ff;
		font-size: 1.2em;
		text-align: center;
		position: absolute;
		left: 100px;
		top: 100px;
		width: 300px;
		height: 150px;
	}
</style>

<script>
	
	var x = 100;
	var y = 100;
	var pas = 0.02 ;
	var angle = 0 ;
	var timer ;


	function modifie()
	{
		// on récupère l'élément
		var elmt = document.getElementById("exemple");
		// on modifie son style
		elmt.style.backgroundColor = "#000";
		elmt.style.color = "#fff";
		elmt.style.fontSize = (1+3*Math.random())+"em";
		elmt.style.textAlign = "left";
        elmt.style.height = (200+100*Math.random())+"px";
	}


	function deplacer(dx, dy)
	{
		var zone = document.getElementById("exemple");
		x += dx;
		y += dy;
		// on place la zone
		zone.style.left = x + "px";
		zone.style.top = y + "px";
	}


	function animer() 
	{
		var obj = document.getElementById("exemple");
		angle += pas ;
		obj.style.top = 300+Math.floor(100*Math.cos(angle))+ "px";
		obj.style.left = 300+Math.floor(100*Math.sin(angle))+ "px";
		obj.style.backgroundColor = "rgb("
									+ (Math.floor(255*Math.random())) + "," 
									+ (Math.floor(255*Math.random())) + ","
									+ (Math.floor(255*Math.random())) + ")";
	}
	

	function lanceAnimation()
    {
		var btn = document.getElementById("lance"); 
		btn.style.display = "none" ;
		timer=setInterval(animer(), 10);
	}  
				

	function RAZ()
	{
		var bloc = document.getElementById("exemple");
	   	var btn = document.getElementById("lance");	
		btn.style.display = "none" ;
		// on remet le bloc
		bloc.style.left = "100px" ;
		bloc.style.top = "100px";
		bloc.style.backgroundColor = "#f00";
		bloc.style.color = "#0ff";
		bloc.style.fontSize = "1.2em";
		bloc.style.textAlign = "center";
		bloc.style.height = "150px";
		pas = 0.02 ;
		angle = 0 ;
		clearInterval(timer);
		btn.style.display = "inline" ;
	}
</script>

<body>
	
	<!-- Le DIV ci-dessous sera modifié par les boutons ci-après -->
	
	<div id="exemple">Comment modifier le style CSS avec du JavaScript</div>
	

	<!-- Les boutons permettant d'appeler les différents fonctions JavaScript -->

	<input type="button" value="Change" onclick="modifie();" />
	<input type="button" value="Reset" onclick="RAZ();" />
	<input type="button" value="Deplacer Gauche" onclick="deplacer(-10,0);" />
	<input type="button" value="Deplacer Droite" onclick="deplacer(10,0);" />
	<input type="button" value="Deplacer Haut" onclick="deplacer(0,-10);" />
	<input type="button" value="Deplacer BAS" onclick="deplacer(0,10);" />
	<input type="button" value="Animation" onclick="lanceAnimation();" />
</body>

</html>
Voir