JavaScript中的style.display属性操作

转载:http://www.jb51.net/article/35086.htm

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>

时间: 2024-08-28 00:44:19

JavaScript中的style.display属性操作的相关文章

ie、firefox、chrome中关于style=&quot;display:block&quot; 引发的页面布局错乱的解决办法

ie.firefox.chrome中关于style="display:block" 引发的页面布局错乱的解决办法: table中tr 添加style="display:block" 导致页面布局错乱 对table中tr 不显示时,添加style="display:none",ie.chrome.firefox等都没有问题.但是如果想要显示某个tr,就不能使用style="display:block"了,因为,在ie下,可以正常

table中tr的display属性在火狐中显示不正常,IE中显示正常

最近在作项目的时候碰到一个问题,就是需要AJAX来交互显示<tr> </tr> 标签内的东西,按照常理,对于某一单元行需要显示时,使用:display:block属性,不需要显示时使用display:none属性,而且这样做 在IE浏览器中显示正常,没有任何问题. 但是当用Firefox浏览时却出现了布局错乱的问题,然后通FireBug去看了下源码,调试下了,发现是display:block属性搞的鬼. 1.当表格为多列的情况下,属性为"display:block&quo

(一)javascript中的数组index属性——获取数组的索引值

例如:要做到这样的效果 点击每个选项时,会显示不同的div. 我们的做法:在javascript中,先把所有的div的display设置为none,然后在根据当前的数组里的索引值进行一个显示div的过程. 下面的例子就是: 首先,把妙味课堂.妙味茶馆.苗味视频选项的div设置为display:none: 然后,早在之前就以前设置好了数组的索引值 btn[i].index=i; 于是当所有div都设置为display:none后,再把点击的那个div的display设置为block就可以了 con

JavaScript中的DOM及相关操作

一.什么是DOM JavaScript由ECMAScript.DOM和BOM三部分组成,其中DOM代表描述网页内容的方法和接口,即文档对象模型(Document Object Model).在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM,而树形结构就是我们常说的DOM树. 维基百科中介绍DOM更为准确:DOM是一种跨平台和语言非依赖性的应用程序编程接口,即处理现在的HTML,XHTML或XML文档作为树结构,其中每个节点是一个对象,每个节点表示

深入理解javascript对象系列第二篇——属性操作

× 目录 [1]查询 [2]设置 [3]删除[4]继承 前面的话 对于对象来说,属性操作是绕不开的话题.类似于“增删改查”的基本操作,属性操作分为属性查询.属性设置.属性删除,还包括属性继承.本文是对象系列的第二篇——属性操作 属性查询 属性查询一般有两种方法,包括点运算符和方括号运算符 var o = { p: 'Hello World' }; o.p // "Hello World" o['p'] // "Hello World" [注意]变量中可以存在中文,因

Android中的style相关属性

android中的style属性值 Android平台定义的主题样式: android:theme="@android:style/Theme.Dialog" // 将一个Activity显示为对话框模式 android:theme="@android:style/Theme.NoTitleBar" // 不显示应用程序标题栏 android:theme="@android:style/Theme.NoTitleBar.Fullscreen" /

全面理解Javascript中Function对象的属性和方法

函数是 JavaScript 中的基本数据类型,在函数这个对象上定义了一些属性和方法,下面我们逐一来介绍这些属性和方法,这对于理解Javascript的继承机制具有一定的帮助. 属性(Properties) arguments 获取当前正在执行的 Function 对象的所有参数,是一个类似数组但不是数组的对象,说它类似数组是因为其具有数组一样的访问性质及方式,可以由arguments[n]来访问对应的单个参数的值,并拥有数组长度属性length.还有就是arguments对象存储的是实际传递给

javascript中对象访问自身属性的方式

在javascript中,通过对象的方法访问对象自身属性时,必须采用this.fieldName的方式. 原因是javascript中Function是无状态的,访问对象的属性时,必须指定当前的上下文状态,即添加this关键字.如果没有指定,则上下文默认为window. 举例如下: 1 var obj = 2 { 3 name:"James", 4 showName:function(){ 5 alert(name); 6 } 7 } 通过控制台执行obj.showName() 输出为

JavaScript中无符号右移赋值操作

无符号右移赋值操作 (>>>=)是对变量值根据表达式值所规定的位数进行无符号右移,并将结果赋给该变量.示例代码: result >>>= expression 其中参数是result任何变量. expression是任何表达式. JavaScript中无符号右移赋值操作说明 使用 >>>= 运算符和使用下面的语句是等效的:health.hljmlyfcyy.com result = result >>> expression >