javascript - js中动态修改style属性的问题
问题描述
学了半个月js了，觉得有点难啊(￣△￣)总是遇到问题，然后想办法解决，再遇到问题...自从发现了sf这个社区，发现这里有很多热心肠的大神，愿意帮助像我这样的新手，在此衷心感谢各位热心耐心帮助我给我解答的程序员哥哥们:D
刚才又发现一个有意思的问题哦，老规矩，先上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SessionStorage</title>
</head>
<style type="text/css">
#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;*/
}
</style>
<script type="text/javascript">
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 = '';
}
}
</script>
<body onload = 'onLoad()'>
<div class="topButton">
<button id="login">Login</button>
<button id="sign out">Sign Out</button>
</div>
<div id="welcome"></div>
<div id="bottomDiv">
input your name:
<input id="name" value="" onclick="">
</div>
</body>
</html>我要实现点击login按钮以后，页面上的提示输入文字和输入框input就会显示出来，为此我本来在<style></style>标签里面为bottomDiv多写了一条display:none的样式（我注释掉的），然后发现点击按钮的时候这个div怎么都显示不出来，console也不提示任何错误。找了资料才发现如果把display:none换成bottomDiv.style.display = 'none'写在<script>标签里面，就可以显示了。（这里我想额外问一下如何才能让segmentFault提问时一些关键词呈块状高亮显示呢？我发现你们回答我问题的时候，很多关键词都是高亮的，一块一块有颜色的，看起来很有条理很舒服，我也想像你们那样实现这种效果，这样提问的问题才能看起来更舒服嘛:D）
我想问的是，为什么会这样呀？难道是因为js代码不能动态修改<style>标签里面的样式吗？麻烦各位咯，谢谢啦:D
在js中对元素
style属性的操作相当于更改元素的 行内样式
js代码没有更改原来你在 <style> 元素里写的
#bottomDiv{
...
display: none;
}只是在 HTMl 代码中增加了 style 属性
点击按钮之后
HTML 代码变成了:
<div id="bottomDiv" style="display:">...</div>
因为内联样式没有值，bottomDiv 使用的还是样式表中的样式 即 display:none
（关于高亮显示，请搜索 markdown语法）
这篇关于javascript - js中动态修改style属性的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
