javascript - js中动态修改style属性的问题-PHP中文网问答

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

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




    
    SessionStorage





    
    



    input your name:

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

大家讲道理

光阴似箭催人老，日月如移越少年。

全部回复(4)

黄舟2017-04-11 11:24:14 4楼

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

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

 #bottomp{
     ...
     display: none;
 }

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

点击按钮之后

HTML 代码变成了:

<p id="bottomp" style="display:">...</p>

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

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

赞 +0

添加回复

巴扎黑2017-04-11 11:24:14 3楼

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

赞 +0

添加回复

PHP中文网2017-04-11 11:24:14 2楼

把

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

中的赋值改成

bottomp.style.display = 'inline';

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

赞 +0

添加回复

高洛峰2017-04-11 11:24:14 1楼

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

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

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

赞 +0

添加回复