js中style.display=""无效的解决方法


Posted in Javascript onOctober 30, 2014

本文实例讲述了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"就都可以正常显示啦!

希望本文所述对大家基于javascript的web程序设计有所帮助。

Javascript 相关文章推荐
自适应图片大小的弹出窗口
Jul 27 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
js实现倒计时(距离结束还有)示例代码
Jul 24 Javascript
微信js-sdk界面操作接口用法示例
Oct 12 Javascript
js实现页面刷新滚动条位置不变
Nov 27 Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
nginx配置React静态页面的方法教程
Nov 03 Javascript
vue自定义底部导航栏Tabbar的实现代码
Sep 03 Javascript
新版小程序登录授权的方法
Dec 12 Javascript
使用element-ui table expand展开行实现手风琴效果
Mar 15 Javascript
ES6知识点整理之模块化的应用详解
Apr 15 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
Aug 14 Javascript
Js实现网页键盘控制翻页的方法
Oct 30 #Javascript
javascript实现iframe框架延时加载的方法
Oct 30 #Javascript
js中iframe调用父页面的方法
Oct 30 #Javascript
js防止页面被iframe调用的方法
Oct 30 #Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 #Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 #Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 #Javascript
You might like
介绍几个array库的新函数 php
2006/12/29 PHP
php创建无限级树型菜单
2015/11/05 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
PHP异常类及异常处理操作实例详解
2018/12/19 PHP
Javascript 学习书 推荐
2009/06/13 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
js螺旋动画效果的具体实例
2013/11/15 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
JS实现页面数据无限加载
2016/09/13 Javascript
自己封装的一个简单的倒计时功能实例
2016/11/23 Javascript
在Vue组件上动态添加和删除属性方法
2018/02/23 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
vue中keep-alive,include的缓存问题
2019/11/26 Javascript
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
linux服务器快速卸载安装node环境(简单上手)
2021/02/22 Javascript
[03:15]2014DOTA2国际邀请赛 专访国士无双信心满满
2014/07/12 DOTA
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
Python中的asyncio代码详解
2019/06/10 Python
python如何制作英文字典
2019/06/25 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
基于Python和PyYAML读取yaml配置文件数据
2020/01/13 Python
Css3实现无缝滚动防抖
2020/09/14 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
数据库什么时候应该被重组
2012/11/02 面试题
经理职责范文
2013/11/08 职场文书
小学后勤管理制度
2014/01/14 职场文书
群众路线个人整改方案
2014/10/25 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
八年级语文教学反思
2016/03/03 职场文书
Python如何配置环境变量详解
2021/05/18 Python