JavaScript--dom

1、offsetLeft 属性

获取指定对象相对于版面/文档或由 offsetParent 属性指定的父坐标的计 算左侧位置

2、offsetTop 属性

获取指定对象相对于版面/文档或由 offsetParent 属性指定的父坐标的计 算顶端位置 

注意:

        1. 区分大小写

        2. offsetParent：布局中设置position属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body 

父元素没有定位  那距离就是他本身到文档的距离    父元素有定位  就是他到父元素的距离 

返回值包含:

• 元素向左偏移的像素值，元素的外边距（margin）
• offsetParent 元素的左侧内边距（padding）、边框（border）及滚动条

3、网页卷去的距离与偏移量

var lf = ev.pageX - mask.offsetWidth / 2 - oCon.offsetLeft;

var tp = ev.pageY - mask.offsetHeight / 2 - oCon.offsetTop;

      // var lf =  ev.pageX - mask.offsetWidth / 2 - midDiv.getBoundingClientRect().left;

      // var tp = ev.pageY - mask.offsetHeight / 2 - midDiv.getBoundingClientRect().top;

4、表格的操作

 var tab = document.querySelector("table");创建表

添加

      //var tr = tab.insertRow(0); //在table的第1行插入行
      var tr = tab.insertRow(); //在table的最后一行插入行
      var td1 = tr.insertCell();
      tr.insertCell().innerHTML = 90;
      td1.innerHTML = "安陵容";

删除

tab.deleteRow(0); //参数必需 索引 从头部删除行
//   tab.deleteRow(-1); //参数必需 索引 从尾部删除行

      //   console.log(tab.rows[1].cells[1]); //第二行第二列
      //   tab.rows[1].deleteCell(1);
      tab.rows[1].deleteCell(-1);

5、 偏移量

dom对象.clientLeft 获取元素左侧边框的宽度
dom对象.clientTop 获取元素上侧边框的宽度
dom对象.clientWidth content+padding 不包含border，不包含滚动条
dom对象.clientHeight

6、浏览器尺寸

console.log(document.documentElement.clientWidth); //浏览器可视区域的宽度，不包含滚动条 1349

console.log(document.body.clientWidth); //浏览器body的宽度，不包含滚动条 1333

console.log(window.innerWidth); //包含滚动条 1366

7、getComputedStyle()

window.getComputedStyle(dom对象).样式属性名

 两个参数：

        第一个参数必需，要获取样式的元素

        第二个参数可选，伪类元素，当不查询伪类元素的时候可以忽略或者传入 null