JavaScript中的style.display属性操作


Posted in Javascript onMarch 27, 2013

display版本:CSS1/CSS2    兼容性:IE4+   NS4+ 继承性:无  

语法:
     
display   :   block   |   none   |   inline   |   compact   |   marker   |   inline-table   |   list-item   |   run-in   |   table   |table-caption   |   table-cell   |   table-column   |   table-column-group   |   table-footer-group   |   table-header-group   |   table-row   |   table-row-group    

参数:    

block   :    CSS1 块对象的默认值。用该值为对象之后添加新行    
none   :    CSS1 隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间    
inline   :    CSS1 内联对象的默认值。用该值将从对象中删除行    
compact   :    CSS2 分配对象为块对象或基于内容之上的内联对象    
marker   :    CSS2 指定内容在容器对象之前或之后。要使用此参数,对象必须和:after及:before   伪元素一起使用    
inline-table   :    CSS2 将表格显示为无前后换行的内联对象或内联容器    
list-item   :    CSS1 将块对象指定为列表项目。并可以添加可选项目标志    
run-in   :    CSS2 分配对象为块对象或基于内容之上的内联对象    
table   :    CSS2 将对象作为块元素级的表格显示    
table-caption   :    CSS2 将对象作为表格标题显示    
table-cell   :    CSS2 将对象作为表格单元格显示    
table-column   :    CSS2 将对象作为表格列显示    
table-column-group   :    CSS2 将对象作为表格列组显示    
table-header-group   :    CSS2 将对象作为表格标题组显示    
table-footer-group   :    CSS2 将对象作为表格脚注组显示    
table-row   :    CSS2 将对象作为表格行显示    
table-row-group   :    CSS2 将对象作为表格行组显示    

说明:    

设置或检索对象是否及如何显示。  
目前   IE5.5仅支持以上CSS1的参数。    
对应的脚本特性为display。请参阅我编写的其他书目。

下面给个例子:点击显示或隐藏

<script language="JavaScript">
function show(str){
var i=documeng.getElementById(str);
if (i.style.display == "none") {     
   i.style.display = "";     
}
else{     
   i.style.display = "none";     
}     
}      
</script>
Javascript 相关文章推荐
深入理解JavaScript系列(12) 变量对象(Variable Object)
Jan 16 Javascript
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 Javascript
jQuery过滤选择器用法示例
Sep 12 Javascript
js css自定义分页效果
Feb 24 Javascript
JS 调试中常见的报错问题解决方法
May 20 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
浅析Vue项目中使用keep-Alive步骤
Jul 27 Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
js实现开关灯效果
Mar 30 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
Mar 03 Javascript
jquery ajax提交整个表单元素的快捷办法
Mar 27 #Javascript
jQuery渐变发光导航菜单的实例代码
Mar 27 #Javascript
鼠标放在图片上显示大图的JS代码
Mar 26 #Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 #Javascript
两种常用的javascript数组去重方法思路及代码
Mar 26 #Javascript
javascript变量作用域使用中常见错误总结
Mar 26 #Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
Mar 26 #Javascript
You might like
PHP脚本的10个技巧(8)
2006/10/09 PHP
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
关于javascript event flow 的一个bug详解
2013/09/17 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
JavaScript实现查找字符串中第一个不重复的字符
2014/12/29 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
简单介绍jsonp 使用小结
2016/01/27 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
用Python的Tornado框架结合memcached页面改善博客性能
2015/04/24 Python
关于反爬虫的一些简单总结
2017/12/13 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
python实现手势识别的示例(入门)
2020/04/15 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
使用matlab 判断两个矩阵是否相等的实例
2020/05/11 Python
没编程基础可以学python吗
2020/06/17 Python
Myprotein葡萄牙官方网站:英国优质运动营养品牌
2016/09/12 全球购物
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
骨干教师个人总结
2015/02/11 职场文书
新农村建设指导员工作总结
2015/08/13 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书