DOM基础02

来源：互联网发布：asm算法简介编辑：程序博客网时间：2024/04/28 00:47

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<title>DOM基础02</title>

<styletype="text/css">

margin:0;

padding:0;

}

#big{

height:600px;

background: yellow ;

border:5pxsolid blue;

padding:10px;

position:relative;

}

#small{

width:300px;

height:400px;

background: cyan;

margin:30px;

padding:10px;

border:0pxsolid blue;

border-width:1px2px 3px 4px;

overflow:scroll;

}

#a{

width:100px;

height:600px;

background: red;

}

</style>

</head>

<body>

<divid="big">

<divid="small">

<divid="a"></div>

</div>

<scripttype="text/javascript">

* DOM里元素的位置和尺寸

* 内尺寸(不包含滚动条,但是pc端可能因为浏览器版本或者硬件导致系统把导航条的宽度计算在内尺寸里).

* clientHeight = content.height + padding-top + padding-bottom.

* clientWidth = content.width + padding-left + padding-right.

* clientTop = border-top;

* clientLeft = border-left;

// var small = document.getElementById("small");

// console.log(small.clientHeight, small.clientWidth);

// console.log(small.clientTop, small.clientLeft);

* 外尺寸

* offsetHeight = content.height + padding-top + padding-bottom + border-top + border-bottom;

* offsetLeft = content.width + padding-left + padding-right + border-left + border-right;

* offsetTop 该元素的上边框距离offsetParent元素上边框内边缘的距离.

* offsetLeft 该元素的左边框距离offsetParent元素左边框内边缘的距离.

* offsetParent :离计算元素最近的已经进行非static定位的父级元素

// console.log(small.offsetHeight, small.offsetWidth);

// console.log(small.offsetLeft, small.offsetTop);

* 滚动尺寸

* scrollHeight :滚动区域的高度,如果元素无法滚动,且内部无超出该元素高度的元素,scrollHeight = clientHeight;

* scrollWidth: 滚动区域的宽度,如果元素无法滚动,且内部无超出该元素高度的元素,scrollWidth = clientWidth;

* scrollTop: 某一时刻垂直方向的滚动距离

* scrollLeft: 某一时刻水平方向的滚动距离

varaDiv = document.getElementById("a");

// console.log(small.scrollHeight, small.scrollWidth)

small.scrollTop= 100;

//为元素添加一个滚动事件 onscroll

small.onscroll= function(){

// console.log(small.scrollTop)

if(small.scrollTop=)

}

</script>

</body>

</html>

0 0