JavaScript 如何在按钮上显示图标以显示/隐藏文本

在本文中，我们将学习如何在显示/隐藏文本按钮上添加图标，并且您还可以将该图标用作按钮。这将通过使用JavaScript来完成。在此示例中，借助JavaScript的帮助，您可以轻松切换显示和隐藏。在按钮旁边添加任何图标，或者您还可以将图标用作按钮。在这里，您只需链接到酷炫字体的图标，即可将图标带到您的网页中。在这个示例中，点击火焰图标旁边的文字会触发显示/隐藏功能。

所需内容：一个<div>，用于显示和隐藏设置的元素，一个用作按钮的文本，以及完成这项工作的JavaScript。下面的代码将更清楚地说明这种方法。

示例： （当display属性设置为“none”时，元素不会占用空间。）

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        How to display icon next to 
        show/hide text on button?
    </title>
 
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
 
<body>
    <div onclick="showme('widget');" id="geeks">
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
        <i class="fa fa-fire"></i>
    </div>
 
    <div id="widget" style="display:none;">
        <h3>
            GeeksforGeeks: A Online Computer 
            Science Portal for Geeks
        </h3>
    </div>
 
    <script>
        function showme(id) {
            let gfg = document.getElementById(id);
            let GFG = document.getElementById("geeks");
             
            if (gfg.style.display == 'block') {
                gfg.style.display = 'none';
                GFG.innerHTML =
                    'GFG <i class="fa fa-fire"></i>';
            } else {
                gfg.style.display = 'block';
                GFG.innerHTML =
                    'Tag-line <i class="fa fa-fire"></i>';
            }
        }
    </script>
</body>
 
</html>

输出：

JavaScript 如何在按钮上显示图标以显示/隐藏文本