clientWidth 得到对象的宽度
内容+左右padding
clientHeight 得到对象的高度
内容+上下padding
只有读取不能设置
<style>
div{
width: 100px;
height: 120px;
padding: 5px;
margin: 10px;
border: 3px solid red;
background: #ddd;
}
</style>
</head>
<body>
<div>你昌好的是归了的是进</div>
<script type="text/javascript">
var oDiv = document.getElementsByTagName( 'div' )[0];
console.log( 'width:'+oDiv.clientWidth );//width+左右padding
console.log( 'height:'+oDiv.clientHeight );//height+左右padding
</script>
image.png
获取浏览器窗口的宽高
<style>
.wrap{
height: 2500px;
}
</style>
</head>
<body>
<div class="wrap"></div>
<script type="text/javascript">
console.log( document.body.clientWidth );
console.log( document.body.clientHeight );
</script>
</body>
image.png
获取的是body的所有高度;滚动条下的也获取到
获取可见区域
<style>
.wrap{
height: 2500px;
}
</style>
</head>
<body>
<div class="wrap"></div>
<script type="text/javascript">
console.log( document.documentElement.clientWidth );
console.log( document.documentElement.clientHeight );
</script>
</body>
image.png
offsetWidth 得到对象的宽度
内容+左右padding + 左右border
<style>
div{
width: 100px;
height: 120px;
padding: 5px;
margin: 10px;
border: 3px solid red;
background: #ddd;
}
</style>
</head>
<body>
<div>你昌好的是归了的是进</div>
<script type="text/javascript">
var oDiv = document.getElementsByTagName( 'div' )[0];
console.log( 'width:'+oDiv.offsetWidth );//width+左右padding
console.log( 'height:'+oDiv.offsetHeight );//height+左右padding
</script>
image.png
offsetHeight 得到对象的高度
内容+上下padding + 上下border
offsetTop获取对象到 定位父级 的Top值
offsetLeft 获取对象到 定位父级 的Left值
<style>
h4{
position: relative;
width: 500px;
height: 500px;
margin: 50px auto;
border: 1px solid green;
}
div{
position: absolute;
top: 10px;
left: 15px;
width: 100px;
height: 120px;
padding: 5px;
border: 3px solid red;
background: #ddd;
}
</style>
</head>
<body>
<h4>
<div>jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj你昌好的是归了的是进你昌好的是归了的是进你昌好的是归了的是进你昌好的是归了的是进你昌好的是归了的是进你昌好的是归了的是进</div>
</h4>
<script type="text/javascript">
var oDiv = document.getElementsByTagName( 'div' )[0];
console.log( 'top:'+oDiv.offsetTop );
console.log( 'left:'+oDiv.offsetLeft );
</script>
image.png
如果是设置bottom跟right的时候
<style>
h4{
position: relative;
width: 500px;
height: 500px;
margin: 50px auto;
border: 1px solid green;
}
div{
position: absolute;
bottom: 10px;
right: 15px;
width: 100px;
height: 120px;
padding: 5px;
border: 3px solid red;
background: #ddd;
}
</style>
</head>
<body>
<h4>
<div>jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj你昌好的是归了的是进你昌好的是归了的是进你昌好的是归了的是进你昌好的是归了的是进你昌好的是归了的是进你昌好的是归了的是进</div>
</h4>
<script type="text/javascript">
var oDiv = document.getElementsByTagName( 'div' )[0];
console.log( 'top:'+oDiv.offsetTop );
console.log( 'left:'+oDiv.offsetLeft );
</script>
image.png
scrollWidth 得到内容的宽度
scrollHeight 得到内容的高度
只有读取不能设置
<style>
div{
width: 100px;
height: 120px;
padding: 5px;
margin: 10px;
border: 3px solid red;
background: #ddd;
}
</style>
</head>
<body>
<div>jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj你昌好的是归了的是进你昌好的是归了的是进你昌好的是归了的是进你昌好的是归了的是进你昌好的是归了的是进你昌好的是归了的是进</div>
<script type="text/javascript">
var oDiv = document.getElementsByTagName( 'div' )[0];
console.log( 'width:'+oDiv.scrollWidth );
console.log( 'height:'+oDiv.scrollHeight );
</script>
蓝色为padding 右边跟下边的内容已经超出时不用算进去；
加overflow:hidden的情况
<style>
div{
overflow: hidden;
width: 100px;
height: 120px;
padding: 5px;
margin: 10px;
border: 3px solid red;
background: #ddd;
}
</style>
</head>
<body>
<div>jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj你昌好的是归了的是进你昌好的是归了的是进你昌好的是归了的是进你昌好的是归了的是进你昌好的是归了的是进你昌好的是归了的是进</div>
<script type="text/javascript">
var oDiv = document.getElementsByTagName( 'div' )[0];
console.log( 'width:'+oDiv.scrollWidth );
console.log( 'height:'+oDiv.scrollHeight );
</script>
image.png
注意：要加上左右 上下的padding
scrollTop 滚动的高度 //有兼容性问题
onscroll 滚动事件 滚动条滚动的时候触发的
<style>
.wrap{
height: 2500px;
}
</style>
</head>
<body>
<div class="wrap"></div>
<script type="text/javascript">
var oDiv = document.getElementById('box');
window.onscroll = function (){
//scrollTop兼容写法
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
console.log( scrollTop );
}
</script>
</body>
image.png
div盒子滚动
<style type="text/css">
/*清除样式*/
*{margin: 0;padding: 0;}
ul li{list-style-type: none;}
a{text-decoration: none; color: inherit;}
/*---------------------------------------------------*/
#box{
overflow: scroll;
display: block;
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="box">你好地是进是进进进进进耠十分钟刀直年胆时是进百尖是进在是进而进而进而地是是你好地是进是进进进进进耠十分钟刀直年胆时是进百尖是进在是进而进而进而地是是</div>
<script type="text/javascript">
var oBox = document.getElementById( 'box' );
oBox.onscroll = function (){ //onscroll窗口滚动事件
console.log( oBox.scrollTop );
}
</script>
</body>
image.png
获取显示器的宽高
window.screen.width获取显示器分辨率宽度
window.screen.height获取显示器分辨率高度
<script type="text/javascript">
console.log( window.screen.width );
console.log( window.screen.height );
</script>
image.png
网友评论