html中元素尺寸、坐标的获取-向日葵屋

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

男娘i 2022-06-11 07:36 332阅读 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)