您现在的位置： 365建站网 > 365文章 > DOM编程—document对象

DOM编程—document对象

文章来源：365jz.com 点击数：241 更新时间：2009-09-14 10:29 参与评论

一、bgColor属性

......

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

......
<SPAN onMouseOver="change('red')">变红色</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> </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 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
   }
}

......

......

......

03:26:43 PM

Tag标签: DOM,document编程

如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！点击进入论坛

您可能感兴趣的文章:

发表评论 (241人查看，0条评论): 请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。

昵称：

最新评论

------分隔线----------------------------

上一篇：Jquery源码分析之一：概述及jquery对象的构建
下一篇：方法的调用链

大家感兴趣的内容

DOM编程—document对象

您可能感兴趣的文章:

公司信息

快速入口

其它栏目

业务咨询