控制Web对象显示不同实现方法

浏览数：54 / 时间：2015年06月09日

实现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对象显示不同实现方法,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

控制Web对象显示不同实现方法