本文实例讲述了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. Objective-C学习笔记_Xcode模拟命令行填入参数执行

    菜单Product->Edit Scheme 左边找到run xxx,点击后再邮编选择Arguments面板中就可以设置Xcode在运行命令行app时模拟输入参数. 设置完成后再次run就会自动 ...

  2. 13. 用Roberts、Sobel、Prewitt和Laplace算子对一幅灰度图像进行边缘检测。观察异同。

    #include <opencv2/opencv.hpp> #include<opencv2/highgui/highgui.hpp> #include<opencv2/ ...

  3. iOS开发debug跟release版本屏蔽NSLog方法

    1.在***-Prefix.pch里面添加 #ifndef __OPTIMIZE__ # define NSLog(...) NSLog(__VA_ARGS__) #else # define NSL ...

  4. Python 字符串、元组、字典转换成列表

  5. 看看，这就是微软的“万物互联”系统 window10 IOT

    今天在深圳 WinHEC2015 大会上,微软正式发布了其基于 Windows 10 开发的,专门用于一系列物联网设备的操作系统:Windows 10 IoT for Smart Devices(是的 ...

  6. Action的搭建及application、request、Session的运用 多种方法

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  7. 在Web应用和IntelliJ IDEA中使用Spring框架

    在JAVA SE和Web应用中都可以使用Spring, 这里只说在Web程序中的应用. 下面将以Spring 3.0.5版本为例. 在Web中使用Spring只需要如下两个步骤: 第一,将Spring ...

  8. [Java解惑]字符串

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

  9. Codeforces Round #375 (Div. 2) D. Lakes in Berland dfs

    D. Lakes in Berland time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  10. HDU 1247 Hat's Words (map+string)

    Hat’s Words Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Tota ...