JavaScript操作元素实例大全

操作元素内容参考之前文章：JavaScript WebAPI、DOM、事件、操作元素

案例：显示隐藏密码案例

核心思路： (操作表单元素属性)

• 点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码 一个按钮两个状态，
• 点击一次，切换为文本框，继续点击一次切换为密码框
• 算法：利用一个flag变量，来判断flag的值，如果是1 就切换为文本框，flag 设置为0，如果是0 就切换为密码框，flag设置为1

案例：循环精灵图

核心思路： （操作元素样式）

• 利用for循环 修改精灵图片的 背景位置
• background-position 让循环里面的 i 索引号 * 44就是每个图片的y坐标

案例：密码框验证信息

核心思路：（用className修改样式属性）

• 首先判断的事件是表单失去焦点 onblur
• 如果输入正确则提示正确的信息颜色为绿色小图标变化
• 如果输入不是6到16位，则提示错误信息颜色为红色 小图标变化
• 因为里面变化样式较多，采取className修改样式

    

        
        
请输入6~16位密码
    
    

案例：背景换色

核心思想：（操作元素样式属性）

给4个小图片利用循环注册点击事件当点击了这个图片，让页面背景改为当前的图片核心算法： 把当前图片的src 路径取过来，给body 做为背景即可

案例：表格换色

核心思路：（排他思想）

用到新的鼠标事件 鼠标经过 onmouseover 鼠标离开 onmouseout核心思路：鼠标经过 tr 行，当前的行变背景颜色，鼠标离开去掉当前的背景颜色注意： 第一行（thead里面的行）不需要变换颜色，因此获取的是 tbody 里面的行

    

        

            

                
代码
                
名称
                
最新公布净值
                
累计净值
                
前单位净值
                
净值增长率
            
        
        

            

                
003526
                
农银金穗3个月定期开放债券
                
1.075
                
1.079
                
1.074
                
+0.047%
            
            

                
003526
                
农银金穗3个月定期开放债券
                
1.075
                
1.079
                
1.074
                
+0.047%
            
            

                
003526
                
农银金穗3个月定期开放债券
                
1.075
                
1.079
                
1.074
                
+0.047%
            
            

                
003526
                
农银金穗3个月定期开放债券
                
1.075
                
1.079
                
1.074
                
+0.047%
            
            

                
003526
                
农银金穗3个月定期开放债券
                
1.075
                
1.079
                
1.074
                
+0.047%
            
            

                
003526
                
农银金穗3个月定期开放债券
                
1.075
                
1.079
                
1.074
                
+0.047%
            
        
    
    

案例：表单全选和反选

核心思想：

• 全选和取消全选做法： 让所有复选框的checked属性（选中状态） 跟随 全选按钮
• 复选框需要全部选中， 全选才能选中做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中
• 可以设置一个变量，来控制全选是否选中
  

    

        

            

                

                    

                        
                    
                    
商品
                    
价钱
                
            
            

                

                    

                        
                    
                    
iPhone8
                    
8000
                
                

                    

                        
                    
                    
iPad Pro
                    
5000
                
                

                    

                        
                    
                    
iPad Air
                    
2000
                
                

                    

                        
                    
                    
Apple Watch
                    
2000
                
            
        
    
    

案例：tab栏切换

核心思想：（排他思想）

• Tab栏切换有2个大的模块
• 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式
• 下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。 规律：下面的模块显示内容和上面的选项卡一一对应，相匹配
• 核心思路： 给上面的tab_list 里面的所有小li 添加自定义属性，属性值从0开始编号。
• 当点击tab_list 里面的某个小li，让tab_con 里面对应序号的内容显示，其余隐藏（排他思想）
  

    

        

            

                
商品介绍
                
规格与包装
                
售后保障
                
商品评价（50000）
                
手机社区
            
        
        

            

                商品介绍模块内容
            
            

                规格与包装模块内容
            
            

                售后保障模块内容
            
            

                商品评价（50000）模块内容
            
            

                手机社区模块内容
            
        
    
    

总结

到此这篇关于JavaScript操作元素的文章就介绍到这了,更多相关js操作元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！