DIV的style.display

最新推荐文章于 2022-01-17 09:05:10 发布

生活真美好

最新推荐文章于 2022-01-17 09:05:10 发布

阅读量4.6k

点赞数

分类专栏： HTML、CSS技术 javascript 文章标签： div css firefox table javascript input

HTML、CSS技术同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

javascript

11 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的display属性，包括其版本、兼容性、继承性、语法和参数等内容。此外，还对比了style.display与style.visibility的区别，并给出了在不同浏览器环境下使用display属性时可能遇到的问题及其解决方案。

摘要由CSDN通过智能技术生成

<html>
<head>
<script language=javascript>
function showclasscheck(checktype)
{
var objDiv = document.getElementById ("checkclass");
if (checktype==1)
objDiv.style.display = "block";
else
objDiv.style.display = "none";
}
</script>
</head>
<body>
<table border=0>
<tr>
<TD class=tablebody1>
<INPUT type=radio checked name=userclass value=0 οnclick="showclasscheck(0)">隐藏
<INPUT type=radio name=userclass value=1 οnclick="showclasscheck(1)" checked>显示</TD>
</TR>
</tr>
</table>
<div id="checkclass" align=center>测试区域</div>
</body>
</html>

程序体内：
if (xxxxxx){ //这里的xxxxx是判断语句
document.all.tmkh_net.style.display = ""; //显示
}
else{
document.all.tmkh_net.style.display = "none"; //不显示
}

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。

Firefox

关于HTML的style.display和style.visibility的区别大家都知道。
style.visibility一般取值'visible'或'hidden'进行显示和隐藏，但是元素所占据的网页位置是不释放的，只是看不见。效果就是该位置上空了一块。
而style.display一般取值'block'或'none'进行显示和隐藏，不过会释放掉网页上的位置。

但是如果在<table>中对<tr>或者<td>使用style.display来控制显示/隐藏某行或某个单元格的话，在IE中一切正常，但是在Firefox中就会出现错位的现象。
解决方法是把style.display='block' 写成 style.display=''就可以了，原因么，没看过FF代码，不清楚。