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

Question

放置后，我将 child 附加到容器中。

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

我正在这样做 data.style={{...}}。但它说的是

Cannot set property 'style' of undefined

 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

style of undefined

因为选择器未定义，应该是因为如果 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'
  }
}

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

How to access and modify style of appending element

javascript

drag-and-drop

appendchild

reactjs