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">
</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);
}