9-client属性的认识
2017-03-17 本文已影响0人
嗯嗯_7a53
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clietn属性的认识</title>
<style>
*{
padding: 0;
margin: 0;
border:none;
}
div{
width: 100px;
height: 100px;
border:30px solid #ccc;
padding:10px;
}
</style>
</head>
<body>
<div id="box">
</div>
<script>
window.onload = function () {
var box = document.getElementById('box');
//获取client
//clientW = width + padding
console.log(box.clientWidth);
console.log(box.clientHeight);
//clientLeft = 左边的border值
console.log(box.clientLeft);
console.log(box.clientTop);
}
</script>
</body>
</html>
