js javascript圖層的彈出 背景變灰 和js圖層的移動 及相關資料

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
margin:0;
padding:0;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>彈層效果</title>
<script language="javascript">
function msgbox(){

//背景圖層的生成塊
var msg = document.createElement("p");
msg.id = "layer";
msg.innerHTML="<a href='https://www.baidu.com'> oh my gold is very good!</a>";
with(msg.style)
{
width = "100%";
height = document.documentElement.clientHeight + "px";
background = "#412572";
position = "absolute";
left = "0";
top = "0";
filter = 'Alpha(opacity=70)';//設置透明度
opacity = '0.7';//不透明度
}
document.body.appendChild(msg);

//以下是圖片圖層的運用

  var alert=document.createElement("<p onmousedown=MouseDown(this) onmousemove=MouseMove() onmouseup=MouseUp()>");
  alert.id="messgebox";
  alert.innerHTML='<img src="baidu_sylogo1.gif"  ondblclick="Hlose()" />';//不能用小寫的close()否則將不識別  ;
with(alert.style)
{
  position = "absolute";
  left = "37%";
  top = "30%";
  width = "500px";
  height = "500px";
}
document.body.appendChild(alert);//添加圖層 p;
function Hlose()//清楚添加的兩個p
{
 document.body.removeChild(document.getElementById("layer"));
 document.body.removeChild(document.getElementById("messgebox"));
 
}

//以下代碼是圖層的移動 方法
var Obj;
function MouseDown(obj)
{
  Obj=obj;
  Obj.setCapture();
  Obj.l=event.x-Obj.style.pixelLeft;
  Obj.t=event.y-Obj.style.pixelTop;
}
function MouseMove()
{
  if(Obj!=null)
  {
    Obj.style.left = event.x-Obj.l;
    Obj.style.top = event.y-Obj.t;
  }
}
function MouseUp()
{
  if(Obj!=null)
  {
    Obj.releaseCapture();
    Obj=null;
  }
}

 

/禁止鍵盤按F5刷新

document.onkeydown=function()
{
 if(event.keyCode==116)
 {
  event.keyCode=0;
  event.returnValue=false;
  }
 }
 

</script>
</head>

<body>
<p style="text-align:center;margin-top:20%;">
<input type="button" value="顯示" onclick="msgbox()" />
</p>
</body>
</html>

 

DOM Element 常用方法
1、appendChild(node)
向當前節點對象的追加節點。經常用於給頁面動態的添加內容。

例如下面給p添加一個文本節點:

<p id="test"></p>

<script type="text/javascript">

var newp=document.createElement("p")

var newtext=document.createTextNode("A new p")

newp.appendChild(newtext)

document.getElementById("test").appendChild(newp)

</script>

上面的例子中給DIV添加文本,也可以用newp.innerHTML=”A new p”實現,

不過innerHTML不屬於DOM
 

2、removeChild(childreference)
移除當前節點的子節點,返回被移除的節點。這個被移除的節點可以被插入document樹中別的地方

<p id="father"><p id="child">A child</p></p>

<script type="text/javascript">

var childnode=document.getElementById("child")

var removednode=document.getElementById("father").removeChild(childnode)

</script>

3、cloneNode(deepBoolean)

復制並返回當前節點的復制節點,這個復制得到的節點是一個孤立的節點,不在document樹中。復制原來節點的屬性值,包括ID屬性,所以在把這個新節點加到document之前,一定要修改ID屬性,以便使它保持唯一。當然如果ID的唯一性不重要可以不做處理。

這個方法支持一個佈爾參數,當deepBoolean設置true時,復制當前節點的所有子節點,包括該節點內的文本。

<p id=”mypara”>11111</p>

p=document.getElementById("mypara")

pclone = p.cloneNode(true);

p.parentNode.appendChild(pclone);

4、replaceChild(newChild, oldChild)
把當前節點的一個子節點換成另一個節點
例如:<p id="ap"><span id="innerspan">span</span></p><script type="text/javascript">var oldel=document.getElementById("innerspan");var newel=document.createElement("p");var text=document.createTextNode(“ppppp”);

newel.appendChild(text);

document.getElementById("ap").replaceChild(newel, oldel);

</script>
5、insertBefore(newElement, targetElement)
      給當前節點插入一個新節點,如果targetElement被設置為null,那新節點被當作最後一個子節點插入,否則那新節點應該被插入targetElement之前的最近位置。

<body><span id="lovespan">熊掌我所欲也!</span></body><script type="text/javascript">var lovespan=document.getElementById("lovespan")var newspan=document.createElement("span")

var newspanref=document.body.insertBefore(newspan, lovespan)newspanref.innerHTML="魚與";</script>

6、click()
執行元素的一次點擊,可以用於通過腳本來觸發onClick函數

<script>

function wow() {

alert("我好象沒有點鼠標啊");

}

</script>

<p id="test" onclick='wow()'>hhh</p>

<script type="text/javascript">

var p = document.getElementById("test");

p.click();

</script>

DOM Element的屬性:(下面是常用的。IE5.0以上,mozllia都支持的)
 

1、childeNodes返回所有子節點對象,

例如

<table id="mylist">

<tr><td>一個和尚有水喝。</td></tr>

<tr><td>兩個和尚挑水喝。</td></tr>

<tr><td>三個和尚沒水喝。</td></tr>

</table>

<script>

var msg=””

var mylist=document.getElementById("mylist")

for (i=0; i<mylist.childNodes.length; i++){

   var tr=mylist.childNodes[i];

   for(j=0;j<tr.childNodes[j].length; j++) {

      var td=tr.childNodes[j];

      msg+=td.innerText;

   }

}

alert(msg);

</script>

2、innerHTML
這是一個事實上的標準,不屬於w3c DOM,但是幾乎所有支持DOM的瀏覽器,都支持這個屬性。通過這個屬性我們很容易修改一個元素的HTML。

<p><b>新人類,什麼?!</b></p>

<script type="text/javascript">

window.onload=function(){

document.getElementsByTagName("p")[0].innerHTML="<b>新新人類,什麼?!</b>"

}

</script>

3、style
返回一個元素的style對象的引用,通過它我們可以獲得並修改每個單獨的樣式。

例如下面的腳本可以修改一個元素的背景色

document.getElementById("test").style.backgroundColor="yellow"

4、firstChild    返回第一個子節點
5、lastChild     返回最後一個子節點
6、parentNode   返回父節點的對象。
7、nextSibling   返回下一個兄弟節點的對象
8、previousSibling返回前一個兄弟節點的對象
9、nodeName返回節點的HTML標記名稱,使用英文的大寫字母,如P, FONT

例如

<p id='test'>ddd</p>

<script>

if (document.getElementById("test").nodeName=="DIV")

   alert("This is a DIV");

</script>

第一個例子:
使用DOM1.0  的javascript動態地創建一個HTML table。
<head>

<title>Sample code </title>

<script>

    function start() {

        //獲得body的引用

        var mybody=document.getElementsByTagName("body").item(0);

        //創建一個<table></table>元素

        mytable = document.createElement("TABLE");

        //創建一個<TBODY></TBODY>元素

        mytablebody = document.createElement("TBODY");

        //創建行列

        for(j=0;j<3;j++) {

//創建一個<TR></TR>元素

            mycurrent_row=document.createElement("TR");

            for(i=0;i<3;i++) {

    //創建一個<TD></TD>元素

                mycurrent_cell=document.createElement("TD");

//創建一個文本元素

                currenttext=document.createTextNode("cell is row "+j+", column "+i);

                //把新的文本元素添加到單元TD上

                mycurrent_cell.appendChild(currenttext);

                // appends the cell TD into the row TR

                //把單元TD添加到行TR上
                mycurrent_row.appendChild(mycurrent_cell);

            }

//把行TR添加到TBODY上

            mytablebody.appendChild(mycurrent_row);

        }

        //把 TBODY 添加到 TABLE

        mytable.appendChild(mytablebody);

mybody.appendChild(mytable);       //把mytable的border 屬性設置為2        mytable.setAttribute("border","2");    }</script></head><body onload="start()"></body></html>

首先,我們創建一個table元素
接著,創建一個TBODY元素,它應該是TABLE元素的子元素,
但是現在現在它們之間沒有聯系。接著,使用一個循環創建TR元素,它們應該是TBODY元素的子元素。對於每一個TR,我們使用一個循環創建TD元素,它們是TR的子元素。
對於每一個TD,我們創建一個文本節點元素現在,我們創建好瞭這些TABLE, TBODY, TR, TD還有文本元素,但是它們之間的層級關系並沒有建立起來。然後我們以上相反的順序把每一個對象添加到它的父節點上。mycurrent_cell.appendChild(currenttext);mycurrent_row.appendChild(mycurrent_cell);mytablebody.appendChild(mycurrent_row);mytable.appendChild(mytablebody);

 作者:yhh345814509

You May Also Like