如何更改/切换按钮内的图标？

Question

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:p="http://primefaces.org/ui">

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<style>
#togglePassword{
    margin-left: -5px;
    margin-top: 11px;
    cursor: pointer;
}

</style>

</head>

<body>
    <p:inputText id="productadminpassword" 
            value="password" 
            type="password">
      </p:inputText>
 
    <button type="button" onclick="showHide();" >
        
        <i class='fa fa-eye-slash' id="eye"  />
    </button>
 
 <script type="text/javascript">
  function showHide() {
     
      if (productadminpassword.type =="password") {
          productadminpassword.type = 'text';
         
      }
    
    else {
        productadminpassword.type = 'password';
        
        
    }
  };
</script>
</body>
</html>

这就是我所做的。我需要的只是将斜线图标更改为内部按钮以及类型的更改（文本到密码，反之亦然）。此代码正在更改类型但不是图标。我不知道怎么做。如果有人知道，请帮助我。

Answer 1

您可以使用Element.classList从 DOM 添加或删除类

function showHide(obj) {
    var productadminpassword = document.getElementById('productadminpassword');
    var i = document.getElementById('eye')
    if (productadminpassword.type =="password") {
        productadminpassword.type = 'text';
        i.classList.remove("fa-eye-slash");
        i.classList.add("fa-eye");
    } else {
        productadminpassword.type = 'password';
        i.classList.remove("fa-eye");
        i.classList.add("fa-eye-slash");
    }
};

如何更改/切换按钮内的图标？

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-08-05 08:20:11

如何更改/切换按钮内的图标？

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-08-05 08:20:11

解决方案1
0 已采纳 2022-08-05 08:20:11