JavaScript中的style.display属性操作

 更新时间:2013年03月27日 14:08:05   作者:  
今天为大家介绍的是JavaScript中的style.display属性操作实现代码与参数介绍

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>

相关文章

  • BootStrap selectpicker后台动态绑定数据

    BootStrap selectpicker后台动态绑定数据

    这篇文章主要介绍了BootStrap selectpicker后台动态绑定数据的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • JS与SQL方式随机生成高强度密码示例

    JS与SQL方式随机生成高强度密码示例

    这篇文章主要介绍了JS与SQL方式随机生成高强度密码,结合实例形式分析了javascript方式与SQL方式生成高强度密码的相关操作技巧,需要的朋友可以参考下
    2018-12-12
  • JavaScript装饰器函数(Decorator)实例详解

    JavaScript装饰器函数(Decorator)实例详解

    这篇文章主要介绍了JavaScript装饰器函数(Decorator),结合实例形式分析了JavaScript装饰器函数(Decorator)的功能、实现与使用方法,需要的朋友可以参考下
    2017-03-03
  • JS实现520 表白简单代码

    JS实现520 表白简单代码

    本文是小编基于js实现的520表白代码,代码简单易懂非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-05-05
  • JS抛物线动画实例制作

    JS抛物线动画实例制作

    本篇文章给大家详细分析了JS抛物线动画制作过程以及相关的代码实例分享,有兴趣的朋友参考下。
    2018-02-02
  • JavaScript类的继承全面示例讲解

    JavaScript类的继承全面示例讲解

    在 ES5 中,类的继承可以有多种方式,然而过多的选择有时反而会成为障碍,ES6 统了类继承的写法,避免开发者在不同写法的细节之中过多纠缠,但在介绍新方法之前,还是有必要先回顾下ES5中类的继承方式
    2022-08-08
  • js学习阶段总结(必看篇)

    js学习阶段总结(必看篇)

    下面小编就为大家带来一篇js学习阶段总结(必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 浅谈键盘上回车按钮的js触发事件

    浅谈键盘上回车按钮的js触发事件

    下面小编就为大家带来一篇浅谈键盘上回车按钮的js触发事件。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • 基于javascript实现全国省市二级联动下拉选择菜单

    基于javascript实现全国省市二级联动下拉选择菜单

    这篇文章主要介绍了基于javascript实现全国省市二级联动下拉选择菜单,以一个完整实例形式较为详细的分析了js实现省市二级联动下拉菜单的实现技巧,非常简单实用,需要的朋友可以参考下
    2016-01-01
  • swiperjs实现导航与tab页的联动

    swiperjs实现导航与tab页的联动

    这篇文章主要为大家详细介绍了swiperjs实现导航与tab页的联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12

最新评论