zoukankan      html  css  js  c++  java
  • offset、scroll、client区别

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2  <html xmlns="http://www.w3.org/1999/xhtml">
     3  <head>
     4      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
     5      <title>111</title>
     6      <style type="text/css">
     7      body{
     8          margin: 0;
     9          padding: 0;
    10      }
    11      </style>
    12  </head>
    13  <body>
    14      <div id="out1" style="100px;height:100px;overflow:scroll; margin:50px;">
    15          <div style="background:#666666;200px;height:200px;"></div>
    16      </div>
    17      <script type="text/javascript" src="test51.js"></script>
    18  </body>
    19  </html>
    1 var divs = document.getElementById("out1");
    2 console.log("offsetHeight:" + divs.offsetHeight);
    3 console.log("scrollHeight:" + divs.scrollHeight);
    4 console.log("clientHeight:" + divs.clientHeight);//滚动条占据17个像素
    5 console.log("offsetWidth:" + divs.offsetWidth);
    6 console.log("scrollWidth:" + divs.scrollWidth);
    7 console.log("clientWidth:" + divs.clientWidth);//滚动条占据17个像素
  • 相关阅读:
    图解设计模式-Visitor模式
    图解设计模式-Decorator模式
    图解设计模式-Strategy模式
    图解设计模式-Bridge模式
    HashMap源码
    LinkedList源码
    Vector源码
    ArrayList源码
    图解设计模式-Abstract Factory模式
    图解设计模式-Builder模式
  • 原文地址:https://www.cnblogs.com/qzsonline/p/2506210.html
Copyright © 2011-2022 走看看