在 ::before 伪 class 中更改 'content' 属性

Question

在我的 JS 中，我试图访问 dislpay_object::before class 的 'content' 属性。我需要将 'content'（文本）设置为 div 在页面上的位置。

我进行了大量搜索，但在这些类型的伪 classes 上没有找到如此深入的内容。

  .display_object {
  position: absolute;
  border: thin solid black;
  width: 15cm;
  white-space: nowrap;
}

.display_object:active::before {
  content: "x,y";
  /*needs to be changed to actual values*/
  display: block;
  position: absolute;
  background: rgba(0, 0, 0, 0.48);
  padding: 1em 3em;
  color: white;
  font-size: .8em;
  bottom: 1.6em;
  left: -1px;
  white-space: nowrap;
}

如何通过JS引用:active::before的.content，将其设置到当前位置？

Answer 1

通过this answer，您可以使用[=16]将before伪元素的content属性设置为父元素div的属性=]:

content: attr(data-before);

然后只需在您的事件处理程序中更新该属性：

div.setAttribute('data-before',`x: ${mousePosition.x}, y: ${mousePosition.y}`);

工作片段：

  var mousePosition;
  var offset = [0, 0];
  var div;
  var isDown = false;

  div = document.createElement("div");

  div.className = "display_object";
  div.innerHTML = "Draggable box:  ";

  document.body.appendChild(div);

  div.addEventListener('mousedown', function(e) {
    isDown = true;
    offset = [
      div.offsetLeft - e.clientX,
      div.offsetTop - e.clientY
    ];
  }, true);

  document.addEventListener('mouseup', function() {
    isDown = false;
  }, true);

  document.addEventListener('mousemove', function(event) {
  event.preventDefault();
  if (isDown) {

    mousePosition = {

      x: event.clientX,
      y: event.clientY

    };

    div.style.left = (mousePosition.x + offset[0]) + 'px';
    div.style.top = (mousePosition.y + offset[1]) + 'px';

   div.setAttribute('data-before',`x: ${mousePosition.x}, y: ${mousePosition.y}`);

  }
  }, true)
  ;

.display_object {
  position: absolute;
  border: thin solid black;
  width: 15cm;
  white-space: nowrap;
}

.display_object:active::before {
  content: attr(data-before);
  display: block;
  position: absolute;
  background: rgba(0, 0, 0, 0.48);
  padding: 1em 3em;
  color: white;
  font-size: .8em;
  bottom: 1.6em;
  left: -1px;
  white-space: nowrap;
}

在 ::before 伪 class 中更改 'content' 属性

Changing the 'content' property in a ::before pseudo class

javascript

css

pseudo-class