HTML5, CSS-переходы и JS-триггеры

Question

Чтобы дать общее представление о том, чего я надеюсь достичь;

У меня сейчас есть сайт по адресу: http://shiinachi.com

Как таковой, элемент тела изменяется с помощью javascript при переходе между вкладкой «Домой» и «Электронная почта».

Однако я надеюсь повторить это. Я стремлюсь расширить ширину тела при нажатии кнопки, чтобы тело «опускалось», чтобы отобразить меню, о котором идет речь.

Я экспериментировал с использованием функции onload для запуска класса css;

function bodyloaderS () {classList.add ("body-loader")

CSS тела по умолчанию имеет ширину 0, затем я попытался использовать рассматриваемый класс body-loader для настройки ширины.

body-section.body-loader {width: 745px; }

Затем я вызвал переход, чтобы проверить его. Тем не мение... Результаты оказались менее чем успешными. Есть ли лучший способ сделать это?

Edit: Вот дамп используемого кода

метка тела;

<div id="body-section" onload="bodyloaderS(document.body-section)">
    <h1>Home</h1>
     <p>Hello.<br><br>Temp</p>                  </div>

Соответствующий CSS;

#body-section{
position: relative;
padding-left: 50px;
padding-top: 50px;
padding-right: 50px;
height: 350px;
width: 0px;
transition: width 2s;
border-color: #ffffff;
border-style: solid;
border-width: 1px 1px 3px 3px;
border-radius: 3px 9px 3px 0px;
top: -752px;
left: 325px;
background-color: #222222;
}

#body-section.body-loader{
width: 745px;
}

Используемый скрипт;

    <script>
function bodyloaderS() { classList.add("body-loader") 
}
    </script>

Answer 1

Если вы также добавите целевой элемент в свою функцию, он будет работать, например,

function bodyloaderS() {
  document.querySelector('#body-section').classList.add("body-loader");
}

---

Кроме того, вы можете рассмотреть возможность использования прослушивателей событий вместо

var thebody = document.querySelector('#body-section');
thebody.addEventListener('load', function() {
  this.classList.add("body-loader");
})

---

Обновлено на основе комментариев и редактирования вопроса

Событие onload не работает с элементами div.

Вот предложение с использованием DOMContentLoaded слушателя

document.addEventListener("DOMContentLoaded", function() {

  var thebody = document.querySelector('#body-section');
  thebody.classList.add("body-loader");
  
});

#body-section {
  position: relative;
  padding-left: 50px;
  padding-top: 50px;
  padding-right: 50px;
  height: 350px;
  width: 0px;
  transition: width 2s;
  border-color: #ffffff;
  border-style: solid;
  border-width: 1px 1px 3px 3px;
  border-radius: 3px 9px 3px 0px;
  /*
  top: -752px;
  left: 325px;
  background-color: #222222;
  */
}

#body-section.body-loader {
  width: 745px;
}

<div id="body-section">
  <h1>Home</h1>
  <p>Hello.<br><br>Temp</p>
</div>