js中使用style.display="" 无效的解决办法

我们先看一个实例

 代码如下 复制代码

<style>
 #name
 {
     display:none;
 }
</style>
</head>
<body>
<div id="name" >
My name is smile.
</div>
</body>
</html>
<script>
window.onload=function(){
document.getElementById('name').style.display="";
 alert("test");
}
</script>

css定义了id??ame的div为隐藏,而我们在页面加载完成之后用js控制该id显示出来,这样写有错么?
木有错?可是为什么界面上还是空白呢?
记得不?还有一个用法是xxx.style.display="block" 那我们试试吧,
呜呼,竟然显示了!!!

那我们查看一下style.display=""和style.display="block"用法有什么不同吧。

其实,这两个的最大区别是block是块显示的,所以会换行,那么既然就这么点区别,为什么在本例子中一个可以显示,一个不行呢?困扰。

好吧,这个问题先放开,我们先看现在这个问题中我们如何解决,除了用style.display="block"可以解决外,还有另外一种办法就是:

 代码如下 复制代码

<div id="name" style="display:none" >
My name is smile.
</div>
<script>
     document.getElementById('name').style.display="";
</script>

就是把id为name的样式用style这样内置到标签内,这样不管用display=""还是display="block"就都可以正常显示啦!!!

分享自己的做,我们做的时不是把display="",而是直接设置block或none这样不会出现上在的问题了,尽量不要使用空或其它字符哦。

时间: 2024-10-10 01:38:43

js中使用style.display="" 无效的解决办法的相关文章

js中style.display=&quot;&quot;无效的解决方法_javascript技巧

本文实例讲述了js中style.display=""无效的解决方法.分享给大家供大家参考.具体解决方法如下: 一.问题描述: 在js中我们有时想动态的控制一个div显示或隐藏或更多的操作,但如果我们style.display=""可能导致没有效果. 看下面一段代码: 复制代码 代码如下: <style>  #name  {      display:none;  } </style> </head> <body> &l

Windows 8/8.1系统中驱动安装“数据无效”错误解决办法

解决方案: 1. 我们在键中直接按下Winkey+R 然后在打开窗口我们 填写"services.msc" 然后回车进入之后我们点击 "计算机管理" 在这里找到 "服务" 进入如下图所示. 2. 在打开列表中我们找到"Device Install Service"和"Device Setup Manager"两个服务项,如果没启动我们就来"启动"此服务. 亦或在"以管理员身份运

rails中validates_confirmation_of验证方法无效的解决办法

    rails的model中提供了很多种自带的验证方法,validates_confirmation_of可以验证变量xxx和xxx_confirmation是否相等:这可以用于验证2遍输入的密码是否一致的情况.但是实际使用中发现上述验证方法貌似没有进行验证:在确认了变量:password和:password_confirmation名称确实没错的情况下,研究了半天,发现还要做一步操作,就是要在controller的user_params的许可中加入:password_confirmatio

wxpython中Textctrl回车事件无效的解决方法_python

本文实例讲述了wxpython中Textctrl回车事件无效的解决方法.分享给大家供大家参考,具体如下: 今天使用wxptyhon的Textctrl控件开发客户端时遇到了一个问题, 按照HTML表单的逻辑, 我们在Textctrl里回车应该提交查询, 但是wxpython的Textctrl很奇怪, 回车了居然是像Tab作用一样跳转到下一个控件.这样的话,要完成查询, 要么是鼠标点击按钮, 要么需要按两次或者两次以上. Google了一下, 无答案, 但是得到了一些有用的资料: TextCtrl支

IE6浏览器中window.location.href无效的解决方法_javascript技巧

本文实例讲述了IE6浏览器中window.location.href无效的解决方法.分享给大家供大家参考.具体方法如下: window.location.href是js中跳转功能,很多人在ie6中都会发现window.location.href不能跳转了,下面我给大家来介绍一下其原因与解决方法. 问题代码如下: 复制代码 代码如下: <a href="javascript:void(0);" onclick="javascript:test();">点击

ASP.NET在MVC中MaxLength特性设置无效的解决方法_实用技巧

本文实例讲述了ASP.NET在MVC中MaxLength特性设置无效的解决方法.分享给大家供大家参考.具体分析如下: 一.问题: 在ASP.NET MVC项目中,给某个Model打上了MaxLength特性如下: 复制代码 代码如下: public class SomeClass {     [MaxLength(16, ErrorMessage = "最大长度16")]     public string SomeProperty{get;set;} } 但在其对应的表单元素中并没有

Android onKeyDown监听返回键无效的解决办法

Android onKeyDown监听返回键无效的解决办法 当我们的Activity继承了TabActivity,在该类中重写onKeyDown是监听不到返回键的, 具体解决方法如下: 重写dispatchKeyEvent /** * 退出 */ @Override public boolean dispatchKeyEvent(KeyEvent event) { if (event.getKeyCode() == KeyEvent.KEYCODE_BACK && event.getAct

ubuntu中laravel提示缺少mcrypt扩展解决办法

mcrypt是一个加密的扩展了,在php中如果要使用此加密就必须安装mcrypt扩展了,下面我们来看看在ubuntu中laravel提示缺少mcrypt扩展解决办法,希望下文对你有帮助. 解决办法. sudo apt-get install php5-mcrypt sudo mv -i /etc/php5/conf.d/mcrypt.ini /etc/php5/mods-available sudo php5enmod mcrypt service apache2 restart 上面的方法不知

在ASP.net中的UpdatePanel,弹窗失败解决办法

原文:在ASP.net中的UpdatePanel,弹窗失败解决办法 最开始我用: Response.Write("<script>alert('和哈呵呵呵呵呵呵!')</script>"); 在没有UpdatePanel时,这个有效,能够正确弹出提示窗口. 后面,页面改进,加上局部刷新后,该方式失效了.探索出新的方式:   ScriptManager.RegisterStartupScript(this.UpdatePanel1, this.GetType(),