一、客户区client
概述
客户区client是指dom元素的内容及其内边距所占据的空间大小。
clientHeight
获取dom元素的客户区高度，返回结果是一个数字，单位像素。clientHeight不包括滚动条的宽度。
clientHeight = paddingTop + height + paddingBottom
clientWidth
获取dom元素的客户区宽度，返回结果是一个数字，单位像素。clientWidth不包括滚动条的宽度。
clientWidth = paddingLeft + width + paddingRight
<style>
div{
width: 100px;
height: 100px;
padding: 10px;
margin: 10px;
border: 1px solid black;
}
</style>
<div id="div"></div>
<script>
//120(10+100+10)
console.log(div.clientHeight); //120
console.log(div.clientWidth); //120
</script>
<style>
div{
width: 100px;
height: 100px;
padding: 10px;
margin: 10px;
border: 1px solid black;
overflow:scroll;
}
</style>
<div id="div"></div>
<script>
//103(10+100+10-17), 滚动条宽度为17px
console.log(div.clientHeight); //103
console.log(div.clientWidth); //103
</script>
clientLeft
获取dom元素左边框的宽度，返回结果是一个数字，单位像素。display为inline时，该方法返回0。
clientTop
获取dom元素上边框的宽度，返回结果是一个数字，单位像素。display为inline时，该方法返回0。
<style>
div{
width: 100px;
height: 100px;
padding: 10px;
margin: 10px;
border: 1px solid black;
}
</style>
<div id="div"></div>
<script>
console.log(div.clientLeft); //1
console.log(div.clientTop); //1
</script>
二、视口尺寸
视口即可视区窗口，是html文档能被看到的部分，不包括浏览器的工具栏、导航栏等。
标准视口属性
w3c标准的视口属性有innerWidth和innerHeight两个，ie8及以下版本的浏览器不兼容。
window.innerWidth
获取浏览器视口的宽度，返回结果是一个数字，单位像素。
window.innerHeight
获取浏览器视口的高度，返回结果是一个数字，单位像素。
兼容低版本ie
浏览器有两种页面渲染模式（渲染就是识别语法并将其绘制成页面的过程），分别是标准模式和怪异模式（也叫混杂模式）。怪异模式下浏览器所识别的语法不再是最新语法，而是试图去兼容之前的语法（具体兼容到哪个版本取决于浏览器自身的兼容区间）。
标准模式下的兼容
document.documentElement.clientWidth
获取视口的宽度，返回结果是一个数字，单位像素。浏览器标准模式下可用，任何浏览器都兼容。
document.documentElement.clientHeight
获取视口的高度，返回结果是一个数字，单位像素。浏览器标准模式下可用，任何浏览器都兼容。
启用标准模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
怪异模式下的兼容
document.body.clientWidth
获取视口的宽度，返回结果是一个数字，单位像素。浏览器怪异模式下可用，任何浏览器都兼容。
document.body.clientHeight
获取视口的高度，返回结果是一个数字，单位像素。浏览器怪异模式下可用，任何浏览器都兼容。
启用怪异模式
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
封装兼容性方法返回浏览器的视口尺寸
document.compartMode === "BackCompat" //怪异模式
document.compartMode === "CSS1Compat" //标准模式
function getViewportOffset(){
if(window.innerWidth){
return {
w: window.innerWidth,
h: window.innerHeight
}
}else{
if(document.compartMode === "BackCompat"){
//怪异模式
return {
w: document.body.clientWidth,
h: document.body.clientHeight
}
}else{
//标准模式
return {
w: document.documentElement.clientWidth,
h: document.documentElement.clientHeight
}
}
}
}
|
|
收藏
淘帖
踩
