页面DOM几个表示宽高、距离的属性

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

 </HEAD>

 

 <BODY>

    <INPUT TYPE="button" VALUE="BUTTON" ONCLICK="d()">

    <div id="div"></div>

    <div id="div2" style="position:absolute; top:250px; left:100px; width:750px; height: 550px; background-color:#999999"></div>

 </BODY>

</HTML>

<SCRIPT LANGUAGE="JavaScript">

<!--

    function computeLocation(obj) {

       if (obj == null)

           return {

              x : 0,

              y : 0,

              w : 0,

              h : 0

           };

       var loc_ = {

           x : 0,

           y : 0,

           w : obj.offsetWidth,

           h : obj.offsetHeight

       };

       while (obj) {

           loc_.x += obj.offsetLeft;

           loc_.y += obj.offsetTop;

           obj = obj.offsetParent;

       }

       return loc_;

    }

    function get(id){return document.getElementById(id);}

    function addEvent(c, b, a) {

       if (c.addEventListener) {

           c.addEventListener(b, a, false);

       } else {

           c.attachEvent("on" + b, a);

       }

    }

    function d(){

       get("div").innerHTML = "document.body.offsetHeightDom呈现的高度,以px为单位的整数):" + document.body.offsetHeight;

       get("div").innerHTML += "<br/>";

       get("div").innerHTML += "document.body.offsetLeftDom的左边缘相对于包含其元素(offsetParent)的左边缘的距离,px为单位):" + document.body.offsetTop;

       get("div").innerHTML += "<br/>";

       get("div").innerHTML += "document.body.clientHeight:Window.innerheight\"Window\"的可见部分的高度,px为单位):" + (document.body.clientHeight?document.body.clientHeight:Window.innerheight);

       get("div").innerHTML += "<br/>";

       get("div").innerHTML += "document.body.scrollHeightDom的实际高度,不出现滚动条的高度,px为单位):" + document.body.scrollHeight;

       get("div").innerHTML += "<br/>";

       get("div").innerHTML += "document.body.scrollTop(纵向滚动条卷起的长度,px为单位):" + document.body.scrollTop;

       get("div").innerHTML += "<br/>";

       get("div2").style.top = ((document.body.clientHeight?document.body.clientHeight:Window.innerheight) - computeLocation(get("div2")).h) + "px";

       get("div2").style.left = ((document.body.clientWidth?document.body.clientWidth:Window.innerwidth) - computeLocation(get("div2")).w) + "px";

       get("div2").style.top = ((document.body.clientHeight?document.body.clientHeight:Window.innerheight) - computeLocation(get("div2")).h) + "px";

    }

   

//-->

</SCRIPT>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值