zoukankan      html  css  js  c++  java
  • JS——client

    clientTop、clientLeft:

    clientTop:盒子的上boder

    clientLeft:盒子的左border

    clientWidth与clientHeight

    1、在有DTD情况下:

    document.body.clientWidth、document.body.clientHeight:显示的是body的宽和高,document.documentElement.clientWidth、document.documentElement.clientHeight:显示的是body可视范围的宽和高,

    2、在无DTD情况下:

    document.body.clientWidth、document.body.clientHeight显示的是body可视范围的宽和高;

    document.documentElement.clientWidth、document.documentElement.clientHeight显示的是body的高和body可视范围的宽(IE中显示的都是body可视范围的宽和高)

    3、不管有没有DTD:

    window.innerWidth、window.innerHeight:显示的都是浏览器可视范围的宽和高,包括浏览器的头部和滚动条部分(IE678无法识别window.innerWidth)

    调用者的区别:

    1、clientTop、clientLeftclientWidth、clientHeight调用者是元素

    2、clientX、clientY调用者是event对象

    client、scroll、offset区别:

    clientWidth = width + padding

    clientHeight = height + padding

    offsetWidth = width + padding + border

    offsetHeight = height + padding + border

    scrollWidth = 内容宽度(不包含border)

    scrollHeight = 内容高度(不包含border)

    注意事项:IE67,scrollHeight即使不超出盒子,它的值也是内容的高度

    兼容写法:

    <script>
        document.title = client().width + "    " + client().height;
        //新事件:浏览器大小变化事件(浏览器哪怕大小变化1px也会触动这个事件)
        window.onresize = function () {
            document.title = client().width + "    " + client().height;
        }
    
        //获取屏幕可视区域的宽高
        function client() {
            if (window.innerHeight !== undefined) {
                return {
                    "width": window.innerWidth,
                    "height": window.innerHeight
                }
            } else if (document.compatMode === "CSS1Compat") {
                return {
                    "width": document.documentElement.clientWidth,
                    "height": document.documentElement.clientHeight
                }
            } else {
                return {
                    "width": document.body.clientWidth,
                    "height": document.body.clientHeight
                }
            }
        }
    </script>

    注意事项:window.innerWidth、window.innerHeight:显示的都是浏览器可视范围的宽和高,包括浏览器的头部和滚动条部分

  • 相关阅读:
    揭开Socket编程的面纱(留着自己慢慢看)
    XML 新手入门基础知识
    RocketMQ集群平滑下线或重启某个节点
    RocketMQ borker配置文件
    ES:在线迁移集群索引,数据不丢失
    SQL命令汇总
    Redis过期key淘汰策略
    中间件服务器内核参数优化
    在线做RAID命令
    CPU网卡亲和绑定
  • 原文地址:https://www.cnblogs.com/wuqiuxue/p/7986952.html
Copyright © 2011-2022 走看看