在SVG中使用JavaScript的onmouseover函数获取类名,可以通过以下步骤实现:
<script>
标签嵌入JavaScript代码。确保将代码放置在<svg>
标签内部。querySelectorAll
方法选择具有目标类名的元素。该方法返回一个NodeList对象,其中包含所有匹配的元素。addEventListener
方法为每个匹配的元素添加mouseover
事件监听器。在事件处理程序中,可以使用event.target
属性获取当前触发事件的元素。getAttribute
方法获取当前元素的类名。下面是一个示例代码:
<svg>
<circle class="myCircle" cx="50" cy="50" r="40" fill="red" />
<circle class="myCircle" cx="150" cy="50" r="40" fill="blue" />
<circle class="myCircle" cx="250" cy="50" r="40" fill="green" />
</svg>
<script>
const circles = document.querySelectorAll('.myCircle');
circles.forEach(circle => {
circle.addEventListener('mouseover', event => {
const className = event.target.getAttribute('class');
console.log(className);
});
});
</script>
在上面的示例中,我们选择了所有具有myCircle
类名的圆形元素,并为每个元素添加了mouseover
事件监听器。当鼠标悬停在圆形上时,会在控制台中打印出该元素的类名。
请注意,这只是一个简单的示例,你可以根据实际需求进行修改和扩展。
领取专属 10元无门槛券
手把手带您无忧上云