oujood.com

Générer du contenu dynamiquement en CSS : utilisation de la propriété css : content

La propriété content est utilisée avec les pseudo-éléments ::before et ::after, pour insérer du contenu généré.

chercher |

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 content
content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;
Valeurs par défautnormal
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.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
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>




Voir aussi nos tutoriel :

Détermine si une variable est de type objet">is_object

 Détermine si une variable est de type objet

background-color

Définit la couleur de fond d'un élément

fonction print, print

Affiche une chaîne de caractères