JavaScript 8

创建标签节点

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>

View Code