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>

赞 (0)

相关推荐

  • js实现class样式的修改、添加及删除的方法

    本文实例讲述了js实现class样式的修改.添加及删除的方法.分享给大家供大家参考.具体分析如下: 比较常见的js前端功能,通过修改标签的className实现相应的功能. 具体代码如下: 复制代码 代码如下: <table> <tbody> <tr> <td>js实现class的样式的修改.添加.删除</td> <td>  <a e_value="g_sn" ename="商品编码" c

  • js函数获取html中className所在的内容并去除标签

    复制代码 代码如下: <script type="text/javascript"> function queryClass(classnames){ var classobj= new Array();//定义数组 var classint=0;//定义数组的下标 var tags=document.getElementsByTagName("*");//获取HTML的所有标签 for(var i in tags){//对标签进行遍历 if(tags[

  • JavaScript操作class和style样式代码详解

    废话不多说了,直接给大家贴js代码了,具体代码如下所示: <!doctype html> <html> <head> <meta charset="utf-"> <title>无标题文档</title> <style> .fontSize { font-size:px; } .fontWeight { font-weight:bold; } </style> </head> &l

  • 原生js实现查找/添加/删除/指定元素的class

    复制代码 代码如下: window.onload = function(){ var gaga = document.getElementById( "gaga" ); addClass( gaga,"gaga1" ) addClass( gaga,"gaxx" ); removeClass( gaga,"gaga1" ) removeClass( gaga,"gaga" ) function hasCla

  • 使用JS实现jQuery的addClass, removeClass, hasClass函数功能

    废话不多说,直接上代码 复制代码 代码如下: function addClass(obj, cls){     var obj_class = obj.className,//获取 class 内容.     blank = (obj_class != '') ? ' ' : '';//判断获取到的 class 是否为空, 如果不为空在前面加个'空格'.     added = obj_class + blank + cls;//组合原来的 class 和需要添加的 class.     obj

  • 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-

  • Javascript中函数名.length属性用法分析(对比arguments.length)

    本文实例分析了Javascript中函数名.length属性用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g

  • ES6 javascript中class静态方法、属性与实例属性用法示例

    本文实例讲述了ES6 javascript中class静态方法.属性与实例属性用法.分享给大家供大家参考,具体如下: 类相当于实例的原型, 所有在类中定义的方法, 都会被实例继承. 如果在一个方法前, 加上static关键字, 就表示该方法不会被实例继承, 而是直接通过类来调用, 这就称为" 静态方法". class Foo { static classMethod() { return 'hello'; } } Foo.classMethod() // 'hello' var foo

  • JavaScript中访问id对象 属性的方式访问属性(实例代码)

    实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

  • JavaScript中关联原型链属性特性

    数据属性: 数据属性包含一个数据值的位置,在这个位置可以读取和写入值. 4个描述的行为特性: writable 表示能否修改属性的值.默认为true Enumerable 表示能否过过for in循环返回属性是否可以枚举. configuralbe 表示是否能过来delete删除属性从来重新定义属性,能否修改其配置. value 包含这个属性的数据值.读取属性值的时候,从这个位置读取. 写入属性值的时候,把新值保存在这个位置.这个特性的默认值为true. <script> function F

  • javascript中自定义对象的属性方法分享

    javascript中自定义对象的属性方法分享

    首先介绍下关联数组: 复制代码 代码如下: <script> var test=new Object(); test["a"]=1; test["b"]="string"; test["c"]=false; alert(test["a"]); </script> 执行上面的代码,显示1.在javascript中,方法和属性一样当做值来看待. 复制代码 代码如下: <script

  • javascript中innerText和innerHTML属性用法实例分析

    本文实例讲述了javascript中innerText和innerHTML属性用法.分享给大家供大家参考.具体分析如下: 几乎所有DOM元素都有innerText,innertHTML属性(注意大小写),分别是元素标签内 的文本表示形式和HTML源代码,这两个属性是可读可写的 innerHTML也可以取代createElement,属于简单,粗放型,后果自负的创建 <html xmlns="http://www.w3.org/1999/xhtml"> <head>

  • JavaScript中的style.cssText使用教程

    很多人用过 style.color.style.display 等直接设置元素的样式属性,但是 style.cssText 用过的人就不多了. cssText 本质是什么? cssText 的本质就是设置 HTML 元素的 style 属性值. cssText 怎么用? 复制代码 代码如下: document.getElementById("d1").style.cssText = "color:red; font-size:13px;"; 看了这个示例后,相信不说

  • JavaScript中的noscript元素属性位置及作用介绍

    一.<script>元素属性 向XHTML页面中插入JavaScript的主要方法,就是使用<script>元素,该元素有5个属性分别为charset.defer.language.src.type,经常使用的是type.src.defer这三个. 1.type属性的值一般都是text/javascript,该属性是必须的,<script type="text/javascript"/>. 2.src属性的值是*.js外部文件,该属性是可选的,<

  • javascript对象的使用和属性操作示例详解

    JavaScript 中所有变量都是对象,除了两个例外 null 和 undefined. 复制代码 代码如下: false.toString(); // 'false'[1, 2, 3].toString(); // '1,2,3' function Foo(){}Foo.bar = 1;Foo.bar; // 1 一个常见的误解是数字的字面值(literal)不是对象.这是因为 JavaScript 解析器的一个错误, 它试图将点操作符解析为浮点数字面值的一部分. 复制代码 代码如下: 2.

随机推荐