您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > DOM編程—document對象

DOM編程—document對象

文章來源：365jz.com 點擊數(shù)：263 更新時間：2009-09-14 10:29 參與評論

一、bgColor屬性

......

function change(color)
{
document.bgColor=color ;
}

......
<SPAN onMouseOver="change('red')">變紅色</SPAN>

......

//onMouseOver鼠標(biāo)懸停事件

//容器標(biāo)簽<SPAN>

二、如何制作帶關(guān)閉按鈕的浮動廣告，并隨滾動條移動？

思路：1、在頁面中插入兩層，分別是廣告層和關(guān)閉層

2、編寫腳本：a、使用getElementById( )方法獲得層對象

b、設(shè)置層的樣式style的顯示屬性display="none"

示例：

......
var advInitTop=0;
var closeInitTop=0;
function inix( )
{
    advInitTop=document.getElementById("advLayer").style.pixelTop;
    closeInitTop=document.getElementById("closeLayer").style.pixelTop;   //pixelTop返回“129”;注意與Top的區(qū)別
}
function move( )
{
    document.getElementById("advLayer").style.pixelTop=advInitTop+document.body.scrollTop;

    //注意與document.getElement.scrollTop的區(qū)別:關(guān)鍵看瀏覽器能夠識別不
    document.getElementById("closeLayer").style.pixelTop=closeInitTop+document.body.scrollTop;
}
function closeMe( )
{

    document.getElementById("closeLayer").style.display="none";

//display="block"則為顯示
document.getElementById("advLayer").style.display="none";
}
window.onscroll=move ; //窗口的滾動事件，當(dāng)頁面滾動時調(diào)用move( )函數(shù)

......
<BODY onload="inix( )" >
<DIV id="closeLayer" onclick="closeMe( )" style="position:absolute; left:166px; top:132px; width:27px; height:19px;z-index:2;">

<IMG src="images/close.jpg" width="26" height="18"></DIV>
<P> </P>
<P><IMG src="images/contentpic.jpg" width="993" height="1799"></P>
<P> </P>
<DIV id="advLayer" style="position:absolute; left:16px; top:129px; width:144px; height:95px; z-index:1;"><A ><IMG src="images/advpic.gif" width="180" height="230" border="0"></A></DIV>
......

//getElementByID( ) ：根據(jù)HTML元素指定的ID，獲得唯一的一個HTML元素。如：訪問DIV層對象、圖片Img對象

//getElementsByName( ):根據(jù)HTML元素指定的name，獲得相同名稱的一組元素。如：訪問表單元素(全選功能)

//getElementsByTagName(tagname)：用于獲取一個頁面中包含所有指定標(biāo)簽名元素的對象數(shù)組，

如：document.getElementsByTagName("p")表示得到文檔中所有<p>標(biāo)簽的引用

三、制作全選/不全選特效：

思路：1、創(chuàng)建一組同名的復(fù)選框

2、使用getElementsByName( )方法獲得一組同名的復(fù)選框?qū)ο蟆?

3、通過循環(huán)來改變復(fù)選框是否被選中屬性checked的值。

示例：

......

function checkAll(boolValue)
{
   var allCheckBoxs=document.getElementsByName("isBuy") ;
   for (var i=0;i<allCheckBoxs.length ;i++)
   {
       if(allCheckBoxs[i].type=="checkbox") //可能有重名的其他類型元素，如圖片、控件等，所以要判斷類型
         allCheckBoxs[i].checked=boolValue ; //檢查是否選中用checked，而不是value
   }
}

......

......

......

03:26:43 PM

Tag標(biāo)簽: DOM,document編程

如對本文有疑問，請?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會為你解答?。?點擊進(jìn)入論壇