單擊復選框時更改svg形狀顏色-有解無憂

單擊復選框時，我想更改 svg 形狀的填充顏色。我有這個作業，但是如果我將復選框輸入包裝在 div 標簽中，它不再起作用。

#circles {
  fill: #00ffff;
}

#circ-toggle .toggler:checked~#circles .circ1 {
  fill: #000000;
  fill-opacity: 0.3;
}

<div id="circ-toggle" class="toggle">
  <input type="checkbox" id="toggle-1" class="toggler">
  <label for="toggle-1" class="btn-toggle">Change Color</label>
</div>

<div id="circles">
  <svg viewBox="0 0 40 30">
        <g>
            <circle class="circ1" cx="1" cy="1" r="1" />
            <circle class="circ2" cx="3" cy="1" r="1" />
        </g>
    </svg>
</div>

uj5u.com熱心網友回復：

如果您的設計可以容忍這種變化，那么您當前的 css 將起作用：

請注意，我已將 for 的結束標記移至<div id="circ-toggle" >css 的末尾，以便它封裝<div id="circles">. 這樣做會在checkbox和之間創建兄弟關系<div id="circles">。現在一般的兄弟組合子（~）可以到達所需的元素。

您當然可以使用 javascript 輕松完成此操作，但看起來您只需要 css 答案。

const checkbox = document.getElementById('toggle-1')

checkbox.addEventListener('change', (event) => {
  if (event.currentTarget.checked) {
    alert('checked');
  } else {
    alert('not checked');
  }
})

#circles {
  fill: #00ffff;
}

.gray {
  fill: #000000;
  fill-opacity: 0.3;
}

<div id="circ-toggle" class="toggle">
  <input type="checkbox" id="toggle-1" class="toggler">
  <label for="toggle-1" class="btn-toggle">Change Color</label>
</div>
<div id="circles">
  <svg viewBox="0 0 40 30">
        <g>
            <circle class="circ1" cx="1" cy="1" r="1" />
            <circle class="circ2" cx="3" cy="1" r="1" />
        </g>
    </svg>
</div>

編輯：這是一個 javascript 方法：

const checkbox = document.getElementById('toggle-1');
const circle = document.querySelector("#circles > svg > g > circle.circ1");

checkbox.addEventListener('change', (event) => {
  if (event.currentTarget.checked) {
    circle.classList.add("gray");
  } else {
    circle.classList.remove("gray");
  }
})

#circles {
  fill: #00ffff;
}

.gray {
  fill: #000000;
  fill-opacity: 0.3;
}

<div id="circ-toggle" class="toggle">
  <input type="checkbox" id="toggle-1" class="toggler">
  <label for="toggle-1" class="btn-toggle">Change Color</label>
</div>
<div id="circles">
  <svg viewBox="0 0 40 30">
        <g>
            <circle class="circ1" cx="1" cy="1" r="1" />
            <circle class="circ2" cx="3" cy="1" r="1" />
        </g>
    </svg>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/361876.html

標籤：html css svg 复选框

上一篇：h1相對于父級的中心跨度

下一篇：未捕獲的RangeError：JavaScript中的字串長度無效