Question

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

＆＃13;

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

＆＃13;

<div>Select Me.</div>

＆＃13;

请建议如何选择伪元素。

我无法改变当前的结构。

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;

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

1 个答案: