Нет доступа к id через дефис

Question

Почему доступ к id через дефис не работает? Как это пофиксить?

main-second.outerHTML = 'hand';

#main{
background: orange; 
}

#main-second {
font-size: 2vmax;   
margin-left: 50%;
}

<div id="main">
<div id="main-second">
Text
</div>
</div>

Answer 1

Есть правило, что всё, что написано в CSS через дефис, в JS пишется через camelCase. Именно поэтому есть el.style.backgroundColor и пр. обращения к свойствам стилей

Answer 2

JS интерпретирует ваш код, как - из main вычесть second.outerHTML = 'hand';.

Если всё же есть необходимость в дефисе, то используйте getElementById():

document.getElementById('main-second').outerHTML = 'hand';

#main {
  background: orange;
}

#main-second {
  font-size: 2vmax;
  margin-left: 50%;
}

<div id="main">
  <div id="main-second">
    Text
  </div>
</div>

БЛОГ НА HUSL

Нет доступа к id через дефис

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