JS中更改样式属性或者更改类名

我们以一个实例来讲解在JS中更改样式属性或者说是更改类名。

就密码输入框的查看密码案例：

<div class="box2">
        <input type="password" id="text1">
        <span class="iconfont icon-bukejian" id = "eyes"></span>
    </div>

设置好样式盒子。

更改设置的图标样式属性，将不查看改变为查看。

 

<script>
        var pwd = document.getElementById('text1');
        var eye = document.getElementById('eyes');
        var flag = 0;
        eye.onclick = function(){
            if(flag == 0)
            {
                pwd.type = 'text';
                eye.className = 'iconfont icon-yanjing';
                flag = 1;
            }
            else
            {
                pwd.type = 'password';
                eye.className = 'iconfont icon-bukejian';
                flag = 0;
            }
        }
</script>

更改后：

 具体的操作就是：

        在操作元素中将class的类名进行更改，样式为：

eye.className = 'iconfont icon-yanjing';

就是将新的类名写在后面即可实现。