HTML5，CSS Transitions & JS Triggers

Question

给出我希望完成的目标的基本思想;

我目前有一个网站现场：http://shiinachi.com

当时，单击"家庭和电子邮件"选项卡之间使用JavaScript更改身体元素。

但是，我希望重做这个。我的目标是在单击按钮时将身体宽度扩展，因此身体"下降"以显示菜单。

我已经使用Onload函数进行了实验以触发CSS类;

功能bodyloaders(({classlist.add(" body-loader"(

默认情况下，身体的CSS设置为宽度为0，然后我尝试使用所讨论的车身负载类来调整宽度。

车身剖面。body-loader {width：745px;}

i然后致电过渡on载进行测试。然而...结果不成功。我可以做一个更好的方法吗？

编辑：这是所使用的代码的转储

身体标签;

<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>