您的位置：首页 > 其它

19、关于宽高度的一些属性

2016-07-11 11:22 447 查看

关于宽高的一些属性：

clientHeight / clientWidth （width + padding）

offsetHeight / offsetWidth （width + padding + border）

scrollHeight / scrollWidth （实际宽高度度（无论其是否有加overflow:hidden等），当盒子内的内容未超出规定的范围是与clientHeight / clientWidth 相等，如果超出则为实际宽高度）

<!DOCTYPE HTML>
<html>
<head>
<title>please enter your title</title>
<meta charset="utf-8">
<meta name="Author" content="">
<style type='text/css'>
*{ margin:0; padding:0;}
#box{
width:200px;
height:200px;
background:red;
padding:10px;
border:10px solid pink;
overflow:hidden;
}
</style>
</head>
<body>

<div id='box'>sssssssssssssssssssssssssssssssssssss</div>

<script type="text/javascript">

/*
关于宽高的一些属性：
clientHeight / clientWidth     （width + padding）
offsetHeight / offsetWidth	   （width + padding + border）
scrollHeight / scrollWidth
*/

var oBox = document.getElementById('box');

var a = getStyle( oBox , 'width' );
var b = oBox.clientWidth; // 220
var c = oBox.offsetWidth; // 240
var d = oBox.scrollWidth; // 220

alert( b );

function getStyle( obj , attr ){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
};

</script>
</body>
</html>

页面可视区宽高：document.documentElement.clientHeight
滚动高度/宽度：document.documentElement.scrollTop || document.body.scrollTop

备注：document.documentElement.scrollTop //适用于除chrome浏览器的其他浏览器，其在chrome浏览器中该值始终为0

document.body.scrollTop只适用于chrome浏览器，

<!DOCTYPE HTML>
<html>
<head>
<title>please enter your title</title>
<meta charset="utf-8">
<meta name="Author" content="">
<style type='text/css'>
*{ margin:0; padding:0;}

</style>
</head>

<body style='height:2000px;'>

<script type="text/javascript">
//可视区宽高
//document.documentElement.clientWidth   // height

//alert(document.documentElement.clientWidth   );
//alert( window.innerWidth)//仅IE9+支持

//滚动距离
// document.body.scrollTop  只适用于chrome浏览器
// document.documentElement.scrollTop 适用于其他浏览器

//alert( document.body.scrollTop );  // left
//alert( document.documentElement.scrollTop );

/*
//滚动高度兼容
document.onclick = function(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
alert( scrollTop );
};
*/
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航