客户区client、视口尺寸【黑马web前端】

更新时间:2019年07月26日 11时15分55秒来源:黑马程序员论坛

一、客户区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
         }
      }
}
}

推荐了解热门学科

java培训	Python人工智能	Web前端培训	PHP培训
区块链培训	影视制作培训	C++培训	产品经理培训
UI设计培训	新媒体培训	产品经理培训	Linux运维
大数据培训	智能机器人软件开发

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。

黑马程序员热门视频教程【点击播放】

Python入门教程完整版（懂中文就能学会）	零起点打开Java世界的大门
C++\| 匠心之作从0到1入门学编程	PHP\|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript	软件测试入门到精通

上海中心

客户区client、视口尺寸【黑马web前端】

相关阅读