为什么我的属性值没有改变？

Question

我想添加新标签按钮之类的东西，但我不知道如何在 JS 代码中更改它的颜色。我的元素：

<svg width="10rem" height="10rem" viewBox="0 0 16 16" class="bi bi-plus- 
    square" fill="gray" xmlns="http://www.w3.org/2000/svg">
                       <path fill-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 
     1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 
   0- 
    2-2H2z"/>
                       <path fill-rule="evenodd" d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h- 
     3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
                   </svg>

我的 JS：

    $('svg').on('mouseenter', 'svg', function() {
        this.fill = 'black';
    }).on('mouseleave', 'svg', function() {
        this.fill = 'gray';
    })

Answer 1

您需要更改 SVG 的样式，而不是属性本身。您的事件侦听器也在寻找嵌套元素。

$('svg').on('mouseenter', function() {
  this.style.fill = 'black';
}).on('mouseleave', function() {
  this.style.fill = 'gray';
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg width="10rem" height="10rem" viewBox="0 0 16 16" class="bi bi-plus- 
    square" fill="gray" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 
     1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 
   0- 
    2-2H2z"/>
  <path fill-rule="evenodd" d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h- 
     3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
</svg>

为什么我的属性值没有改变？

Why value of my attribute doesn't change?

javascript

attributes

fill