JSFiddle
在我的 JS 中，我试图访问 dislpay_object::before 类的“内容”属性。
我需要将“内容”(文本)设置为页面上 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，将其设置到当前位置？
通过this answer ，您可以使用 attr() 将 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;
}