English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutoriel de base JavaScript

Objet JavaScript

Fonction JavaScript

JS HTML DOM

BOM du navigateur JS

Tutoriel de base AJAX

Manuel de référence JavaScript

Modification du CSS avec JS DOM

HTML DOM permet à JavaScript d'obtenir et de modifier les styles (CSS) des éléments HTML.

modifier le style d'un élément

Vous pouvez utiliserstyleLes attributs appliquent des styles à des éléments HTML spécifiques.

Pour modifier le style d'un élément HTML, utilisez la syntaxe suivante

element.style.property　=　value

Les exemples suivants modifient<h1>Les styles des éléments : 

<!DOCTYPE　html>
<html>
<h1　id="demo">Propriété style DOM HTML</h1>
<script>
document.getElementById("demo").style.color　=　"blue";
</script>
</html>
Tester pour voir‹/›

Lorsque l'utilisateur clique sur le bouton, cet exemple modifie également<h1>Les styles des éléments : 

<h1　id="demo">Propriété style DOM HTML</h1>
<button　onclick="myFunc()">Cliquez</button>
<script>
function　myFunc()　{
　　　document.getElementById("demo").style.color　=　"blue";
}
</script>
Tester pour voir‹/›

Lorsque l'utilisateur clique sur le bouton, cet exemple modifie également<h1>Les styles des éléments : 

<h1　id="demo">Propriété style DOM HTML</h1>
<button　onclick="document.getElementById('demo').style.color　=　'blue';">Cliquez</button>
Tester pour voir‹/›

obtenir des informations de style à partir d'un élément

De même, vous pouvez utiliserstyleLes attributs appliquent des styles aux éléments HTML.

Les exemples suivants appliquent des styles aux éléments HTML avecid="demo"obtient des informations de style pour l'élément (border-top）：

var x = document.getElementById("demo").style.borderTop;
Tester pour voir‹/›

Remarque : Lorsque vous obtenezstyleLorsque vous utilisez des informations de style, cette propriété n'est pas très utile car elle ne renvoie que les règles de style définies dans l'attribut style de l'élément, et non les règles de style provenant d'autres emplacements, par exemple les feuilles de style intégrées ou les feuilles de style externes.

Pour obtenir les valeurs des attributs CSS réellement utilisés pour l'affichage d'un élément, vous pouvez utiliser les instructions suivanteswindow.getComputedStyle()Méthode : 

let　para　=　document.querySelector('p');
let　compStyles　=　window.getComputedStyle(para);
para.innerHTML　=　'font-size:　'　+　compStyles.getPropertyValue('font-size');
para.innerHTML　+=　'<br>line-height:　'　+　compStyles.getPropertyValue('line-height');
para.innerHTML　+=　'padding:　'　+　compStyles.getPropertyValue('padding');
Tester pour voir‹/›

Pour ajouter une classe CSS à l'élément

Vous pouvez également utiliserclassNameL'attribut récupère ou définit la classe CSS de l'élément HTML.

document.getElementById("x").className = "para";
Tester pour voir‹/›

Vous pouvez également utiliser leclassListIl est facile de récupérer, définir ou supprimer des classes CSS à partir de l'élément.

Les exemples suivants montrent comment<p>Ajouter une élémentparaClasse :

var elem = document.getElementById("x");
elem.classList.add("para");
Tester pour voir‹/›

Ajouter plusieurs classes à<p>Élément :

var elem = document.getElementById("x");
elem.classList.add("para", "shadow");
Tester pour voir‹/›

De<p>Supprimer une classe de l'élément :

var elem = document.getElementById("x");
elem.classList.remove("para");
Tester pour voir‹/›

Basculer entre deux classes<p>Élément :

var elem = document.getElementById("x");
elem.classList.toggle("anotherClass");
Tester pour voir‹/›

Basculer une classe ("ouvrir") pour créer un bouton de navigation latérale :

Exécuter le code
Modification des attributs des éléments avec JS DOMModification du contenu HTML avec JS DOM