DOM元素尺寸和位置(clientwidth ,scrollwidth , offsetwidth.......)

[1] slientWidth 和 sclientHeight

slientWidth：获取的是可视宽度　　　

slientHeight:获取的是可视高度　　　

<html>

　　<head>

　　　　<style>

　　　　　　.div1{

　　　　　　　　width:50px;

　　　　　　　　height:50px;

　　　　　　　　overflow:scroll;　　　　//设置滚动条

　　　　　　}

　　　　</style>

　　</head>

　　<body>

　　　　<div id="div" class="div1">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>

　　</body>

</html>

【1】slientWidth：34px ; slientHeight: 34px 因为client他的宽度和高度都没有包括滚动条，所以会减去滚动条的宽高度；

【2】当div内的内容溢出(内容量超过div大小)的时候，client获取的仍然是34px；因为他只是获取到可视内容的高度

//----------------------------------------------------------------------------------------------------------------------------------------------

[2]scrollWidth 和scrollHight

scrollWidth：获取的是实际宽度

scrollHight：获取的是实际的高度

<html>

　　<head>

　　　　<style>

　　　　　　.div1{

　　　　　　　　width:50px;

　　　　　　　　height:50px;

　　　　　　　　overflow:scroll;　　　　//设置滚动条

　　　　　　}

　　　　</style>

　　</head>

　　<body>

　　</body>

</html>

【1】scrollWidth：34px ; scrollHeight: 34px 因为scroll他的宽度和高度都没有包括滚动条，所以会减去滚动条的宽高度；【和slient相同】

【2】当div内的内容溢出(内容量超过div大小)的时候，scroll获取的是>34px；因为他会获取到内容的实际高度

//----------------------------------------------------------------------------------------------------------------------------------------------

[3]scrollTop 和scrollLeft

scrollTop：获取到滚动条当前的高度

scrollLeft：获取到滚动条当前距离最左边的距离

<html>

　　<head>

　　　　<style>

　　　　　　.div1{

　　　　　　　　width:50px;

　　　　　　　　height:50px;

　　　　　　　　overflow:scroll;　　　　//设置滚动条

　　　　　　}

　　　　</style>

　　</head>

　　<body>

　　</body>

</html>

【1】当内容超出div大小的时候，就会出现滚动条，而这个滚动条的高度就取决滚动条最顶端的当前位置的距离

//------------------------------------------------------------------------------------------------------------------------------------------------------------------------

[4]offsetWidth 和offsetHeight

offsetWidth：获取到可视宽度

offsetHeight：获取到可视高度

<html>

　　<head>

　　　　<style>

　　　　　　.div1{

　　　　　　　　width:50px;

　　　　　　　　height:50px;

　　　　　　　　overflow:scroll;　　　　//设置滚动条

　　　　　　}

　　　　</style>

　　</head>

　　<body>

　　</body>

</html>

【1】offsetWidth：50px ; offsetHeight: 50px offset的宽度和高度都是包含滚动条的高度和宽度的【和client,scroll 不同】

【2】当内容溢出的时候offset获取到的还是50px ，因为他获取的是可视高度【和client相同】

//------------------------------------------------------------------------------------------------------------------------------------------------------------------------

[3]offsetTop 和offsetLeft

offsetTop：获取到的是自身与参照对象的高度距离

offsetLeft：获取到的是自身与参照对象的左距离

<html>

　　<head>

　　　　<style>

　　　　　　.div1{

　　　　　　　　width:100px;

　　　　　　　　height:100px;

　　　　　　　　position:relative;
　　　　　　}

　　　　　　.div2{

　　　　　　　　width:50px;

　　　　　　　　height:50px;

　　　　　　　　position:absolute;　　　　　　//绝对定位

　　　　　　　　top:20px;

　　　　　　　　left:30px;

　　　　}

　　　　</style>

　　　　　　var odiv=document.getElementById('div1');

　　　　　　var odiv1=document.getElementById('div2');

　　　　　　alert(div1.offsetLeft);　　　　//30

　　　　　　alert(div1.offsetTop);　　　　//20

　　　　</script>

　　</head>

　　<body>

　　</body>

</html>

【1】div是div1的父元素，所以div1是div 的参照对象

offsetTop：20px offLeft:30px

//------------------------------------------------------------------------------------------------------------

offsetParent 可以得出offset的父元素

巴特西

DOM元素尺寸和位置(clientwidth ,scrollwidth , offsetwidth.......)

最新文章

热门文章