JS控制创建DIV并且控制DIV出现的位置

JavaScript032

JS控制创建DIV并且控制DIV出现的位置,第1张

1、js创建div的语法是createElement("div")。知道这个我们就可以直接写个简单的函数先创建一个div。并添加到对应的dom元素中,可能是body窗体上也可以是div内。

2、至于控制位置,则是通过js给div添加class。通过css样式来控制。具体如下:

function cDiv(){

var bb = document.body//document.getElementById("div")

var div = document.createElement("div")

div.id = "div1"

div.className = "div1"

div.innerHTML = "div1"

bb.appendChild(div)

}

cDiv()

3、为了让函数执行,必须吧函数放入到</body>上面。这样才有效果

代码如下:

<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"

1、利用js代码首先创建一个div,document.createElement('div')2、确认div添加位置,可以在某个dom元素后面,或者通过css属性控制具体位置,主要通过left/top等属性控制。 3、确定位置之后,显示div即可。 示例:比如html中有一个文本输入框,...