我们以一个实例来讲解在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';
就是将新的类名写在后面即可实现。