博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

DOM编程—document对象

Posted on 2009-05-31 15:28  记录  阅读(870)  评论(0)  编辑  收藏  举报

一、bgColor属性

......

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

......
<SPAN onMouseOver="change('red')">变红色</SPAN>

<SPAN onMouseOver="change('blue')">变蓝色</SPAN>

<SPAN onMouseOver="change('yellow')">变黄色</SPAN>

......

     //onMouseOver鼠标悬停事件

     //容器标签<SPAN>

二、如何制作带关闭按钮的浮动广告，并随滚动条移动？

     思路：1、在页面中插入两层，分别是广告层和关闭层

              2、编写脚本：a、使用getElementById( )方法获得层对象

                       b、设置层的样式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的区别
}
function move( )
{
    document.getElementById("advLayer").style.pixelTop=advInitTop+document.body.scrollTop;   

     //注意与document.getElement.scrollTop的区别:关键看浏览器能够识别不
    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 ;  //窗口的滚动事件，当页面滚动时调用move( )函数

 ......  
  <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>&nbsp;</P>
  <P><IMG src="images/contentpic.jpg" width="993" height="1799"></P>
  <P>&nbsp;</P>
  <DIV id="advLayer" style="position:absolute; left:16px; top:129px; width:144px; height:95px; z-index:1;"><A href="http://www.taobao.com"><IMG src="images/advpic.gif" width="180" height="230" border="0"></A></DIV>
......

     //getElementByID( ) ：根据HTML元素指定的ID，获得唯一的一个HTML元素。如：访问DIV层对象、图片Img对象

   //getElementsByName( ):根据HTML元素指定的name，获得相同名称的一组元素。如：访问表单元素(全选功能)

    //getElementsByTagName(tagname)：用于获取一个页面中包含所有指定标签名元素的对象数组，

                                                                如：document.getElementsByTagName("p")表示得到文档中所有<p>标签的引用

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

      思路：1、创建一组同名的复选框

                2、使用getElementsByName( )方法获得一组同名的复选框对象。

             3、通过循环来改变复选框是否被选中属性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
   }    
}

......

<a href="javascript:checkAll(true)">全选</a>

<a href="javascript:checkAll(false)">不全选</a>

......

<input type="checkbox" id="isBuy" name="isBuy" value="sanguo">

......

<input type="checkbox" id="isBuy" name="isBuy" value="jingwu">

 

03:26:43 PM