Cours Web

Réalisation de sites Internet Lausanne

Bords arrondis en Javascript

Le script ci-dessous illustre le principe pour créer des bords arrondis en javascript. Ce script n'est pas exploitable en production sur IE6 car il ne gère pas les bugs de celui-ci (tel que le décalage de 1px lors du positionnement absolu par rapport au bas d'un div de hauteur impaire)

Un titre

du texte du texte du texte du texte du texte du texte du texte du texte

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page Title</title>
<style type='text/css'>
#container { background-color: orange; zoom: 1; }
</style>
<script type='text/javascript'>

function Arrondi(element, rayon, couleur) {
	element.style.position = 'relative';
	var e;
	for(var i=0;i<rayon;i++) {
		var n = rayon - Math.floor(rayon * Math.sin(Math.acos((rayon-i)/rayon)));
		e = this.trait(n, couleur);
		e.style.top = i + 'px';
		e.style.left = 0;
		element.appendChild(e);
		e = this.trait(n, couleur);
		e.style.top = i + 'px';
		e.style.right = 0;
		element.appendChild(e);
		e = this.trait(n, couleur);
		e.style.bottom = i + 'px';
		e.style.left = 0;
		element.appendChild(e);
		e = this.trait(n, couleur);
		e.style.bottom = i + 'px';
		e.style.right = 0;
		element.appendChild(e);
	}
}

Arrondi.prototype.trait = function(largeur, couleur) {
	var e = document.createElement('div');
	e.style.backgroundColor = couleur;
	e.style.position = 'absolute'; 
	e.style.width = largeur + 'px';
	e.style.height = '1px';
	e.style.overflow = 'hidden';
	e.style.fontSize = '0';
	return e;
}

</script>
</head><body onload='new Arrondi(document.getElementById("container"), 14, "white");'>
<div id='container'>
  <h1>Un titre</h1>
  <p>du texte du texte du texte du texte du texte du texte du texte du texte </p>
</div>
</body></html>