使用DOM操纵传递元素及其应用样式

问题描述

这里的目标是使用DOM操纵传递一个元素（特别是被单击的一个元素），我希望svg元素与它的所有应用样式一起显示。截至目前，该svg尚未显示任何样式。

我在想有一种方法可以使用this.getAttribute或this.content通过clicked元素的所有样式传递这些元素，但是这些方法返回为undefined，这就是为什么我目前使用this.innerHtml （至少得到点击的元素，我可以对其使用DOM Manipulation）。

将eventListeners添加到每个svg元素，并与一个函数配对。 this.innerHTML似乎有用（只是元素，而没有样式）。

svg.addEventListener('click',function)

在下面的函数中，我使用了.content和getAttribute，但返回的值未定义

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

解决方法

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

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

Availability

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

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

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

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