Javascript 更改'；内容'；伪类：：before中的属性

在我的JS中，我试图访问dislpay_对象：：before类的“content”属性。 我需要将“内容”（文本）设置为div在页面上的位置

我已经做了大量的搜索，但还没有在这些类型的伪类上找到如此深入的内容

  .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以将其设置为当前位置？

通过，您可以使用

attr（）

将

before

伪元素的

content

属性设置为父div的属性：

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

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

工作代码段：

var鼠标定位；
var偏移量=[0,0]；
var-div；
var isDown=假；
div=document.createElement（“div”）；
div.className=“显示对象”；
div.innerHTML=“可拖动框：”；
文件.正文.附件（div）；
div.addEventListener（'mousedown'，函数（e）{
isDown=真；
偏移量=[
div.offsetLeft-e.clientX，
副职-e.clientY
];
}，对）；
document.addEventListener（'mouseup'，function（）{
isDown=假；
}，对）；
document.addEventListener（'mousemove'，函数（事件）{
event.preventDefault（）；
如果（isDown）{
鼠标位置={
x:event.clientX，
y:event.clientY
};
div.style.left=（mousePosition.x+偏移量[0]）+'px'；
div.style.top=（mousePosition.y+偏移量[1]）+'px'；
setAttribute（'data-before'，'x:${mousePosition.x}，y:${mousePosition.y}'）；
}
}，对）
;
.display\u对象{
位置：绝对位置；
边框：薄而实的黑色；
宽度：15厘米；
空白：nowrap；
}
.显示对象：活动：：之前{
内容：attr（以前的数据）；
显示：块；
位置：绝对位置；
背景：rgba（0,0,0,0.48）；
填充：1em 3em；
颜色：白色；
字体大小：.8em；
底部：1.6em；
左：-1px；
空白：nowrap；
}
Ah，我完全忘记了CSS
attr（）
函数。见亚历克斯建议的dup@这正是我在mousemove处理程序的上下文中所说的“不合理的方式”。我也忘记了attr（）函数XD，nice catch@TeemuAwesome。在片段和小提琴中非常有用。我将把它应用到实际的项目中，如果它的工作原理相同，那么答案就是你的。
div.setAttribute('data-before',`x: ${mousePosition.x}, y: ${mousePosition.y}`);