Skip to content

Instantly share code, notes, and snippets.

@clearbug

clearbug/index.html

Forked from anonymous/index.html
Created March 17, 2016 03:16
Show Gist options
  • Save clearbug/91a3cdc97e01fbf53205 to your computer and use it in GitHub Desktop.
Save clearbug/91a3cdc97e01fbf53205 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/wemuho
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
#console{
float: right;
width: 200px;
font-size: 15px;
}
#main{
width: 500px;
height: 1000px;
background-color: blue;
overflow: hidden;
}
#sub{
margin: 5px 10px;
padding: 3px 6px;
border: 1px solid #eee;
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div id="main">
<div id="sub">
</div>
</div>
<script id="jsbin-javascript">
var sub = document.getElementById('sub');
console.log(sub.clientWidth);//元素的可见宽度(width+padding-left+padding-right)
console.log(sub.clientHeight);//元素的可见高度(height+padding-top+padding-bottom)
console.log(sub.clientTop);//(border-top)
console.log(sub.clientLeft);//(border-left)
console.log(sub.offsetWidth);//元素的高度(width+padding+border)
console.log(sub.offsetHeight);//元素的宽度(height+padding+border)
console.log(sub.offsetTop);//元素垂直偏移位置(相对浏览器的偏移)
console.log(sub.offsetLeft);//元素水平偏移位置(相对浏览器的偏移)
//console.log(sub.offsetParent);//元素偏移容器
console.log(sub.scrollWidth);//元素整体宽度=clientWidth
console.log(sub.scrollHeight);//元素整体高度=clientHeight
console.log(sub.scrollTop);//上边缘与视图之间距离
console.log(sub.scrollLeft);//左边缘与视图之间距离
</script>
<script id="jsbin-source-css" type="text/css">#console{
float: right;
width: 200px;
font-size: 15px;
}
#main{
width: 500px;
height: 1000px;
background-color: blue;
overflow: hidden;
}
#sub{
margin: 5px 10px;
padding: 3px 6px;
border: 1px solid #eee;
width: 50px;
height: 50px;
background-color: red;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var sub = document.getElementById('sub');
console.log(sub.clientWidth);//元素的可见宽度(width+padding-left+padding-right)
console.log(sub.clientHeight);//元素的可见高度(height+padding-top+padding-bottom)
console.log(sub.clientTop);//(border-top)
console.log(sub.clientLeft);//(border-left)
console.log(sub.offsetWidth);//元素的高度(width+padding+border)
console.log(sub.offsetHeight);//元素的宽度(height+padding+border)
console.log(sub.offsetTop);//元素垂直偏移位置(相对浏览器的偏移)
console.log(sub.offsetLeft);//元素水平偏移位置(相对浏览器的偏移)
//console.log(sub.offsetParent);//元素偏移容器
console.log(sub.scrollWidth);//元素整体宽度=clientWidth
console.log(sub.scrollHeight);//元素整体高度=clientHeight
console.log(sub.scrollTop);//上边缘与视图之间距离
console.log(sub.scrollLeft);//左边缘与视图之间距离</script></body>
</html>
Raw
jsbin.wemuho.css
#console{
float: right;
width: 200px;
font-size: 15px;
}
#main{
width: 500px;
height: 1000px;
background-color: blue;
overflow: hidden;
}
#sub{
margin: 5px 10px;
padding: 3px 6px;
border: 1px solid #eee;
width: 50px;
height: 50px;
background-color: red;
}
Raw
jsbin.wemuho.js
var sub = document.getElementById('sub');
console.log(sub.clientWidth);//元素的可见宽度(width+padding-left+padding-right)
console.log(sub.clientHeight);//元素的可见高度(height+padding-top+padding-bottom)
console.log(sub.clientTop);//(border-top)
console.log(sub.clientLeft);//(border-left)
console.log(sub.offsetWidth);//元素的高度(width+padding+border)
console.log(sub.offsetHeight);//元素的宽度(height+padding+border)
console.log(sub.offsetTop);//元素垂直偏移位置(相对浏览器的偏移)
console.log(sub.offsetLeft);//元素水平偏移位置(相对浏览器的偏移)
//console.log(sub.offsetParent);//元素偏移容器
console.log(sub.scrollWidth);//元素整体宽度=clientWidth
console.log(sub.scrollHeight);//元素整体高度=clientHeight
console.log(sub.scrollTop);//上边缘与视图之间距离
console.log(sub.scrollLeft);//左边缘与视图之间距离
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment