本文实例讲述了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. Apache Commons CLI 开发命令行工具示例

    概念说明Apache Commons CLI 简介 虽然各种人机交互技术飞速发展,但最传统的命令行模式依然被广泛应用于各个领域:从编译代码到系统管理,命令行因其简洁高效而备受宠爱.各种工具和系统都 提 ...

  2. zImage.img、ramdisk.img、system.img、userdata.img介绍及解包、打包方法

    ramdisk.img system.img userdata.img介绍及解包.打包方法 Android 源码编译后,在out/target/product/generic下生成ramdisk.im ...

  3. java中为什么byte的取值范围是-128到+127

    概念:java中用补码表示二进制数,补码的最高位是符号位,最高位为“0”表示正数,最高位为“1”表示负数.正数补码为其本身:负数补码为其绝对值各位取反加1:例如:+21,其二进制表示形式是000101 ...

  4. 第一课 android环境搭建

    android环境搭建需要的工具: 1.JDK 2.eclipse 3.SDK 4.ADT

  5. CAShapeLayer 与贝塞尔曲线

    一 CAShapeLayer 简介 1,CAShapeLayer继承至CALayer,可以使用CALayer的所有属性 2,CAShapeLayer需要与贝塞尔曲线配合使用才有意义:单独使用毫无意义 ...

  6. Linux 上网络监控工具 ntopng 的安装

    当今世界,人们的计算机都相互连接,互联互通.小到你的家庭局域网(LAN),大到最大的一个被我们称为互联网.当你管理一台联网的计算机时,你就是在管理最关键的组件之一.由于大多数开发出的应用程序都基于网络 ...

  7. 树的prufer编码

    prufer是无根树的一种编码方式,一棵无根树和一个prufer编码唯一对应,也就是一棵树有唯一的prufer编码,而一个prufer编码对应一棵唯一的树. 第一部分:树编码成prufer序列. 树编 ...

  8. Shifting List Item Values From One List To Another In Oracle Forms

    Suppose you have two T-List items in form and you want  to shift element values from one list to ano ...

  9. [SAP ABAP开发技术总结]内表操作

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  10. 图-用DFS求连通块- UVa 1103和用BFS求最短路-UVa816。

    这道题目甚长, 代码也是甚长, 但是思路却不是太难.然而有好多代码实现的细节, 确是十分的巧妙. 对代码阅读能力, 代码理解能力, 代码实现能力, 代码实现技巧, DFS方法都大有裨益, 敬请有兴趣者 ...