Tout savoir sur le dogecoin
Définition et utilisation da la propriété css content
La propriété content en CSS est utilisée pour générer le contenu dynamiquement (pendant l'exécution), c'est-à-dire qu'elle remplace l'élément par la valeur du contenu généré. Elle est utilisée pour générer le contenu des pseudo-éléments ::before et ::after. La Syntaxe CSS contentcontent: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;
| Valeurs par défaut | normal |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | En javascript vous ne pouvez pas donner un style à une pseudo-classe sur un élément particulier, mais vous pouvez obtenir le même résultat en créant une classe dans votre section STYLE (ou feuille de style) et ajouter cette classe à l'élément spécifié avec du JavaScript. |
Prise en charge de la propriété css dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit-, -moz-, ou -o- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 1 | 8 | 1 | 1 | 4 |
Valeurs de la propriété content
normal : Valeur par défaut. Définit le contenu, si spécifié, à la normale, dont la valeur par défaut est "none" (qui est vide)none : Définit le contenu, s'il est spécifié, comme vide.
counter : Définit le contenu comme un compteur
attr(attribute) : Définit le contenu comme l'un des attributs du sélecteur.
string : Définit le contenu comme le texte que vous spécifiez
open-quote : Définit le contenu comme étant une citation d'ouverture
close-quote : Définit le contenu comme une citation finale
no-open-quote : Supprime la citation initiale du contenu, si elle est spécifiée.
no-close-quote : Supprime la citation finale du contenu, si elle est spécifiée.
url(url) : Définit le contenu comme étant un type de média (une image, un son, une vidéo, etc.).
initial : Définit cette propriété à sa valeur par défaut.
inherit : Hérite cette propriété de son élément parent.
Exemple : Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title> CSS | La propriété content </title>
<style>
p::before {
content: "Lisez ceci : -";
}
</style>
</head>
<body>
<p>Mon nom est David</p>
<p>J'habite à paris</p>
</body>
</html>
Changer la propriété css content avec JavaScript
Exemple Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title> CSS | La propriété content </title>
<style>
.maClass::after {
content: " Mais vous le saviez, en on a déjà parlé.";
}
</style>
</head>
<body>
<h1>Changer la propriété css content avec JavaScript</h1>
<p>Il est impossible de donner un style à une pseudo-classe sur un élément particulier, mais vous pouvez obtenir le même résultat en créant une classe dans votre section STYLE (ou feuille de style) et en ajoutant cette classe à l'élément spécifié.</p>
<p>Cliquez sur le bouton "CHANGER" pour ajouter la classe " maClass " à l'élément DIV :</p>
<button onclick="myFunction()"> CHANGER </button><br><br>
<div id="monDIV">Voici mon élément DIV.</div>
<script>
function myFunction() {
document.getElementById("monDIV").className += " maClass";
}
</script>
</body>
</html>