javascript - 让用户使用鼠标选择伪元素

Question

您好，我有一个使用伪元素的 html 页面我们在元素上设置了一个选择类，将背景颜色设置为红色。

div:after {
  content: " Me too !";
  position: absolute;
}
::selection {
  background: red;
}

<div>Select Me.</div>

请建议如何使伪元素可选。

I can not change the current structure.

Answer 1

简短的回答是你不能“选择”一个伪元素。

长话短说，你可以通过检查用户是否在你的 div 中选择了文本来伪造它，例如:

var element = document.querySelector('div');
var elementText = element.innerText || element.textContent;

element.addEventListener('onmouseup', function() {
  var selectedText;
  var afterText;

  if (window.getSelection) {
    selectedText = window.getSelection().toString();
  } else if (document.selection && document.selection.type === "Text") {
    selectedText = document.selection.createRange().text;
  }

  if (selectedText === elementText) {
    // We've selected the div's text!
  } 
});

然后根据您希望的行为方式，您可以向元素添加一个类以不同地设置::after 元素的样式，然后通过以下方式将 after 元素的内容附加到用户选择:

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