案例：

循环精灵图背景

可以利用for循环设置一组元素的精灵图

案例分析：

 <script>
        //1.获取元素 所有的小li
        var lis = document.querySelectorAll('li');
        for(var i=0;i<lis.length;i++)
        {
   
            //让索引号 乘以44就是每个li 的背景y 坐标 index就是我们的y坐标
            var index = i * 44;
            lis[i].style.backgroundPosition = '0 -' + index + 'px';
        }
    </script>

案例：显示隐藏文本框内容

当鼠标点击文本框时，里面的默认文字隐藏，当鼠标离开文本框时，里面的文字显示。

案例分析

<body>
    <input type="text" value="手机">
    <script>
        //1.获取元素
        var text = document.querySelector('input');
        //2.注册事件 获得焦点事件 onfocus
        text.onfocus = function(){
   
            // console.log('得到了焦点');
            if(this.value === '手机'){
   
                this.value = '';
            }
            //获得焦点需要把文本框里面的蚊文字颜色变黑
            this.style.color = '#333';
        }
        //3.注册事件 失去焦点事件 onblur
        text.onblur = function(){
   
            // console.log('失去了焦点');
            if(this.value === ''){
   
                this.value = '手机';
            }
            //失去焦点需要把文本框里面的蚊文字颜色变黑
            this.style.color = '#999';
        }
    </script>
</body>