您的位置：首页 > Web前端 > JavaScript

Javascript 偏移量总结

2015-07-27 23:20 826 查看

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#div1 {
width: 100px;
height: 100px;
background: #000000;
padding: 50px;
border: 20px solid red;
margin: 30px;
}
</style>
</head>
<body>
<div id="div1">

</div>
<script src="../Script/jquery-2.1.1.js"></script>
<script type="text/javascript">
var oDiv = document.getElementById('div1');
oDiv.offsetHeight;//带border和带padding的高；
oDiv.clientHeight;//带padding，不带border的高
$("#div").height();//内容的高
$("#div1").innerHeight();//相当于clientHeight;
$("#div1").outerHeight();//相当于offsetHeight;
$("#div1").outerHeight(true);//相当于带margin，padding，border的

/*获取样式对象属性*/
var oStyle = getComputedStyle(oDiv, null);//获取所有的样式对象
//第一个参数是对象，第二个参数是获取哪一个，weinull就是所有的
console.log(oStyle.color);
console.log(oStyle.fontFamily);//IE6.7.8是不支持的
</script>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航