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

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>
HTML

输出:

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

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

登录

注册