javascript--29--cssom视图模式

CSSOM视图模式

获取窗口的宽高

window.innerWidth 窗口宽度

console.log(window.innerWidth);

结果是1120 ，当缩小浏览器刷新就会变小

window.innerHeight 窗口高度但是从ie8以下就不能用

console.log(window.innerHeight);

结果是634

document.documentElement.clientWidth 窗口的宽
document.documentElement.clientHeight 窗口的高

console.log(document.documentElement.clientWidth);

结果是1366

<body style="height: 2000px;">
</body>
<script>
    console.log(document.documentElement.clientWidth);

结果是1349 因为出现了滚动条减去滚动条的宽度

console.log(document.documentElement.clientHeight);

结果是662

<body style="height: 2000px;width: 2000px;">
    <div style="width: 2000px;"></div>
</body>
<script>
    console.log(document.documentElement.clientHeight);

结果是645

获取元素的宽高

ele.clientWidth宽度加内边距不算边框可视区域 ele.clientHeight高度加内边距不算边框

<style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 200px;
            height: 200px;
            margin: auto;
            border:5px solid;
            padding: 10px;
            background-color: #f66;
        }
    </style>
<body>
    <div id="box"></div>
</body>
<script>
    var oBox =document.getElementById("box");
    console.log(oBox.clientWidth,oBox.clientHeight);
</script>

结果是220 220 如果是box-sizing为border-box 那么变为190 190 减去边框

offsetWidth,offsetHeight 盒子整体宽高

console.log(oBox.offsetWidth,oBox.offsetHeight);

结果是230 230

获取元素边框clientLeft clientTop

console.log(oBox.clientLeft,oBox.clientTop);

结果是5 5

offsetLeft offsetTop 基于定位父级获取元素外边框距离定位父级元素的距离
offsetParent 最近的定位父级

console.log(oBox.offsetLeft,oBox.offsetTop);

结果是568 0

scrollWidth 能够获取超出部分的宽度 paddingleft+width+超出部分

<body>
    <div id="box">
        <div style="width: 500px;height: 10px;"></div>
    </div>
</body>
<script>
    var oBox =document.getElementById("box");
    console.log(oBox.scrollWidth);

结果是510

获取可以滚动的宽度

console.log(oBox.scrollWidth-oBox.clientWidth+paddingRight);

300

<style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 200px;
            height: 200px;
            margin: auto;
            border:5px solid;
            padding: 10px;
            background-color: #f66;
        }
    </style>
<body>
    <div id="box">
        <div style="width: 500px;height: 330px;"></div>
    </div>
</body>
<script>
    var oBox =document.getElementById("box");
    console.log(oBox.scrollHeight);
</script>

结果是340

#box{
            width: 200px;
            height: 200px;
            margin: auto;
            border:5px solid;
            padding: 10px;
            background-color: #f66;
            overflow: hidden;
        }
    </style>
<body>
    <div id="box">
        <div style="width: 500px;height: 300px;"></div>
    </div>
</body>
<script>
    var oBox =document.getElementById("box");
    console.log(oBox.scrollHeight);
</script>

加上overflow:hidden 结果是320 去掉overflow就是310 在谷歌浏览器这样但是在其他浏览器不会

滚动条的高度和宽度

ele.scrollLeft获取的是滚动条的水平值可读可写就算加了超出隐藏也可以通过改变scrollleft改变元素的位置但是如果设置的滚动上线就会等于上限值

#box{
            width: 200px;
            height: 200px;
            margin: auto;
            border:5px solid;
            padding: 10px;
            background-color: #f66;
            overflow: scroll;
        }
    </style>
<body>
    <div id="box">
        <div style="width: 500px;height: 300px;background-color: yellow"></div>
    </div>
</body>
<script>
    var oBox =document.getElementById("box");
    console.log(oBox.scrollLeft);

获取文档滚动条的高

document.documentElement.scrollTop

滚动到达元素顶部 ele.scrollIntoView() 但是ie9以下不能用

*{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 200px;
            height: 200px;
            margin: auto;
            border:5px solid;
            padding: 10px;
            background-color: #f66;
            overflow: hidden;
        }
    </style>
<body>
    <div id="box">
        <div style="width: 500px;height: 300px;background-color: yellow"></div>
    </div>
    <div style="height: 2000px;width: 10px;">11</div>
</body>
<script>
    var oBox =document.getElementById("box");
    document.onclick =function () {
        oBox.scrollIntoView();
    }
</script>

这样一点击就会回到元素顶部

获取鼠标移动的位置

document.onmousemove =function (e) {
      console.log(e.clientX,e.clientY);
  }

会打印鼠标的位置

鼠标跟随

#box{
      position: absolute;
      width: 200px;
      height: 200px;
      background-color: #f66;
    }
  </style>
</head>
<body>
  <div id="box">
  </div>
</body>
<script>
  var boll =document.getElementById("box"),
      _width=boll.offsetWidth,
      _height =boll.offsetHeight;

  document.onmousemove =function (e) {
      boll.style.left =e.clientX - _width/2+"px";
      boll.style.top =e.clientY - _height/2 +"px";
  }

鼠标托拽事件

boll.onmousedown =function () {
      document.onmousemove =function (e) {
          boll.style.left =e.clientX - _width/2+"px";
          boll.style.top =e.clientY - _height/2 +"px";
      }
      boll.onmouseup=function () {
          document.onmousemove =null;
      }
  }