创建标签节点
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>