创建标签节点
document.createElement('div');
给元素添加class属性
div.className='box';
div.innerHTML=index;
替换元素
replaceChild(newElement,oldElement);
删除元素
removeChild(box);
获取行间样式属性
element.style.Attribute
获取元素宽高 位置偏移量
offsetLeft 元素距左边界偏移量
offsetTop 元素距上边界偏移量
offsetWidth 元素的宽度 边框加padding加宽度
offsetHight 元素的高度 边框加padding加高度
clientWidth 元素的宽度 元素的净宽+padding
clientHeight 元素的高度 元素的净高+padding
getComputedStyle(element)['styleAttr']
element: 元素
styleAttr:指定要获取的样式属性名称
console.log(getComputedStyle(box)['width']);
应用小样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
50px;
height: 50px;
background: red;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var box = document.getElementsByClassName('box')[0];
var timmer = null;
moveBox();
// 鼠标移入时，清除定时器，---动画停止
box.onmouseover = function () {
clearInterval(timmer);
}
// 鼠标移出
box.onmouseout = function () {
moveBox();
}
// 元素移动的方法
function moveBox() {
timmer = setInterval(function () {
// 先获取当前元素的 位置
var leftTmp = box.offsetLeft;
// 修改元素位置
box.style.left = leftTmp + 1 + 'px';
}, 30);
}
</script>
</body>
</html>