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 相关文章推荐
JS 的应用开发初探(mootools)
Dec 19 Javascript
Jquery为单选框checkbox绑定单击click事件
Dec 18 Javascript
JS冒泡事件的快速解决方法
Dec 16 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 Javascript
JS实现图片预加载之无序预加载功能代码
May 12 Javascript
浅谈webpack下的AOP式无侵入注入
Nov 12 Javascript
Angular2 父子组件通信方式的示例
Jan 29 Javascript
node实现基于token的身份验证
Apr 09 Javascript
详解angular如何调用HTML字符串的方法
Jun 30 Javascript
Vue 重置组件到初始状态的方法示例
Oct 10 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 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
第十三节 对象串行化 [13]
2006/10/09 PHP
PHP脚本的10个技巧(2)
2006/10/09 PHP
PHP显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
PHP字符串的递增和递减示例介绍
2014/02/11 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
Javascript的闭包详解
2014/12/26 Javascript
jQuery实现无限往下滚动效果代码
2016/04/16 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
js实现无缝轮播图效果
2020/03/09 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
Python爬取APP下载链接的实现方法
2016/09/30 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
Spy++的使用方法及下载教程
2021/01/29 Python
Pyecharts 中Geo函数常用参数的用法说明
2021/02/01 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
美国肌肉和力量商店:Muscle & Strength
2019/06/22 全球购物
标准毕业生自荐信范文
2013/11/04 职场文书
毕业自我鉴定总结
2014/03/24 职场文书
学校四群教育实施方案
2014/06/12 职场文书
广播体操口号
2014/06/18 职场文书
酒会开场白大全
2015/06/01 职场文书
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server