Informatique


L'objet style

Aller à

Référence générale

L'objet style du DOM contient toutes les propriétés CSS.

Pour les objets contenus dans le DOM cliquer ici et ensuite dans HTML DOM Reference choisir l'objet style.


Modifier le style d'une balise

Pour ajouter ou modifier le style CSS d’une balise HTML, on va utiliser l'objet style sur l’objet Element suivie de la propriété CSS à ajouter / modifier.

style est un objet à partir duquel on peut accéder à tous les styles.

Démo
	<!doctype html>
	<html>

	<head>
		<meta charset="utf-8">
		<title>Mon beau site web</title>
		<style>
			.c1	{color:red;}
			.c2	{color:green;}
		</style>

	</head>

	<body>
		<h1 id=maintitre>Un beau contenu</h1>
		<p>Je vous présente mon site.</p>
		<p class=a1>Et allez donc aussi sur ce site: <a href="http://www.louisvandevelde.be">Louis vandevelde</a>.</p>
		<p class=c1>Super ce site.</p>
		<p class=c1>Et vous n'avez pas tout vu!</p>
		<p class=c1>Hop hop hop!</p>

	</body>

	</html>
	<script>
		let para=document.querySelectorAll('.c1');
		for(let i=0;i<para.length;i++){
			para[i].style.fontSize="2em";
		}
	</script>

Il faut supprimer le tiret des propriétés CSS qui en contiennent et mettre une majuscule au deuxième mot (font-size devient fontSize par exemple).


La balise style du <head>

On peut évidemment atteindre/modifier les styles définis avec <style>

Démo
<head>
<style>
body {
  background-color: yellow; 
  margin: 10px;
}
#demo{
	font-size:1.5em;
	color:red;
	font-family:"Comic Sans MS";
}
</style>

</head>
<body>

<p>Récupérons le contenu de la balise <style></p>

<button>Clique pupuce!</button>

<p id="demo"></p>

<script>
var monbouton=document.getElementsByTagName("button")[0];
 var x = document.getElementsByTagName("STYLE")[0];
monbouton.addEventListener("click",myFunction)
function myFunction() {
  document.getElementById("demo").innerHTML = x.innerHTML;
}
</script>

</body>

On peut avoir plusieurs balises <style> dans la même page, c'est pourquoi il ne faut pas oublier l'indice de l'item recherché: document.getElementsByTagName("STYLE")[0].