Нет доступа к 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>

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById — Alexey Ten, Sep 15 '21 at 04:18
А обращаться к элементам по глобальному id это плохая практика уже лет 15 — Alexey Ten, Sep 15 '21 at 04:19
Я новичек и не знаю. А как правильно? Пожалуйста, приведите правильный пример в коде) — Black_Viper, Sep 15 '21 at 04:21
в этой ссылке ничего не сказано про тире в id — Black_Viper, Sep 15 '21 at 04:22
По ссылке есть примеры. Там же можно и на русский переключится: https://developer.mozilla.org/ru/docs/Web/API/Document/getElementById#example — Alexey Ten, Sep 15 '21 at 04:23
там тоже про тире ничего не сказано — Black_Viper, Sep 15 '21 at 04:25
там два примера и я не могу понять, какой из них правильный, чтобы не обращаться к глобальному id — Black_Viper, Sep 15 '21 at 04:26

score 3 · Accepted Answer · answered Sep 15 '21 at 04:36

3

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>

answered Sep 15 '21 at 04:36

UModeL

34,026
6
29
71

1

Ура заработало =) А человек вверху сказал "А обращаться к элементам по глобальному id это плохая практика уже лет 15 " Почему это плохая практика? И как правильно обращаться к элементам? – Black_Viper Sep 15 '21 at 04:38
@Новичок: очень подробно и доходчиво. – UModeL Sep 15 '21 at 04:40
2

а там есть про плохую практику обращения к элементам через глобальную id? – Black_Viper Sep 15 '21 at 04:42
2

И есть ли там способы борьбы с этой плохой практикой)? – Black_Viper Sep 15 '21 at 04:45
2

@Новичок, вы по ссылке переходили? – Alexey Ten Sep 15 '21 at 05:57

score -1 · Answer 2 · answered Sep 15 '21 at 04:29

-1

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

answered Sep 15 '21 at 04:29

Алексей Шиманский

73,186

2

А как написать camelCase вместо тире? – Black_Viper Sep 15 '21 at 04:32
2

Попробовал написать mainSecond.outerHTML = 'hand'; не работает – Black_Viper Sep 15 '21 at 04:34

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

2 Answers2