如何访问和修改附加元素的样式

Question

放下后，我将孩子附加到容器中。

我的要求是我想在光标位置附加孩子。为此，我需要访问要附加的孩子的样式。

我以data.style={{...}} 的身份这样做。但它说的是

无法设置未定义的属性“样式”

 drop(event) {
      event.preventDefault();
      var data= event.dataTransfer.getData("Text");
      //data.style={position:"relative"}

      event.target.appendChild(document.getElementById(data));
      console.log(event.clientX)
      data.target.style={
        left : event.clientX + 'px',
        top : event.clientY+ 'px'
      }

Answer 1

未定义的风格

因为选择器是未定义的，应该是因为如果data 是一个节点，那么它将没有target 属性。因此，您必须直接在data 上进行操作：

data.style={
    left : event.clientX + 'px',
    top : event.clientY+ 'px'
}

或者您可能希望将代码更改为：

drop(event) {
  event.preventDefault();
  var data = document.getElementById(event.dataTransfer.getData("Text"));
  //data.style={position:"relative"}
  event.target.appendChild(data);
  console.log(event.clientX)
  data.style = {    // <------------apply styles on "data" node
    left: event.clientX + 'px',
    top: event.clientY + 'px'
  }
}