js操作元素相关案例

最新推荐文章于 2024-06-20 20:20:21 发布

黑马金牌编程

最新推荐文章于 2024-06-20 20:20:21 发布

阅读量1.9k

点赞数 8

分类专栏：前端web开发文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/gyqailxj/article/details/122311761

版权

前端web开发专栏收录该内容

48 篇文章 6 订阅

订阅专栏

案例：

循环精灵图背景

可以利用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>

样式属性操作

在这里插入图片描述

案例：密码框格式提示错误信息

用户如果离开密码框，里面输入个数不是6-16，则提示错误信息，否则提示输入正确信息

案例分析：

在这里插入图片描述

操作元素总结

操作元素是DOM核心内容

黑马金牌编程

关注

8
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
2
评论
js操作元素相关案例

案例：循环精灵图背景可以利用for循环设置一组元素的精灵图案例分析： <script> //1.获取元素所有的小li var lis = document.querySelectorAll('li'); for(var i=0;i<lis.length;i++) { //让索引号乘以44就是每个li 的背景y 坐标 index就是我们的y坐标 var in
复制链接

扫一扫