Как спрятать radiobutton под img в стилях JS?

Question

Есть две радио кнопки, которые должны быть спрятаны под изображения.

<label><input type="radio" name="energy" id="e"/><img src=".png" class="pic"/></label>
<label><input type="radio" name="energy" id="i"><img src=".png" class="pic"/></label>

в CSS я это делала таким образом:

label > input {
  visibility: hidden;
  position: absolute;
}
label > input + img {
  border: 1px solid;
  padding: 25px;
 }

Но теперь я хочу определять стили в JS.

const pic1 = document.querySelector('.pic')
function addStylesTo(node){
    node.style.padding = '25px'
    node.style.border='2px solid black'
  }
addStylesTo(pic1)

Вопрос: можно ли спрятать кнопку под изображение через функцию addStylesTo? Или как иначе на чистом JS?

Answer 1

которые должны быть спрятаны под изображения.

Зачем? Просто сделайте радио-кнопки невидимыми.

document.querySelectorAll('label > input[name=energy]').forEach(i => i.style.display = 'none');

<label>
  <input type="radio" name="energy" id="e" onclick="console.log(this.id)"/>
  <img src=".png" class="pic"/>
</label>
<label>
  <input type="radio" name="energy" id="i" onclick="console.log(this.id)">
  <img src=".png" class="pic"/>
</label>

БЛОГ НА HUSL

Как спрятать radiobutton под img в стилях JS?

Ответы (1 шт):