28211 sujets

CSS et mise en forme, CSS3

[Résolu] [propriété content] Afficher le contenu de la balise

Administrateur
J'aimerais afficher le contenu de ma balise automatiquement en utilisant la propriété "content" http://www.yoyodesign.org/doc/w3c/css2/generate.html#content

Par exemple :

<p>texte bidon</p>

avec :
p:after {
content: /* ici la valeur pour générer automatiquement le texte "texte bidon" */
}


Je sais qu'il est possible de récupérer dynamiquement la valeur des attributs de la balise, par exemple :


<p title="toto">texte bidon</p>

avec :
p:after {
content: attr(title);
}


Mais est-ce possible de récupérer simplement la valeur de la balise, c'est à dire ici "texte bidon" ?
Administrateur
ElMoustiko a écrit :
Ca ne peut se faire que via le DOM ça...

C'est ce que je voudrait éviter, donc j'aimerais être certain qu'on ne peut pas le faire en CSS.
On ne peut effectivement pas "récupérer le contenu d'un élément" pour le réinsérer via la propriété content... Ce qui n'aurait guère de sens puisque ce contenu est nécessairement déjà... comment dire ? dans le contenu du document, justement ;)

Au passage, petite mise en garde : "content" doit être utilisé avec précaution (avec ou sans DOM), au risque de rendre l'accès au contenu final du document dépendant du support CSS. Voir:
- http://blog-and-blues.org/weblog/2004/10/24/322-before-et-after-du-bon-usage-du-contenu-genere-
- http://www.teaser.fr/~lcolombet/empyree/dotclear/?2004/10/25/311-rflexions-sur-la-gnration-automatique
Modifié le 30 Oct 2004 - 10:34
Administrateur
Laurent Denis a écrit :
Au passage, petite mise en garde : "content" doit être utilisé avec précaution (avec ou sans DOM), au risque de rendre l'accès au contenu final du document dépendant du support CSS.

Oui oui, ne t'inquiètes pas, c'est justement prévu.

Bon merci pour la réponse, je sais maintenant qu'il faudra passer par du DOM si je veux réaliser mon truc.

Est-ce possible de faire un title dynamique dans ce genre (qui ne marche évidemment pas) ?

<h1 title="javascript:'this.value;'">Titre bidon</h1>
Comme ceci :
title="javascript:alert(this.firstChild.nodeValue)"

Attention à la casse, il faut qu'elle soit respectée.
Modifié le 30 Oct 2004 - 11:21
Administrateur
ElMoustiko a écrit :
Comme ceci :
title="javascript:alert(this.firstChild.nodeValue)"

Attention à la casse, il faut qu'elle soit respectée.

Ça ouvre une popup, ça non ?
arf merde, j'ai oublié de zapper le alert pour mes tests :D
C'est pas vraiment une popup c'est une boite de dialogue.

donc title="javascript:this.firstChild.nodeValue" ca devrait le faire.
Administrateur
Humm, en fait ça ne fonctionne pas comme prévu.
Je voulais m'en servir pour créer des ombres automatiquement, mais non-seulement ça ne fonctionne pas, mais en plus ça n'ira pas non-plus si JS est désactivé.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
h1 {
font: bold 25px/25px verdana, sans-serif;
color: gray;
}

h1:after {
display: block;
margin-left: -2px;
margin-top: -26px;
color: red;
content: attr(title);
}
-->
</style>
</head>
<body>
<h1 title="javascript:this.firstChild.nodeValue">Titre bidon</h1>
</body>
</html>
Sujet clos
Aller à