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

Answer 2

为什么不只是在“删除”按钮上切换一个类，使其在单击时隐藏在DOM中，而在单击“ imageChoose”时可见？

您可以通过在“ imageChoose”按钮上添加一个函数来实现此目的，该函数将CSS类名称切换为“ removeBttn”

function loadPreviewImage() {
  // your code here to load preview. below is dummy to demonstrate
  const previewImageDiv = document.querySelector('#preview-image');
  previewImageDiv.classList.remove('hide');
}

function removePreviewImage() {
  const previewImageDiv = document.querySelector('#preview-image');
  
  previewImageDiv.classList.toggle('hide');
}

#preview-image.hide {
  display: none;
}
#preview-image {
  display: block;
  width: 200px;
  position: relative;
}
#remove-button {
  position: absolute;
  right: 0;
}
img {
  max-width: 200px;
}

 <div class="row fileinput-control">
  <button id="image-choose" type="button" onclick="loadPreviewImage()">Load Preview</button>
  
  <div id="preview-image">
    <button id="remove-button" 
            type="button" 
            title="remove preview" 
            onclick="removePreviewImage()">x</button>
    <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2F6%2F66%2FLagothrix_lagotricha4.JPG%2F1200px-Lagothrix_lagotricha4.JPG&f=1&nofb=1" alt="monkey" title="monkey" />
  </div>
</div>

我还将“ imageChoose”更改为按钮元素，而不是锚标记。按钮触发页面上的操作，锚标记将您带入位置。这是accessibility standard。

Answer 3

您可以将JavaScript更改为此，然后它将起作用。

function addDeleteBttn() {
    var removeBttn = document.createElement("BUTTON");
    removeBttn.title="Entfernen";
    removeBttn.innerHTML='<i class="fa fa-trash-o"></i>'
    var style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = '.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}';
    document.head.appendChild(style);
    removeBttn.className="removeBttnClass";

    document.getElementById("removeBttnFrame").appendChild(removeBttn);
}

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

3 个答案: