clientWidth和clientHeight

clientWidth 获取网页可视区域宽度(两种用法)
clientHeight 获取网页可视区域高度(两种用法)
注意:
调用者不同,意义不同:

  • 盒子调用:指盒子本身。
  • body/html调用:可视区域大小。

clientX和clientY

  • clientX 鼠标距离可视区域左侧距离(event调用)
  • clientY 鼠标距离可视区域上侧距离(event调用)

clientTop和clientLeft

  • clientTop 指的是盒子border的高度
  • clientLeft 指的是盒子border的宽度

获取屏幕可视区域的宽高

  • ie9及其以上的版本:window.innerWidth/Height
  • 标准模式(有DTD)(“CSS1Compat”)

    document.documentElement.clientWidth
    document.documentElement.clientHeight
  • 怪异模式 (没有DTD)
document.body.clientWidth
document.body.clientHeight
  • 封装的兼容性写法
    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
            }
        }
    }

检测屏幕宽度(分辨率)
window.screen.width

Last modification:April 20th, 2018 at 08:13 am
If you think my article is useful to you, please feel free to appreciate