JS怎么控制footer一直在页面的底部？JS大神来！

JavaScript011

JS怎么控制footer一直在页面的底部？JS大神来！,第1张

<HTML>

<HEAD>

<title>让footer总是停留在页面的底部</title>

<script language="javascript">

<!--

function moveFooter() {

var iBottom = 0

if (document.all) {

if (parseInt(document.body.scrollHeight) >parseInt(document.body.clientHeight)) {

iBottom = parseInt(document.body.scrollHeight)

}

else iBottom = parseInt(document.body.clientHeight)

document.all["lyfooter"].style.pixelTop = iBottom - parseInt(document.all["lyfooter"].style.height)

document.all["lyfooter"].style.visibility = "visible"

}

else if (document.layers){

if (document.height >self.innerHeight) {

iBottom = document.height

}

else iBottom = self.innerHeight

document.layers["lyfooter"].top = parseInt(iBottom - document.layers["lyfooter"].document.height)

document.layers["lyfooter"].visibility = "visible"

}

else if (document.getElementById) { //NS6

if (document.height >self.innerHeight) {

iBottom = document.height

}

else iBottom = self.innerHeight

document.getElementById("lyfooter").style.top = (parseInt(iBottom - parseInt(document.getElementById("lyfooter").style.height))) + "px"

document.getElementById("lyfooter").style.visibility = "visible"

}

}

//-->

</script>

</HEAD>

<body MS_POSITIONING="GridLayout" onresize="moveFooter()" onload="moveFooter()">

<form id="Form1" method="post">

<!----bottom part--------->

<div id="lyfooter" style="position:absoluteleft:0pxtop:100pxheight:19pxz-index:2visibility:hidden">

<table border="0" width="100%" cellspacing="0" cellpadding="3">

<tr>

<td width="100%" bgColor="#319a63" class="footnote"><font color="#ffffff" size="2px" face="Verdana, Arial, Helvetica, sans-serif">©

2005 ABCDE, Inc.</font></td>

</tr>

</table>

</div>

<!----/bottom part--------->

</form>

</body>

</HTML>

这个不是JS问题，EXTJS的桌面布局，有一个CSS，

overflow : hidden

如果你说的是被下面的任务栏遮掉的一部分，那是因为你显示的这个DIV的层级不够高。给需要显示的DIV加上一句CSS试试：

z-index: 10000

代码如下：

<html>

<head>

<meta http-equiv="Content-Type" content="text/html charset=gb2312">

<title>div隐藏与显示</title>

<style type=text/css>

#menus {

       background-color: #c4cff0      

      }

</style>

<script   language=javascript>

function Layer_HideOrShow(cur_div)

{ var current=document.getElementById(cur_div)

   if(current.style.visibility=="hidden")

     {

       current.style.visibility ="visible"

     }

   else

    {

      current.style.visibility ="hidden"

    }

}

</script>

</head>

<body>

<p>　</p>

<table border="0" width="153" cellpadding="0" style="border-collapse: collapse" id="table1" height="101">

<tr>

   <td>

   <a href="#" onclick="Layer_HideOrShow('menus')"><img border="0" src="http://www.shuifutour.com/images/456.gif" width="153" height="25"></a></td>

</tr>

<tr>

   <td>

   <div id="menus">

    <table border="0" width="100%" cellpadding="0" style="border-collapse: collapse" height="150" id="table2">

     <tr>

      <td>　</td>

     </tr>

    </table>

   </div></td>

</tr>

</table>

</body>

</html>

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

<html>

<head>

<meta http-equiv="Content-Type" content="text/html charset=gb2312" />

<title>无标题文档</title>

<script language="JavaScript" type="text/JavaScript">

<!--

function toggle(targetid){

     if (document.getElementById){

         target=document.getElementById(targetid)

             if (target.style.display=="block"){

                 target.style.display="none"

             } else {

                 target.style.display="block"

             }

     }

}

-->

</script>

<style type="text/css">

<!--

#div1{

background-color:#000000

height:400px

width:400px

display:none

}

-->

</style>

</head>

<body>

<input type="button" id="butn" value="显示/隐藏" onclick="toggle('div1')" />

<center>

<div id="div1"></div></center>

居中的DIV

</body>

</html>

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

3.javascript 控制 html元素 显示/隐藏

1。编写js函数

<script type="text/javascript">

   function display(id){

       var traget=document.getElementById(id)

        if(traget.style.display=="none"){

                traget.style.display=""

        }else{

                traget.style.display="none"

      }

   }

</script>

2. 要显示/隐藏的html元素加上 id 属性

<table>

    <tr id="menu" >   

       <td>控制这个tr的显示/隐藏</td>

   </tr>

</table>

3，添加按钮，链接等触发 js 函数

<input type="button" onclick="display('menu')"   value="显示/隐藏"/>

<a href="#"   onclick="display('menu')"   >显示/隐藏</a>

javascript显示隐藏层<div id="" style="display:none">广告</div>

<input type="botton" onclick="函数">

<script language=javascript>

function 函数{

if(thisdiv.style.display=='none'){ 

thisdiv.style.display=""

}

else

thisdiv.style.display="none"

}

</script给div 取个ID=“AA”thisdiv=AA

javascript隐藏/显示表单对象

javascript隐藏/显示表单对象 

[SCRIPT language=JavaScript]

function expandIt(el) {

     whichEl =document.getElementById(el)

     if (whichEl.style.display ==   'none') {

      whichEl.style.display   = ''

     }

     else {

      whichEl.style.display   = 'none'

     }

     }

  

[/SCRIPT]

el是对象的id，不管是tr或者table等等先设置一下id，然后进行调用。

例：

[a onclick="expandIt('ttchild') return false" href="#" ]try it[/a]

[tr id="ttchild"][td width="18"]Example[/td][/tr]

使用时把[]变成<>

javascript控制页面控件隐藏显示的两种方法

javascript控制页面控件隐藏显示的两种方法，方法的不同之处在于控件隐藏后是否还在页面上占位

方法一：

document.all["PanelSMS"].style.visibility="hidden" 

document.all["PanelSMS"].style.visibility="visible"

方法二：

document.all["PanelSMS"].style.display="none" 

document.all["PanelSMS"].style.display="inline"