获取元素的偏移量
-
就是元素在页面上的什么位置
-
我们有几个属性来获取,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%'
}
})