document.getElementById("div").style.height //设置id="div"的高度
document.getElementById("div").style.height="200px"
elem.offsetWidth :elem.offsetHeight
没有设置高度的元素一般使用这个去获取高度与宽度的
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
以上主要指IE之中，FireFox差异如下：
IE6.0、FF1.06+：
offsetHeight = height + padding + border
jQuery中的height()方法就是默认获取这个值，然后去找了下border以及maxHeight值，直接用jQuery就可以，如果想自己写，稍许要做下兼容了
1、clientWidth / clintHeight
clientWidth = 元素的宽度 + 元素的paddingLeft + 元素的paddingRight
clientHeight = 元素的高度 + 元素的paddingTop + 元素的paddingBottom
注意：如果该元素上存在上下滑动滚动条，则clientWidth的值不包括滚动条所占的宽度（即获得的clientWidth已经减去了滚动条的宽度）
注意：如果该元素上存在左右滑动滚动条，则clientHeight的值不包括滚动条所占的宽度（即获得的clientHeight已经减去了滚动条的高度）
2、clientTop / clientLeft
clientTop - 可视区域的上边距距离自身上边框的外边框的距离（即为上边框的宽度）
clientLeft - 可视区域的左边距距离自身左边框的外边框的距离（即为左边框的宽度）
没有滑动条的效果代码如下：
[html] view plain copy
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取元素的高度和宽度</title>
<style type="text/css">
#wrap{
height: 500px
width: 500px
background-color: skyblue
margin: 0 auto
border: 3px solid red
overflow: scroll
}
#content{
height: 200px
width: 200px
background-color: greenyellow
margin: 0 auto
border: 0px solid yellow
border-width: 5px 6px 8px 12px
padding: 5px 4px 6px 12px
margin-top: 50px
}
</style>
</head>
<body>
<div id="wrap">
<div id="content"></div>
</div>
</body>
<script type="text/javascript">
//获取content对象
var contentObj = document.getElementById("content")
console.log(contentObj.clientHeight)
console.log(contentObj.clientWidth)
</script>
</html>
以上结果输出的即为id为content的div的clientHeight 和 clientWidth 分别为 211 = height(200) + paddingTop(5) + paddingBottom(6)
有滚动条的代码如下,
在content div的里面添加一个id为one的div让新添加的div超出隐藏即可出现滚动条
[html] view plain copy
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取元素的高度和宽度</title>
<style type="text/css">
#wrap{
height: 500px
width: 500px
background-color: skyblue
margin: 0 auto
border: 3px solid red
overflow: scroll
padding: 5px
}
#content{
height: 200px
width: 200px
background-color: greenyellow
margin: 0 auto
border: 0px solid yellow
border-width: 5px 6px 8px 12px
padding: 5px 4px 6px 12px
margin-top: 50px
overflow: scroll
}
#one{
height: 300px
width: 300px
}
</style>
</head>
<body>
<div id="wrap">
<div id="content">
<div id="one"></div>
</div>
</div>
</body>
<script type="text/javascript">
//获取content对象
var contentObj = document.getElementById("content")
console.log(contentObj.clientHeight)
console.log(contentObj.clientWidth)
console.log(contentObj.clientTop)
console.log(contentObj.clientLeft)
</script>
</html>
最后输出的结果为clientHeight 和 clientWidth分别为 196 = height(200) + paddingTop(5) + paddingBottom(6) - 滚动条的宽度(15)
201 = width(200) + paddingLeft(12) + paddingRight(4) - 滚动条的宽度(15)
3、offsetHeight / offsetWidth
offsetHeight / offsetWidth实际上获取的内容和clientHeight / clientWidth的差别在于，offsetHeight和offsetWidth 不仅包括元素的高度和宽度和padding的值，而且包括border的宽度
注意：offsetHeight / offsetWidth包括滚动条的宽度（这一点与clientHeight / clientWidth）不同
[html] view plain copy
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取元素的高度和宽度</title>
<style type="text/css">
#wrap{
height: 500px
width: 500px
background-color: skyblue
margin: 0 auto
border: 3px solid red
overflow: scroll
padding: 5px
}
#content{
height: 200px
width: 200px
background-color: greenyellow
margin: 0 auto
border: 0px solid yellow
border-width: 5px 6px 8px 12px
padding: 5px 4px 6px 12px
margin-top: 50px
overflow: scroll
}
#one{
height: 300px
width: 300px
}
</style>
</head>
<body>
<div id="wrap">
<div id="content">
<div id="one"></div>
</div>
</div>
</body>
<script type="text/javascript">
//获取content对象
var contentObj = document.getElementById("content")
console.log(contentObj.offsetHeight)
console.log(contentObj.offsetWidth)
console.log(contentObj.offsetLeft)
console.log(contentObj.offsetTop)
</script>
</html>
输出的结果：offsetHeight = height(200) + paddingTop(5) + paddingBottom(6) + borderTop(5) + borderBottom(8)
offsetWidth = width(200) + paddingLeft(12) + paddingRight(4) + borderLeft(12) + borderRight(6)
4、offsetTop / offsetLeft
offsetTop - 该元素的上边框的外边缘距离父级元素上边框的内边缘的距离
offsetLeft - 该元素的左边框的外边缘距离父级元素左边框的内边缘的距离
5、scrollHeight / scrollWidth
scrollHeight = 子级超出父级的元素的高度 + 父级的上下padding值
scrollWidth = 子级超出父级的元素的宽度 + 父级的左padding
6、scrollTop
scrollTop 元素滚动的距离
