javascript - 如何使用 javascript 设置动态创建的按钮的样式？

Question

我正在尝试使用 .js 向我的 HTML 添加一个按钮。每次我单击另一个加载图像预览的按钮(ID 为“imageChoose”)时，该按钮应该会出现。新按钮(id:removeBttn)是一个删除按钮，它删除图像然后消失 这是 html 代码:

 <div class="row fileinput-control">
            <img id="preview"  src="default5.png" width="500px" height="360px" style="padding-left:15px;" onload="addDeleteBttn()"/>
            <br/>
            <input type="file" id="image" style="display: none;" />
            <!--<input type="hidden" style="display: none" value="0" name="remove"remove">-->
            <a href="javascript:changeProfile()">
                <div class="file-btns">
                    <span class="btn btn-default btn-file" id="imageChoose">
                        <i title="Bild auswählen" class="fa fileinput-new fa-file-image-o"></i></span></div>
            </a>        
            <a id="removeBttnFrame" href="javascript:removeImage()">    
            </a>

            </div>
        </div>

下面的 .js 代码添加了该按钮以及一些样式:

function    addDeleteBttn() {
    var removeBttn = document.createElement("BUTTON");
    removeBttn.title="Entfernen";
    removeBttn.innerHTML='<i class="fa fa-trash-o"></i>'
    removeBttn.class="removeBttnClass";
    document.getElementById("removeBttnFrame").appendChild(removeBttn);
}

.removeBttnClass  {
    position: absolute;
  top:91%;
  left: 22.7%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: white;
  cursor: pointer;
  border-radius: 5px;
color: black;
  text-align: center;
  border-color: lightgray;
   height: 50px ! important;
    width: 53px;
    border-radius: 4px;
      padding: 10x 17px;
    border-width: thin
}

上述功能无法正常工作:按钮按预期显示但没有样式。由于某种原因，.css 被完全忽略了。我是 HTML 的新手，无法弄清楚。看起来其他人在 How to dynamically create CSS class in JavaScript and apply? 上问过类似的问题这里:How to style dynamically created elements with CSS .. 这些并没有真正帮助我。我该怎么做？

Answer 1

你应该使用 removeBtn.className 而不是使用 removeBttn.class