div的visibility和display屬性的區(qū)別
Posted on 2010-09-14 13:47 小強(qiáng)摩羯座 閱讀(1036) 評(píng)論(0) 編輯 收藏 所屬分類: Java• 前者:看見與不看見,但是位置保留。
• 后者處理與位置有關(guān):block, inline, none 分別是有前后換行,不換行,不顯示功能但是不保留位置。
• 二者功能差異:保留位置,和位置形式
<script language="javascript">
function toggleVisibility(me)
{
if(me.style.visibility=="hidden")
{
me.style.visibility="visible";
}
else
{
me.style.visibility="hidden";
}
}
</script>
<DIV onclick="toggleVisibility(this)"
style="position:relative">
第一行文本將會(huì)觸發(fā)"hidden"和"visible"屬性,注意第二行的變化。
</DIV>
<DIV>因?yàn)関isibility會(huì)保留元素的位置,所以第二行不會(huì)移動(dòng).</DIV>
<script language="javascript">
function toggleDisplay(me){
if(me.style.display=="block"){
me.style.display="inline";
alert("文本現(xiàn)在是:'inline'.");
}
else{
if(me.style.display=="inline"){
me.style.display="none";
alert("文本現(xiàn)在是:'none'.3秒鐘后自動(dòng)重新顯示。");
window.setTimeout("blueText.style.display='block';",
3000,"javascript");
}
else{
me.style.display="block";
alert("文本現(xiàn)在是:'block'.");
}
}
}
</script>
<DIV>在<span id="blueText"
onclick="toggleDisplay(this)"
style="color:blue;position:relative;cursor:hand;">
藍(lán)色</span>文字上點(diǎn)擊來查看效果.</DIV>
• 后者處理與位置有關(guān):block, inline, none 分別是有前后換行,不換行,不顯示功能但是不保留位置。
• 二者功能差異:保留位置,和位置形式
<script language="javascript">
function toggleVisibility(me)
{
if(me.style.visibility=="hidden")
{
me.style.visibility="visible";
}
else
{
me.style.visibility="hidden";
}
}
</script>
<DIV onclick="toggleVisibility(this)"
style="position:relative">
第一行文本將會(huì)觸發(fā)"hidden"和"visible"屬性,注意第二行的變化。
</DIV>
<DIV>因?yàn)関isibility會(huì)保留元素的位置,所以第二行不會(huì)移動(dòng).</DIV>
<script language="javascript">
function toggleDisplay(me){
if(me.style.display=="block"){
me.style.display="inline";
alert("文本現(xiàn)在是:'inline'.");
}
else{
if(me.style.display=="inline"){
me.style.display="none";
alert("文本現(xiàn)在是:'none'.3秒鐘后自動(dòng)重新顯示。");
window.setTimeout("blueText.style.display='block';",
3000,"javascript");
}
else{
me.style.display="block";
alert("文本現(xiàn)在是:'block'.");
}
}
}
</script>
<DIV>在<span id="blueText"
onclick="toggleDisplay(this)"
style="color:blue;position:relative;cursor:hand;">
藍(lán)色</span>文字上點(diǎn)擊來查看效果.</DIV>