Замена id элемента по клику кнопки

[zapalych]

Здравствуйте! Подскажите, пожалуйста, в чем ошибка. Делал в однажды для учебного задания коротенький скрипт для смены настроек отображения по клику. Вот понадобилось применить нечто подобное по работе.

Было (и всё работало)

<script type="text/javascript">
function change(bodyName){
var bodyclass = document.getElementsByTagName("body")[0];
bodyclass.className = bodyName;
localStorage.setItem("state", bodyName);
}
</script>
<button onclick="change('style-a')" class="style-a" style="font-size:16px; background:none; border:none;">А</button>
<button onclick="change('style-aa')" class="style-aa" style="font-size:20px; background:none; border:none;">А</button>
<button onclick="change('style-aaa')" class="style-aaa" style="font-size:26px; background:none; border:none;">А</button>
<script type="text/javascript">
var defaultState = 'style-a';
var state = localStorage.getItem("state");
change(!!state ? state : defaultstate);
</script>


Однако в связи с заменой классов поехали настройки отображения, и я решил менять не класс, а id и сделал так:

<script type="text/javascript">
function change(bodyName){
var bodyid = document.getElementsByTagName("body")[0];
bodyid.idName = bodyName;
localStorage.setItem("state", bodyName);
}
</script>
<button onclick="change('style-a')" class="style-a" style="font-size:16px; background:none; border:none;">А</button>
<button onclick="change('style-aa')" class="style-aa" style="font-size:20px; background:none; border:none;">А</button>
<button onclick="change('style-aaa')" class="style-aaa" style="font-size:26px; background:none; border:none;">А</button>
<script type="text/javascript">
var defaultState = 'style-a';
var state = localStorage.getItem("state");
change(!!state ? state : defaultstate);
</script>


После произведенных замен по клику ничего не происходит, id не меняется.

[ksa]

и я решил менять не класс, а id
Это ошибка резидента! (с) :D

Не делай так. :no:

[ksa]

bodyid.idName = bodyName;
Что это за свойство idName? :blink:

[zapalych]

а можно сделать так, чтобы другие классы не удалялись при клике?

[zapalych]

или даже так: чтоб заменялись только определенные (style-a, style-aa, style-aaa)?

[Diphenyl Oxalate]

zapalych, classList (https://developer.mozilla.org/ru/docs/Web/API/Element/classList)

[Rasy]

zapalych,
Ты определись какую проблему хочешь решить. У подтипа HTMLElement нет такого свойства, как idName которое имело бы доступ к атрибуту id. Еще не используй кебабнотацию для именования идентификаторов.

[j0hnik]

а можно сделать так, чтобы другие классы не удалялись при клике?

el.classList.add('className');
или
el.className += ' my-class';

[j0hnik]

или даже так: чтоб заменялись только определенные (style-a, style-aa, style-aaa)?
el.classList.remove('className');
el.classList.add('className');

[zapalych]

el.classList.remove('className');
el.classList.add('className');

это можно прописать в onclick=""?

[j0hnik]

это можно прописать в onclick=""?

В функцию!

[j0hnik]

в вашем случае как то-так
function change(bodyName){
var bodyclass = document.getElementsByTagName("body")[0];
bodyclass.classList.remove('style-a', 'style-aa','style-aaa');
bodyclass.classList.add(bodyName);
localStorage.setItem("state", bodyName);
}

[zapalych]

el.classList.remove('className');
el.classList.add('className');

Большое спасибо! Всё получилось!