如何在 js 中显示字形图标？答案

【问题标题】：how can i show the glyphicon in js?如何在 js 中显示字形图标？
【发布时间】：2020-08-24 14:39:31
【问题描述】：

我使用了一个字形图标，但我在 CSS 中制作了可见性：隐藏，我希望当用户写一些东西并单击按钮（发布）时，字形图标 (#gl1) 会显示，但我有一个问题，当我这样做时js的glypicon不显示，不知道为什么

我的代码：我的 CSS ：

    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width , initial-scale=1">     
    <title>POST</title>
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <style>
    div{
    background-color: beige;
    height:400px;
    width:500px;
    padding: 10px;
    border: 3px solid brown;
    margin:20px;    
    }
    div #txtar{
    width:470px;
    height:280px;
    font-size:30px;
    padding-left: 13px;
    resize: none;    
    }
    div .btn{
    float: right;
    margin-top:40px;
    margin-right:9px;
    width:80px;
    height: 40px;
    font-size:17px;
    font-family: monospace;
    font-weight: bold;
    background-color:beige; 
    border:1px solid brown;    
    }
    #post{
    width:470px;
    height:500px;
    background-color:white;
    border:1px solid brown;

       }
    #post .glyphicon-pencil , .glyphicon-trash{
    float: right;
    color:brown;
    font-size: 20px;
    margin-left: 10px;
    visibility: hidden;
        }
    #post #gl1{
     float: right;
     color:brown;
     font-size: 20px;
     margin-left: 10px;
     visibility:visible;   
      }   
    #post span{
     border:1px solid brown;
     padding:10px;   
    }   
    </style>   
    </head>

当用户点击 id="post" 的按钮“post”时，这是我想要的 HTML 元素 , glypicon 将显示 ...

    <body>
    <div>
    <textarea id="txtar" placeholder="Write Something ..."></textarea>    
    <button class="btn" onclick="ClickPost();">Post</button>
    <button class="btn" onclick="">Cancel</button>    
    </div>    
    <div id="post" onmousedown="">    
    <span id="gl1" class="glyphicon glyphicon-cog" ></span><br>    
    <span class="glyphicon glyphicon-pencil" id="gl2"></span>
    <span class="glyphicon glyphicon-trash" id="gl3"></span>   
    </div>

JS 代码：

    <script>
    function ClickPost(){
    var txt= window.txtar.value;
    var txt2;    
    window.post.innerHTML=txt;
    window.txtar.value=" ";     
    if (!txt){
    txt2 = txt;  
    window.post.innerHTML="Please write something ..!";
    window.post.style.color="#a80707";
 
    }
    else{
    window.gl1.style.visibility="visible";    
    }   
     }   

    </script>
    <script src="jquery-3.5.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>    
    </body>    
    </html>

当我打开控制台时，我发现这条消息：未捕获的类型错误：无法读取未定义的属性“样式” 在 ClickPost（发布编辑和删除.html:94）在 HTMLButtonElement.onclick（后期编辑和 delete.html:67）

请任何人帮忙

【问题讨论】：

标签： javascript html css twitter-bootstrap-3

【解决方案1】：

此命令window.post.innerHTML = txt; 将用新的txt 值替换div#post 元素的内容，因此此div#post 中的所有其他元素都将被删除（以及3 个跨度）。

为了保护跨度，您可以在div#post 中添加另一个内部元素，例如：

<div id="post" onmousedown="">    
    <span id="gl1" class="glyphicon glyphicon-cog" ></span><br>    
    <span class="glyphicon glyphicon-pencil" id="gl2"></span>
    <span class="glyphicon glyphicon-trash" id="gl3"></span>   
    <span id="postContents"></span> <!-- here it is -->
</div>

function ClickPost() {
  var txt = window.txtar.value;
  window.postContents.innerHTML = txt;
  window.txtar.value = "";
  if (!txt) {
    window.postContents.innerHTML = "Please write something ..!";
    window.post.style.color = "#a80707";
  } else {
    window.gl1.style.visibility = "visible";
    window.post.style.color = "";
  }
}

div {
  background-color: beige;
  height: 400px;
  width: 500px;
  padding: 10px;
  border: 3px solid brown;
  margin: 20px;
}

div #txtar {
  width: 470px;
  height: 280px;
  font-size: 30px;
  padding-left: 13px;
  resize: none;
}

div .btn {
  float: right;
  margin-top: 40px;
  margin-right: 9px;
  width: 80px;
  height: 40px;
  font-size: 17px;
  font-family: monospace;
  font-weight: bold;
  background-color: beige;
  border: 1px solid brown;
}

#post {
  width: 470px;
  height: 500px;
  background-color: white;
  border: 1px solid brown;
}

#post .glyphicon-pencil,
.glyphicon-trash {
  float: right;
  color: brown;
  font-size: 20px;
  margin-left: 10px;
  visibility: hidden;
}

#gl1 {
  float: right;
  color: brown;
  font-size: 20px;
  margin-left: 10px;
  visibility: hidden;
}

#gl1, #gl3 {
  visibility: hidden;
}

#post span {
  border: 1px solid brown;
  padding: 10px;
}

#post #postContents {
  border: none;
  padding: 0;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div>
  <textarea id="txtar" placeholder="Write Something ..."></textarea>
  <button class="btn" onclick="ClickPost();">Post</button>
  <button class="btn" onclick="">Cancel</button>
</div>
<div id="post" onmousedown="">
  <span id="gl1" class="glyphicon glyphicon-cog"></span><br>
  <span class="glyphicon glyphicon-pencil" id="gl2"></span>
  <span class="glyphicon glyphicon-trash" id="gl3"></span>
  <span id="postContents"></span>
</div>

注意：我略微编辑了您的 CSS、HTML 和 JS，最大限度地保留了您的代码。

附：如果您有任何问题，请尽管提问。

【讨论】：