Est-il possible de sélectionner le contenu généré par css? [dupliquer]

cette question a déjà une réponse ici:

disons que j'ai une majoration: 

<div data-generated="world!">Hello </div>

..avec CSS: 

div:after {
    content: attr(data-generated);
}

cela produit le texte: Hello world! - VIOLON 

div:after {
    content: attr(data-generated);
}
<div data-generated="world!">Hello </div>

BUT...

si j'essaie de sélectionner / Copier le texte - seule la partie 'hello' est sélectionnable.

enter image description here

y a-t-il un moyen de sélectionner le texte généré par css?

NB:

1) j'ai regardé les spécifications ( ici et ici ) concernant le contenu généré et je n'ai vu aucune référence à cette question.

spec ici et ici semble dire que contenu généré doivent être sélectionnables

Le contenu généré par

doit pouvoir faire l'objet d'une recherche, sélectionnable, et disponible à technologies d'assistance

2) si la réponse à cette question est "non - ce n'est pas possible", veuillez cliquer sur une source crédible.

23
demandé sur Danield 2014-06-24 15:13:49

3 réponses

Non, tu ne peux pas.

Voir la Sélection et la manipulation CSS pseudo-éléments tels que ::before et ::after à l'aide de jQuery . Pour reprendre ce qui y est décrit, le contenu généré ne fait pas partie du DOM.

dans les termes du CSS2.1 spec ,

le contenu généré ne modifie pas l'arborescence des documents.

contenu généré n'existe que dans le monde visuel du moteur de rendu. La sélection consiste à sélectionner des parties du DOM. Le contenu généré n'est pas dans le DOM, il ne peut donc pas être sélectionné. Pour la même raison, les compteurs générés ou les points de liste ne peuvent pas être sélectionnés.

15
répondu Community 2017-05-23 10:29:44

ne pas stocker le contenu qui devrait être visible et accessible dans data attributs, parce que la technologie d'assistance peut ne pas y accéder

vérifiez ces liens:

http://www.karlgroves.com/2013/08/26/css-generated-content-is-not-content / https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

4
répondu Mr7-itsurdeveloper 2014-06-24 12:04:47

au lieu de réellement sélectionner le contenu généré, vous pourriez simuler cela avec un peu de javascript.

je suis tombé sur ce David Walsh blog , où il fournit du code qui récupère le contenu généré.

en utilisant cela, vous pouvez ajouter le contenu généré au contenu régulier pour simuler la sélection du contenu généré, alors vous pouvez définir le contenu généré avec display:none ainsi qu'il n'apparaisse pas deux fois. Comme ceci:

VIOLON 

String.prototype.unquoted = function() {
  return this.replace(/(^['"])|(['"]$)/g, '')
}

var element = document.getElementById('div1');

var content = window.getComputedStyle(
  element, ':after'
).getPropertyValue('content');

element.innerHTML = element.innerHTML + content.unquoted();

console.log(content.unquoted());
div:after {
  content: attr(data-generated);
  display: none;
}
<div id="div1" data-generated=" world!">Hello</div>

alors pourquoi voudrais-tu faire quelque chose comme ça?

Eh bien, vous ne voudriez probablement jamais faire cela, mais j'ai laissé un long commentaire sur la question expliquant une contrainte particulière que j'avais par le passé, où cela aurait pu être une solution.

NB: je me rends compte que cette "solution" ne sélectionne pas vraiment le contenu généré lui-même, mais a décidé de poster cette réponse au cas où quelqu'un aurait besoin d'une solution de contournement.

2
répondu Danield 2018-05-17 13:05:48