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 相关文章推荐
jquery插件制作 自增长输入框实现代码
Aug 17 jQuery
Javascript中神奇的this
Jan 20 Javascript
关于验证码在IE中不刷新的快速解决方法
Sep 23 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
12条写出高质量JS代码的方法
Jan 07 Javascript
node.js 模块和其下载资源的镜像设置的方法
Sep 06 Javascript
Vue入门之数量加减运算操作示例
Dec 11 Javascript
javascript实现计算指定范围内的质数示例
Dec 29 Javascript
JavaScript学习笔记之DOM操作实例分析
Jan 08 Javascript
vue+element树组件 实现树懒加载的过程详解
Oct 21 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 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
分享一个Laravel好用的Cache宏
2015/03/02 PHP
Laravel框架基于ajax实现二级联动功能示例
2019/01/17 PHP
jquery.lazyload  实现图片延迟加载jquery插件
2010/02/06 Javascript
js 小贴士一星期合集
2010/04/07 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
图片上传判断及预览脚本的效果实例
2013/08/07 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
Javascript单元测试框架QUnitjs详细介绍
2014/05/08 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
input框中的name和id的区别
2016/11/16 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
vue-父子组件和ref实例详解
2019/11/10 Javascript
JS图片懒加载技术实现过程解析
2020/07/27 Javascript
Python Deque 模块使用详解
2014/07/04 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
python批量下载抖音视频
2019/06/17 Python
python对验证码降噪的实现示例代码
2019/11/12 Python
python 创建一维的0向量实例
2019/12/02 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
亚洲领先的设计购物网站:Pinkoi
2020/11/26 全球购物
介绍一下javax.servlet.Servlet接口及其主要方法
2015/11/30 面试题
办护照工作证明范本
2014/01/14 职场文书
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
毕业评语大全
2014/05/04 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL
用JS实现飞机大战小游戏
2021/06/09 Javascript
Sql Server之数据类型详解
2022/02/28 SQL Server
动画《朋友游戏》公开佐藤友生绘制的开播纪念绘
2022/04/06 日漫
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL