CSSOM视图模式
获取窗口的宽高
- window.innerWidth 窗口宽度
console.log(window.innerWidth);
结果是1120 ,当缩小浏览器刷新就会变小
- window.innerHeight 窗口高度 但是从ie8以下就不能用
console.log(window.innerHeight);
结果是634
- document.documentElement.clientWidth 窗口的宽
- document.documentElement.clientHeight 窗口的高
console.log(document.documentElement.clientWidth);
结果是1366
<body style="height: 2000px;">
</body>
<script>
console.log(document.documentElement.clientWidth);
结果是1349 因为出现了滚动条 减去滚动条的宽度
console.log(document.documentElement.clientHeight);
结果是662
<body style="height: 2000px;width: 2000px;">
<div style="width: 2000px;"></div>
</body>
<script>
console.log(document.documentElement.clientHeight);
结果是645
获取元素的宽高
- ele.clientWidth宽度加内边距 不算边框 可视区域 ele.clientHeight高度加内边距不算边框
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 200px;
height: 200px;
margin: auto;
border:5px solid;
padding: 10px;
background-color: #f66;
}
</style>
<body>
<div id="box"></div>
</body>
<script>
var oBox =document.getElementById("box");
console.log(oBox.clientWidth,oBox.clientHeight);
</script>
结果是220 220 如果是box-sizing为border-box 那么变为190 190 减去边框
- offsetWidth,offsetHeight 盒子整体宽高
console.log(oBox.offsetWidth,oBox.offsetHeight);
结果是230 230
- 获取元素边框clientLeft clientTop
console.log(oBox.clientLeft,oBox.clientTop);
结果是5 5
- offsetLeft offsetTop 基于定位父级 获取元素外边框距离定位父级元素的距离
- offsetParent 最近的定位父级
console.log(oBox.offsetLeft,oBox.offsetTop);
结果是568 0
- scrollWidth 能够获取超出部分的宽度 paddingleft+width+超出部分
<body>
<div id="box">
<div style="width: 500px;height: 10px;"></div>
</div>
</body>
<script>
var oBox =document.getElementById("box");
console.log(oBox.scrollWidth);
结果是510
- 获取可以滚动的宽度
console.log(oBox.scrollWidth-oBox.clientWidth+paddingRight);
300
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 200px;
height: 200px;
margin: auto;
border:5px solid;
padding: 10px;
background-color: #f66;
}
</style>
<body>
<div id="box">
<div style="width: 500px;height: 330px;"></div>
</div>
</body>
<script>
var oBox =document.getElementById("box");
console.log(oBox.scrollHeight);
</script>
结果是340
#box{
width: 200px;
height: 200px;
margin: auto;
border:5px solid;
padding: 10px;
background-color: #f66;
overflow: hidden;
}
</style>
<body>
<div id="box">
<div style="width: 500px;height: 300px;"></div>
</div>
</body>
<script>
var oBox =document.getElementById("box");
console.log(oBox.scrollHeight);
</script>
加上overflow:hidden 结果是320 去掉overflow就是310 在谷歌浏览器这样 但是在其他浏览器不会
滚动条的高度和宽度
- ele.scrollLeft获取的是滚动条的水平值 可读可写 就算加了超出隐藏也可以通过改变scrollleft改变元素的位置 但是如果设置的滚动上线就会等于上限值
#box{
width: 200px;
height: 200px;
margin: auto;
border:5px solid;
padding: 10px;
background-color: #f66;
overflow: scroll;
}
</style>
<body>
<div id="box">
<div style="width: 500px;height: 300px;background-color: yellow"></div>
</div>
</body>
<script>
var oBox =document.getElementById("box");
console.log(oBox.scrollLeft);
获取文档滚动条的高
document.documentElement.scrollTop
滚动到达元素顶部 ele.scrollIntoView() 但是ie9以下不能用
*{
margin: 0;
padding: 0;
}
#box{
width: 200px;
height: 200px;
margin: auto;
border:5px solid;
padding: 10px;
background-color: #f66;
overflow: hidden;
}
</style>
<body>
<div id="box">
<div style="width: 500px;height: 300px;background-color: yellow"></div>
</div>
<div style="height: 2000px;width: 10px;">11</div>
</body>
<script>
var oBox =document.getElementById("box");
document.onclick =function () {
oBox.scrollIntoView();
}
</script>
这样一点击就会回到元素顶部
获取鼠标移动的位置
document.onmousemove =function (e) {
console.log(e.clientX,e.clientY);
}
会打印鼠标的位置
鼠标跟随
#box{
position: absolute;
width: 200px;
height: 200px;
background-color: #f66;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
<script>
var boll =document.getElementById("box"),
_width=boll.offsetWidth,
_height =boll.offsetHeight;
document.onmousemove =function (e) {
boll.style.left =e.clientX - _width/2+"px";
boll.style.top =e.clientY - _height/2 +"px";
}
鼠标托拽事件
boll.onmousedown =function () {
document.onmousemove =function (e) {
boll.style.left =e.clientX - _width/2+"px";
boll.style.top =e.clientY - _height/2 +"px";
}
boll.onmouseup=function () {
document.onmousemove =null;
}
}