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

来源：互联网发布：node.exe是什么东西编辑：程序博客网时间：2024/05/16 17:29

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)

阅读全文

0 0