获取元素的偏移量

• 就是元素在页面上的什么位置

• 我们有几个属性来获取，offsetLeft 和 offsetTop 和 offsetWidth 和 offsetHeight

offsetLeft 和 offsetTop

• 获取的是元左边的偏移量和上边的偏移量

• 分成两个情况来看

• 没有定位的情况下

  • 获取元素边框外侧到页面内侧的距离

• 有定位的情况下

  • 获取元素边框外侧到定位父级边框内侧的距离（其实就是我们写的 left 和 top 值）

offsetWidth 和 offsetHeight

• 获取元素 内容宽高 + padding宽高 + border宽高 的和

clientWidth 和 clientHeight

• 获取元素 内容宽高 + padding宽高 的和

<table border="1" cellspacing="0" width="400" height="200" align="center">
  <tbody align="center">
    <thead align="center">
      <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
        <td>班级</td>
        <td>电话</td>
      </tr>
    </thead>
  </tbody>
</table>
var tbody = document.querySelector('tbody');
var arrjson = [
  {"name":"张三","age":20,"sex":"man","class":"2","tel":"15063489223"},
  {"name":"李四","age":21,"sex":"woman","class":"1","tel":"15085469823"},
  {"name":"王五","age":22,"sex":"man","class":"4","tel":"15075219323"},
  {"name":"赵六","age":23,"sex":"woman","class":"2","tel":"15034969123"},
];
var tr = '';
for(var i = 0; i < arrjson.length; i++) {
  tr += '<tr><td>' + arrjson[i].name + '</td><td>' + arrjson[i].age + '</td><td>' + arrjson[i].sex + '</td><td>' + arrjson[i].class + '</td><td>' + arrjson[i].tel + '</td></tr>'
}
tbody.innerHTML = tr;

开关灯案例：

<button>开灯</button>
​
var oBtns = document.querySelectorAll('button')
var flag = true;
oBtns[0].onclick = function () {
  flag = !flag;
  if(flag) {
    document.body.style.background = '#000'
    this.innerHTML = '开灯'
  } else {
    document.body.style.background = 'yellow'
    this.innerHTML = '关灯'
  }
}

全选和取消

<button>全部选中</button>
<button>取消选中</button>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
var oBtns = document.querySelectorAll('button')
var oInps = document.querySelectorAll('input')
oBtns[0].onclick = function () {
  for(var i = 0; i < oInps.length; i++) {
    oInps[i].checked = true
  }
  this.innerHTML = '全部选中'
}
oBtns[1].onclick = function () {
  for(var i = 0; i < oInps.length; i++) {
    oInps[i].checked = false
  }
  this.innerHTML = '取消全选'
}

全选切换

<button>全部选中</button>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
var oBtn = document.querySelector('button')
var oInps = document.querySelectorAll('input')
var flag = true;
oBtn.onclick = function () {
  flag = !flag;
  if(flag) {
    for(var i = 0; i < oInps.length; i++) {
      oInps[i].checked = false
    }
    this.innerHTML = '全部选中'
  } else {
    for(var i = 0; i < oInps.length; i++) {
      oInps[i].checked = true
    }
    this.innerHTML = '取消全选'
  }
}

选项卡

<input type="button" value="教育" class="active">
<input type="button" value="娱乐">
<input type="button" value="体育">
<div></div>
var oArrs = ["教育内容","娱乐内容","体育内容"]
​
var oDiv = document.querySelector('div')
var oBtns = document.querySelectorAll('input')
​
for(var i = 0; i < oBtns.length; i++) {
  oBtns[i].setAttribute('index',i)
  oBtns[i].onclick = function(){
    for(var j = 0; j < oBtns.length; j++) {
      oBtns[j].removeAttribute('class')
    }
    this.setAttribute('class','active')
    oDiv.innerHTML = oArrs[this.getAttribute('index')]
  }
}

网页换肤

 * {
    margin: 0;
    padding: 0;
  }
  html{
    height: 100%;
  }
  .cont {
    width: 900px;
    height: 100px;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -450px;
    margin-top: -50px;
  }
  img {
    width: 100px;
  }
  .active {
    transform: translateX(-100px);
  }
<div class="cont">
  <img src="./images/1.jpg" alt="">
  <img src="./images/2.jpg" alt="">
  <img src="./images/3.jpg" alt="">
  <img src="./images/4.jpg" alt="">
  <img src="./images/5.jpg" alt="">
  <img src="./images/6.jpg" alt="">
  <img src="./images/7.jpg" alt="">
  <img src="./images/8.jpg" alt="">
</div>
var imgs = document.querySelectorAll('img')
var box = document.querySelector('.box')
​
imgs.forEach(function(item,index) {
  item.onclick = function() {
    document.body.style.background = 'url(' + item.src +') no-repeat'
    document.body.style.backgroundSize = '100% 100%'
  }
})