实现HTML页面中对象的隐藏有两种实现方法：其一是通过style对象的display属性；另外一个是通过visibility属性。二者却存在着微秒的差异，visibility属性规定了元素是否可见，即使不可见的元素也会占据页面的空间，恰好相反，display属性设置的不可见元素则不会占据页面的空间。
（原始图）
（设置visibility属性）
（设置display属性）
从上面可以清楚看出，两者属性之间的布局差异，但是在设置display属性之后，出现了页面显示错位（IE下正常，Chrome与FF下显示错位）的情况，到底是什么原因造成的呢，经过一番查找，原来跟display所设置的值有关，先来看看display可能的值有哪些：
在测试代码中，我们设置的display的值设置成block，这样导致不同的浏览器出现了不同的显示结果，根据捕捉分析，IE中设置block与table-row之后的显示结果一样，但是Chrome与FF则出现很大的差异，以Chrome为例，根据下图，对于tr，chrome则给了它一个内部样式值，即table-row，设置成block，出现了显示错误，因此我们只需要保持默认值即可，那就是只需要删除display属性，保证它们均处于默认值之下，就不会出现浏览器的不兼容问题了。
【测试代码】
<html>
<head>
<meta HTTP-EQUIV='Pragma' CONTENT='no-cache'>
<script language="javascript" src="util.js"></script>
<script language="javascript">
function showhide(element, sh)
{
var status;
if (sh == 1) {
status = "block";
}
else {
status = "none";
}
if (document.getElementById)
{
// standard
document.getElementById(element).style.display = status;
// document.getElementById(element).style.visibility = status;
}
else if (document.all)
{
// old IE
document.all[element].style.display = status;
// document.all[element].style.visibility = status;
}
else if (document.layers)
{
// Netscape 4
document.layers[element].display = status;
// document.layers[element].visibility = status;
}
}
function setDisable(item, value)
{
if ( value == 1 || value == '1' ) {
item.disabled = true;
} else {
item.disabled = false;
}
}
function clearStyle(element)
{
var value="";
if (document.getElementById)
{
// standard
document.getElementById(element).style.cssText = value;
}
else if (document.all)
{
// old IE
document.all[element].style.cssText = value;
}
else if (document.layers)
{
// Netscape 4
document.layers[element].cssText = value;
}
}
function changeDuidType() {
with ( document.forms[0] ) {
if (DUIDType.options[DUIDType.selectedIndex].value == "1")//DUID-LLT
{
clearStyle("dhcpcOp61HwType");
// showhide("dhcpcOp61HwType", 1)
setDisable(dhcpcOp61HwTypeValue, 0);
clearStyle("dhcpcOp61LinkAddr");
// showhide("dhcpcOp61LinkAddr", 1)
setDisable(dhcpcOp61LinkAddrValue, 0);
showhide("dhcpcOp61Other", 0);
clearStyle("dhcpcOp61Time");
// showhide("dhcpcOp61Time", 1)
setDisable(dhcpcOp61TimeValue, 0);
showhide("dhcpcOp61En", 0);
showhide("dhcpcOp61Id", 0);
}
else if (DUIDType.options[DUIDType.selectedIndex].value == "2") //DUID_EN
{
showhide("dhcpcOp61HwType", 0);
showhide("dhcpcOp61LinkAddr", 0);
showhide("dhcpcOp61Other", 0);
showhide("dhcpcOp61Time", 0);
clearStyle("dhcpcOp61En");
setDisable(dhcpcOp61EnValue, 0);
clearStyle("dhcpcOp61Id");
setDisable(dhcpcOp61IdValue, 0);
}
else if (DUIDType.options[DUIDType.selectedIndex].value == "3") //DUID_LL
{
clearStyle("dhcpcOp61HwType");
setDisable(dhcpcOp61HwTypeValue, 0);
clearStyle("dhcpcOp61LinkAddr");
setDisable(dhcpcOp61LinkAddrValue, 0);
showhide("dhcpcOp61Other", 0);
showhide("dhcpcOp61Time", 0);
showhide("dhcpcOp61En", 0);
showhide("dhcpcOp61Id", 0);
}
else
{
showhide("dhcpcOp61HwType",0);
showhide("dhcpcOp61LinkAddr", 0);
clearStyle("dhcpcOp61Other");
setDisable(dhcpcOp61OtherValue, 0);
showhide("dhcpcOp61Time", 0);
showhide("dhcpcOp61En", 0);
showhide("dhcpcOp61Id", 0);
}
}
}
// done hiding -->
</script>
</head>
<body >
<blockquote>
<form>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="160"> DUID Type:</td>
<td>
<select id='DUIDType' size="1" onchange="changeDuidType()">
<option value="1">DUID-LLT</option>
<option value="2">DUID-EN</option>
<option value="3">DUID-LL</option>
<option value="4">Other</option>
</select>
</td>
</tr>
<tr id='dhcpcOp61Other'>
<td> DUID:</td>
<td><input type='text' id='dhcpcOp61OtherValue'></input></td>
</tr>
<tr id='dhcpcOp61HwType'>
<td> Hardware Type:</td>
<td><input type='text' id='dhcpcOp61HwTypeValue' maxlength='5'></input></td>
</tr>
<tr id='dhcpcOp61LinkAddr'>
<td> Link-layer Address:</td>
<td><input type='text' id='dhcpcOp61LinkAddrValue' maxlength='17'></input></td>
</tr>
<tr id='dhcpcOp61Time'>
<td> Time:</td>
<td><input type='text' id='dhcpcOp61TimeValue' maxlength='10'></input></td>
</tr>
<tr id='dhcpcOp61En'>
<td> Enterprise Number:</td>
<td><input type='text' id='dhcpcOp61EnValue' maxlength='10'></input></td>
</tr>
<tr id='dhcpcOp61Id'>
<td> Identify:</td>
<td><input type='text' id='dhcpcOp61IdValue'></input></td>
</tr>
</table><br><br>
</form>
</blockquote>
</body>
</html>
控制Web对象显示不同实现方法
时间： 2024-08-27 15:50:12