HTML5、CSS 转换和 JS 触发器

Question

给出我希望完成的基本概念；

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

实际上，在主页和电子邮件选项卡之间单击时，使用 javascript 更改正文元素。

不过，我希望重做这个。我的目标是在单击按钮时扩展主体的宽度，以便主体 "drops down" 显示相关菜单。

我尝试过使用 onload 函数来触发 css class;

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

body的css默认宽度设置为0，然后我尝试使用有问题的body-loader class来调整宽度。

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

然后我调用了转换 onload 来测试它。然而... The results were less than successful. 有没有更好的方法可以做到这一点？

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

正文标签；

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

HTML5、CSS 转换和 JS 触发器

HTML5, CSS Transitions & JS Triggers

html

javascript

css

transition