Question

这是我的SVG代码;我给了元素一个类名：

<path class="Myrect" clip-path="url(#SVGID_4_)" fill="#61AFB5" d="M101.5,206c0,0-5.1-13.4-6.5-24.6c0,0-22.9,3.1-23,3.1c-0.1,0,1,16.6,7.8,31.4L101.5,206z"/>
<path class="Myrect" clip-path="url(#SVGID_4_)" fill="#61AFB5" d="M155.8,62.3c0,0,12.2-7,22.9-10c0,0-6.4-22.5-6.4-22.6c0-0.1-15.9,3.3-29.2,12.3L155.8,62.3z"/>
<path class="Myrect" clip-path="url(#SVGID_4_)" fill="#61AFB5" d="M119,90.8c0,0,8.5-10.5,17.1-17c0,0-13.4-17.5-13.4-17.6c0-0.1-13.1,8.6-22,21.2L119,90.8z"/>

这是我的按钮代码

<button onclick="hideSVG();">hide/show</button>

这是我的JS代码

function hideSVG() {
    var style = document.getElementsByClassName('Myrect').style.display;
if(style === "none")
    document.getElementsByClassName('Myrect').style.display = "block";
else
    document.getElementsByClassName('Myrect').style.display = "none";
}

它不起作用。知道我怎么能做这个工作？

Answer 1

问题是document.getElementsByClassName会返回NodeList，您无法在其上设置style。（你也不能获取样式作为属性。）

您需要遍历该列表中的节点。有几种不同的方法可以做到这一点;这是一个。

// look up the nodes, store the reference
var rects = document.getElementsByClassName('Myrect');

// this is just a counter for looping
var i;

// loop over those nodes
for (i = 0; i < rects.length; i++) {
  rects[i].style.display = "block";
}

至于如何首先获得样式 - 这取决于这些元素是否都应该一起改变样式，或者是否每个元素都被单独检查和更改。如果他们都一样，你可以查看rects[0].style.display。如果不是，您可以将if()条件移动到循环中，如

var rects = document.getElementsByClassName('Myrect');
var i;

for (i = 0; i < rects.length; i++) {
  if (rects[i].style.display == "none") {
    rects[i].style.display = "block";
    return;
  }
  rects[i].style.display = "none";
}

我正在附加一个可运行的代码段，以便您可以看到我的意思：

function toggleDisplay() {
  var rects = document.getElementsByClassName('Myrect');
  var i;
  
  for (i = 0; i < rects.length; i++) {
    if (rects[i].style.display == 'none') {
      rects[i].style.display = 'block';
    } else {
      rects[i].style.display = 'none';
    }
  }
}

<svg viewBox="0 0 80 20">
  <rect x="10" y="10" width="10" height="10" fill="skyblue" class="Myrect" />
  <rect x="30" y="10" width="10" height="10" fill="orange" class="Myrect" />
  <rect x="50" y="10" width="10" height="10" fill="skyblue" class="Myrect" />
</svg>

<button onclick="toggleDisplay()">Toggle</button>

Answer 2

更新了您的功能：

function hideSVG() {
var obj = document.getElementsByClassName('Myrect');
    for(var i=0;i<obj.length;i++){
        if(obj[i].style.display === "none"){
            obj[i].style.display = "block";
        }else{
            obj[i].style.display = "none";
        }
    }
}

SVG - 如何在按钮单击上显示/隐藏多个元素

2 个答案: