html中元素尺寸、坐标的获取

男娘i 2022-06-11 07:36 206阅读 0赞

html

<img src="src/images/bg5.jpg" alt="">
    <div class="main">
      <div id='p' style="height:100px">asdasd</div>
    </div>

css

*{margin:0;padding:0;}
      .main{
        width: 350px;
        height: 200px;
        background: green;
        position: relative;
      }
      #p{
        width: 200px;
        height: 100px;
        border: 2px solid red;
        margin: 15px;
        padding: 20px;
        position: absolute;
        top: 35px;
        left: 30px;
      }

获取height（这里就不介绍width了）

//dom方法
          var p=document.getElementById("p");

var str_dom="scrollHeight: "+p.scrollHeight;//140, 包含padding
          str_dom+=", offsetHeight: "+p.offsetHeight;//144, 包含padding和border
          str_dom+=", clientHeight: "+p.clientHeight;//140, 包含padding
          str_dom+=", height: "+p.style.height;//100px, 带单位，只有内嵌样式才能获取
          /*str_dom+=", scrollWidth: "+p.scrollWidth;
          str_dom+=", offsetWidth: "+p.offsetWidth;
          str_dom+=", clientWidth: "+p.clientWidth;*/
          console.log(str_dom);
     //jquery方法
          var str_jq="height: "+$(p).height();//100.36364，补白
          str_jq+=", innerHeight: "+$(p).innerHeight();//140.36364, 补白+padding
          str_jq+=", outerHeight: "+$(p).outerHeight();//144, 包括padding和border
          console.log(str_jq)
    
    //document
          var str_doc="doc.scrollHeight: "+document.body.scrollHeight;
          str_doc+=", doc.offsetHeight: "+document.body.offsetHeight;
          str_doc+=", doc.clientHeight: "+document.body.clientHeight;
          console.log(str_doc);//三个等高
    
    //window
          var str_win="win.height: "+window.screen.height;//包括工具栏高度
          str_win+=", win.availHeight: "+window.screen.availHeight;//浏览器实际可用尺寸
          console.log(str_win);

获取y坐标

//坐标
          var str_y="scrollTop: "+p.scrollTop;//0
          str_y+=", offsetTop: "+p.offsetTop;//30, margin+top
          str_y+=", clientTop: "+p.clientTop;//2, border
          str_y+=", offsetY: "+event.offsetY;//相对于容器的y
          str_y+=", clientY: "+event.clientY;//相对于document的y
          console.log(str_y)

//jquery
          var str_y_jq="scrollTop: "+$(p).scrollTop();//0
          str_y_jq+=", positionTop: "+$(p).position().top;//35, 相对于父容器的y坐标
          str_y_jq+=", offsetTop: "+$(p).offset().top;//相对于document的绝对y坐标
          console.log(str_y_jq)