本文介绍如何使用JavaScript控制HTML FieldSet组件的展开与收缩功能。通过获取FieldSet内部表格及图片元素，动态修改可见性与高度属性，并切换展开/收缩状态图片，实现兼容IE与Firefox的交互效果。
JavaScript控制FieldSet展开与收缩实现
具体实现代码如下：
// 定义FieldSet高度控制函数，兼容IE浏览器与Firefox
// 参数1：pTableID，代表FieldSet内部div或table元素的id
// 参数2：pFieldSetID，代表FieldSet容器本身的id
// 参数3：pImageID，代表状态图片的id，用于更新展开或收缩后的图片源
function FieldSetVisual( pTableID, pFieldSetID, pImageID )
{
var objTable = document.getElementById( pTableID ) ;
var objFieldSet = document.getElementById( pFieldSetID) ;
var objImage = document.getElementById( pImageID) ;
if( objTable.style.visibility == 'visible' )
{
objTable.style.visibility = 'hidden' ;
objFieldSet.style.height = "22px" ;
objImage.src="images/expand.png" ;
}
else
{
objTable.style.visibility = 'visible';
var heightFieldSet = parseInt( objFieldSet.style.height.substr(0,objFieldSet.style.height.length-2)) ;
var heightTable = parseInt( objTable.offsetHeight ) ;
objFieldSet.style.height = heightFieldSet + heightTable + "px" ;
objImage.src="images/constringency.png" ;
}
}HTML中FieldSet代码：
HTML结构示例
对应的HTML结构代码如下：
<fieldset id="fset_ShipInportInfo">
<legend>
<img alt="展开或收缩" id="img_ShipInportInfo" src="images/constringency.png" src="images/constringency.png" onclick="FieldSetVisual('t_ShipInportInfo','fset_ShipInportInfo','img_ShipInportInfo')" />车船到厂记录<span style="color: Red;" style="color: Red;">（已录入/未录入）</span></legend>
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="t_ShipInportInfo",
style="visibility: visible;" style="visibility: visible;">
<tr>
<td>
车船名：<span style="font-weight: bold;" style="font-weight: bold;">车皮 等 共50节</span>
</td>
<td>
车船到达时间：2009年5月9日 17时
</td>
<td>
来煤方式：<span style="font-weight: bold;" style="font-weight: bold;">铁路</span>
</td>
<td>
煤炭来源：<span style="font-weight: bold;" style="font-weight: bold;">淮南</span>
</td>
</tr>
</tr>
</table>
</fieldset>