html中根据id修改style属性,js中动态修改style属性的问题

学了半个月js了，觉得有点难啊(￣△￣)总是遇到问题，然后想办法解决，再遇到问题...自从发现了sf这个社区，发现这里有很多热心肠的大神，愿意帮助像我这样的新手，在此衷心感谢各位热心耐心帮助我给我解答的程序员哥哥们:D

刚才又发现一个有意思的问题哦，老规矩，先上代码：

SessionStorage

#welcome{

width: 200px;

height: 150px;

border-radius: 20px;

margin-left: 550px;

animation: color_changing 3s infinite;

-webkit-animation: color_changing 3s infinite;

-moz-animation: color_changing 3s;

-o-animation: color_changing 3s;

}

@keyframes color_changing {

0%{background: greenyellow;}

50%{background: deepskyblue;}

100%{background: greenyellow;}

}

@-webkit-keyframes color_changing {

0%{background: greenyellow;}

50%{background: deepskyblue;}

100%{background: greenyellow;}

}

@-o-keyframes color_changing {

0%{background: greenyellow;}

50%{background: deepskyblue;}

100%{background: greenyellow;}

}

@-moz-keyframes color_changing {

0%{background: greenyellow;}

50%{background: deepskyblue;}

100%{background: greenyellow;}

}

.topButton{

margin-left: 587px;

margin-top: 20px;

margin-bottom: 5px;

}

#bottomDiv{

margin-left: 500px;

margin-top: 20px;

margin-bottom: 5px;

/*display: none;*/

}

function onLoad(){

var login = document.getElementById('login'),

name = document.getElementById('name'),

bottomDiv = document.getElementById('bottomDiv');

bottomDiv.style.display = 'none';

login.addEventListener('click',loginAction);

function loginAction(){

bottomDiv.style.display = '';

}

}

Login

Sign Out

input your name:

我要实现点击login按钮以后，页面上的提示输入文字和输入框input就会显示出来，为此我本来在标签里面为bottomDiv多写了一条display:none的样式(我注释掉的)，然后发现点击按钮的时候这个div怎么都显示不出来，console也不提示任何错误。找了资料才发现如果把display:none换成bottomDiv.style.display = 'none'写在

我想问的是，为什么会这样呀？难道是因为js代码不能动态修改