phpstudy集成环境

 首页 > js中动态修改style属性的问题

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

display的值可以去很多，none代表不显示，block代表以块显示，inline-block代表行内块显示…你不让等于none，总得让等于一个别的吧？
比如，你的男朋友不是我，总的是别人吧。如果没有，请联系我！

把

    function loginAction(){
        bottomDiv.style.display = '';
    }

中的赋值改成

bottomDiv.style.display = 'inline';

否则你打开浏览器看看你什么都不写浏览器识别成none了。

在js中对元素style属性的操作相当于更改元素的 行内样式

js代码没有更改原来你在 <style> 元素里写的

 #bottomDiv{
     ...
     display: none;
 }

只是在 HTMl 代码中增加了 style 属性

点击按钮之后

HTML 代码变成了:

<div id="bottomDiv" style="display:">...</div>

因为内联样式没有值，bottomDiv 使用的还是样式表中的样式 即 display:none

（关于高亮显示，请搜索 markdown语法）

js不是修改你的原来写好的css属性，而是在DOM上加上内联的css属性，

<input id="name" value="" onclick="" style="display: "> //点击login后，内联css没有值啊，就变成你原来预先设置的 display： none了

<input id="name" value="" onclick="" style="display: none">

【热门文章】
【热门文章】