本文实例讲述了js中style.display=""无效的解决方法。分享给大家供大家参考。具体解决方法如下：

一、问题描述：

在js中我们有时想动态的控制一个div显示或隐藏或更多的操作，但如果我们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为name的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"就都可以正常显示啦!

js中style.display=""无效的解决方法的更多相关文章

  1. JS中style.display和style.visibility的区别

    在JS中可以通过设置style.display或者style.visibility属性来控制元素是否显示,在style.display=block和style.visibility=visible的时 ...

  2. strtus2中的default-action-ref无效的解决方法

    strtus2中的default-action-ref的作用是我们在浏览器中访问错误的地址时可以跳转到自己设置的错误页面,而不是令人尴尬的系统错误页面,这个系统错误很常见,就是提示在namespace ...

  3. winform中devexpress bindcommand无效的解决方法

    正常绑定,编译运行无报错,但无法执行command fluentAPI.BindCommand(commandButton, (x, p) => x.DoSomething(p), x => ...

  4. Devexpress xaf针对某个用户登录后在面板中设置导航无效的解决方法

    Devexpress xaf框架生成的项目默认情况下导航栏是显示在左侧,有时候我们用某个账户登录后,发现导航栏无法显示在左侧,操作十分不方便.我们可以去数据库删除当前登录用户的自定义布局 解决方法如下 ...

  5. js原生态函数中使用jQuery中的 $(this)无效的解决方法

    原文地址:http://www.jb51.net/article/27238.htm 今天遇到一个听郁闷的问题,正如title所说 js中原生态函数在jQuery 中使用 $(this) 被解析成un ...

  6. Node.js中针对中文的查找和替换无效的解决方法

    Node.js中针对中文的查找和替换无效的解决方法.   //tags的值: tag,测试,帖子 var pos1 = tags.indexOf("测"); //这里返回-1 ta ...

  7. WPF：指定的命名连接在配置中找不到、非计划用于 EntityClient 提供程序或者无效的解决方法

    文/嶽永鹏 WPF 数据绑定中绑定到ENTITY,如果把数据文件做成一个类库,在UI文件中去应用它,可能遇到下面这种情况. 指定的命名连接在配置中找不到.非计划用于 EntityClient 提供程序 ...

  8. channelartlist中autoindex无效的解决方法

    {dede:channelartlist}中有使用autoindex无效的解决方法 在设计频道首页的时候,使用{dede:channelartlist}标签时,有很多朋友想做一些高级的开发,让重复的频 ...

  9. 设置height:100%无效的解决方法

    设置height:100%无效的解决方法 刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:" ...

随机推荐

  1. CodeForces 628B New Skateboard

    New Skateboard time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  2. DataGridView的自定义列排序

    1,将需要进行排序的列做属性的设置 this.colUserName.SortMode = DataGridViewColumnSortMode.Programmatic; 2,添加列的事件 //点击 ...

  3. CodeForces 131A cAPS lOCK

    cAPS lOCK Time Limit:500MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Submit St ...

  4. centos7 安装教程

    1. 在安装的时候,不要用默认的最小安装.选择GNOME Desktop 2.自动分区的时候,选择自己进行分区 2个分区,1个大小为1024M的swap分区,剩下的分配一个ext3的分区.设备类型都选 ...

  5. jquery加载页面的方法

    jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别.   1.$(function(){ $("#a&q ...

  6. Python面向对象入门

    http://www.math.pku.edu.cn/teachers/qiuzy/ds_python/courseware/ 这本书的第二章写的是抽象数据类型和Python类 以前从没想过认真的去写 ...

  7. Win7_提高性能

    1. 设置成经典主题:桌面->右键->个性化->经典主题 2. 计算机->右键->属性->高级系统设置 ==> 系统属性->高级->性能-> ...

  8. parseInt 的第二个参数

    ["1","2","3"].map(parseInt) //[1,NaN,NaN] ["1","2" ...

  9. poj3565Ants(KM-几何与图论的结合）

    链接 可以看出蓝的之和一定比红的之和要大,也就是说符合条件的匹配一定是权值最小的,所以二分图的最佳完美匹配..KM #include <iostream> #include<cstd ...

  10. 把excel中的数据导入到数据库

    import.php <?php header("Content-Type:text/html;charset=utf-8"); echo '<html> < ...