客户区client、视口尺寸

空城里的往日时光

于 2019-04-26 19:46:51 发布

阅读量344

点赞数 1

分类专栏： JavaScript 文章标签： clientHeight clientWidth innerHight innerWidth

本文链接：https://blog.csdn.net/weixin_42472040/article/details/89527750

版权

JavaScript 专栏收录该内容

65 篇文章 0 订阅

订阅专栏

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

空城里的往日时光

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
客户区client、视口尺寸

目录一、客户区client概述clientHeightclientWidthclientLeftclientTop二、视口尺寸标准视口属性兼容低版本ie标准模式下的兼容怪异模式下的兼容封装兼容性方法返回浏览器的视口尺寸一、客户区client概述客户区client是指dom元素的内容及其内边距所占据的空间大小。clientHeigh...
复制链接

扫一扫