使用 DOM 操作传递具有应用样式的元素答案

【问题标题】：Passing an element with its applied styles using DOM Manipulation使用 DOM 操作传递具有应用样式的元素
【发布时间】：2021-01-22 20:02:58
【问题描述】：

这里的目标是使用 DOM Manipulation 传递一个元素（一个被专门点击的元素）我希望 svg 元素以它的所有应用样式出现。截至目前，svg 没有任何样式显示。

我在想有一种方法可以使用 this.getAttribute 或 this.content 传递单击的元素及其所有样式，但这些方法返回为未定义，这就是我目前使用 this.innerHtml 的原因（至少被点击的元素，我可以对它使用 DOM 操作）。

为每个 svg 元素添加了 eventListeners，并与一个函数配对。 this.innerHTML 似乎起作用了（只是元素，没有任何样式）。

svg.addEventListener('click', function)

在下面的函数中，我使用了 .content 和 getAttribute，它返回 undefined

function () {
    var clickedSVG = this.innerHTML
    document.getElementById('container2').innerHTML = clickedSVG```

【问题讨论】：

您的问题解决了吗？

标签： javascript html css dom-manipulation

【解决方案1】：

如果您想在单击事件上将样式应用于元素，您将需要使用 classList 属性向元素添加一个类。下面是一个在点击事件上切换元素颜色的示例。

首先，您创建要切换的 HTML 元素，并为其指定一个 ID 及其默认类：

<svg id="icon" class="not-clicked"></svg>

然后创建两个 CSS 类，一个用于默认样式，另一个用于在点击事件上应用的样式：

.not-clicked {
      background-color: black;
    }    
.clicked {
      background-color: red;
    }

然后您创建一个 javascript 函数，在其中定义您希望元素在 click 事件上发生的事情，然后使用事件侦听器调用该函数：

function changeColor(el) {
  if (el.classList.contains('not-clicked')) {
    el.classList.add('clicked');
    el.classList.remove('not-clicked')
  } else {
    el.classList.add('not-clicked');
    el.classList.remove('clicked')
  }
}

document.getElementById('icon').addEventListener('click', (e) => {
        changeColor(e.target)
});

【讨论】：