CSS属性display的用法 display=""

display是设置元素的浮动特征，要区别visibility属性（visibility="visible|hidden"来表示(visible表示显示，hidden表示隐藏)）是隐藏元素但保持元素的浮动位置

(即两者最大的区别是：当display设为none这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上;而visibility设成hidden时元素虽然被隐藏了，但它仍然占据它原来所在的位置)

display有三种值

none：此元素不会被显示。
block：此元素将显示为块级元素，此元素前后会带有换行符，即使是span也会换行。
inline：默认。此元素会被显示为内联元素，元素前后没有换行符，即使是div也没换行。

此外，还有一种开发中比较常用的，就是 display="" 这种情况一般是none的取反，功能有时相当于block，有时也相当于inline。这里为什么这样说呢？我觉得是由于有些元素本身的特性决定的，还是以span和div举例，我们知道，前者不换行，后者是独立的一块，换行，这就决定了display=""的显示效果，如果是span元素对象的display=""，那么实际上是display="inline",即不换行的；如果div元素对象的display=""，那么实际上是display="block",即换行的,当然不止是div，换行的元素还有很多啊，比如tr，本身就是一行，肯定是换行的.

参照以下具体代码的运行效果：

1：div

<script language="JavaScript">
function toggleDisplay(me){
if (me.style.display==""){
me.style.display="inline";
alert("文本现在是：'inline'.");
} else if (me.style.display=="inline"){
me.style.display="none";
alert("文本现在是:'none'. 3秒钟后自动重新显示。");
window.setTimeout("blueText.style.display='';",3000,"JavaScript");
} else {
me.style.display="";
alert("文本现在是:''.");
}
}
 
</script>
<div>在<div id="blueText" οnclick="toggleDisplay(this)"

style="color:blue;position:relative;cursor:hand;">蓝色</div>文字上点击来查看效

果.</div>

2：span

<script language="JavaScript">
function toggleDisplay(me){
if (me.style.display==""){
me.style.display="inline";
alert("文本现在是：'inline'.");
} else if (me.style.display=="inline"){
me.style.display="none";
alert("文本现在是:'none'. 3秒钟后自动重新显示。");
window.setTimeout("blueText.style.display='';",3000,"JavaScript");
} else {
me.style.display="";
alert("文本现在是:''.");
}
}
 
</script>
<div>在<span id="blueText" οnclick="toggleDisplay(this)"

style="color:blue;position:relative;cursor:hand;">蓝色</span>文字上点击来查看效

果.</div>

 

================================================================================

以下是开发中遇到的以下例子，分享一下：

<div id="printFram" class="hidden">
   <div class="win_in">
    <div class="win_top">
     <h2 id="printStep111">
      您是否确认生效?
     </h2>
    </div>
    <div class="win_info win_m">
     <table width="460" border="0" cellspacing="0" align="center"
      cellpadding="0" class="win_tab">

      <tr  id="printStep11">
       <td align="left">
        <font size="-1" color="red">
         <div id="message">
          &nbsp;
         </div> </font> 1、一经生效，将无法修改，请确认。
        <br/>
        2、如果不生效则点击暂不生效按钮，不生效（责任期开始后系统自动生效），生效前可以修改。

       </td>
      </tr>
      <tr>
      <td>
      </td>
      </tr>
      <tr id="printStep1">
       <td align="center">
        <input οnclick="printHtml(11);" name="" value="确认生效"
         class="Button" type="button" id="synprint"/>
        <input name="" value="暂不生效" οnclick="save();"
         class="Button" type="button" id="save"/>
       </td>
      </tr>
      <tr id="printStep2" style="display: none">
       <td align="center">
        <input οnclick="printEpolicy('main');" name="" value="下载主单"
         class="Button" type="button" />
        <input οnclick="printEpolicy('list');" name="" value="下载清单"
         class="Button" type="button" />
        <input οnclick="closeDiv('printFram');" value="关闭"
         class="Button" type="button" />
       </td>
      </tr>
     </table>
     <div class="win_img">
     </div>
    </div>
   </div>
  </div>

js:

function printHtml(type){
    if(type==11&&!confirm("一经确认，无法修改，请确认") ){
       return;
    }
    document.all.message.innerHTML='数据同步中！';
    document.getElementById("save").disabled=true;
    document.getElementById("synprint").disabled=true;
   
    var ajax=new AjaxObject();
    ajax.onComplete=function(responseText, responseXml){
      var obj =eval('(' + responseText + ')');
      var msg=obj.msg;
      policyNo = obj.policyNo;
      if(msg!=null && msg!=''){
         document.all.message.innerHTML='同步失败-'+msg;
         document.getElementById("save").disabled=false;
      }else{
         //var url="htmlreport/"+obj.htmlPrintURL+".jsp";
       //window.open(url,"","titlebar=0,toolbar=0,menubar=0");
      
       if(type==11){
          document.all.message.innerHTML='***************************************‘;
       }else{
          closeDiv('printFram');
       }      
      
       document.all.printStep11.style.display="none";
       document.all.printStep111.innerHTML ="下载";
       document.all.printStep1.style.display="none";
       document.all.printStep2.style.display="";
      }
       document.getElementById("synprint").disabled=false;
   }
   
   ajax.send("${root}/addgrouppolicysz.do","method=print&printType="+type,"POST",true);  
}