Question

我知道这已被多次询问和回答，但我已经尝试了一切，没有任何效果。

我有一个HTML文件如下：

<div class="wrapper">
  <div class="game-container">
    <div class="canvas-container">
      <canvas id="game-canvas" width="1024" height="640"></canvas>
      <div id="control-area">
        <span id="available-controls" ondrop="drop(event)" ondragover="allowDrop(event)">
          <img src="resources/graphics/right.png" draggable="true" ondragstart="drag(event)" id="drag1">
        </span>
      </div>
      <div id="action-area">
        <span class="action" ondrop="drop(event)" ondragover="allowDrop(event)"></span>
      </div>
    </div>
  </div>
</div>

我的CSS看起来像这样：

.wrapper {
  display: table;
  padding: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

.canvas-container {
  position: relative;
  max-width: 1024px;
  margin: 0 auto;
}

#game-canvas {
  width: 100%;
  height: auto;
  z-index: 0;
}

.game-container {
  display: table-cell;
  vertical-align: middle;
}

#available-controls {
  width:64px;
  height:64px;
  border:1px solid #aaaaaa;
  display: inline-block;
  overflow: hidden;
}

#control-area{
 display: block;
 overflow: hidden;
}
#action-area{
 display: block;
 overflow: hidden;
}

.action {
  width:64px;
  height:64px;
  border:1px solid #aaaaaa;
  display: inline-block;
  overflow: hidden;
}

CSS非常适用于我在HTML中静态编写的任何元素，但是，它永远不适用于我使用JS动态应用的新元素。我按如下方式添加元素：

  function addAction() {
  var newAction = document.createElement("span");
  newAction.setAttribute('class', "action") || newAction.setAttribute('className', "action");
  newAction.addEventListener("drop", drop);
  newAction.addEventListener("dragover", allowDrop); 

  document.getElementById('action-area').appendChild(newAction); 
 }

我在IE11，Firefox和Chrome中试过这个，但没有一个应用CSS。也许值得一提的是我使用的是jQuery和Bootstrap 3.我花了将近3天的时间尝试不同的东西而且没有任何效果。如果可能，我不想使用任何图书馆。

编辑：我添加了一个链接，看看发生了什么，随时修改它。

Link

Answer 1

这是一个有效的plunkr

使用

添加了classname

elm.className = "action"

如此answer

中所述

Answer 2

摆脱setAttribute上的className：

function addAction() {
    var newAction = document.createElement("span");
    newAction.setAttribute('class', "action");
    newAction.addEventListener("drop", drop);
    newAction.addEventListener("dragover", allowDrop); 

    document.getElementById('action-area').appendChild(newAction); 
}

这会添加一个属性className，这不是您想要的。

Answer 3

<强>的Javascript

function addClass(element, value) {
    // Regex terms
    var rclass = /[\t\r\n\f]/g,
        rnotwhite = (/\S+/g);
    var classes,cur,curClass,finalValue,
        proceed = typeof value === "string" && value;

    if (!proceed) return element;
    classes = (value || "").match(rnotwhite) || [];
    cur = element.nodeType === 1
        && (element.className
                ? (" " + element.className + " ").replace(rclass, " ")
                : " "
        );
    if (!cur) return element;
    var j = 0;
    while ((curClass = classes[j++])) {
        if (cur.indexOf(" " + curClass + " ") < 0) {
            cur += curClass + " ";
        }
    }
    // only assign if different to avoid unneeded rendering.
    finalValue = cur.trim();
    if (element.className !== finalValue) {
        element.className = finalValue;
    }
    return element;
};

function drop() {
    //do
}

function dragover() {
    //do
}

function addAction() {
  var newAction = document.createElement("span");
  addClass(newAction,"action");
  newAction.addEventListener("drop", drop);
  newAction.addEventListener("dragover", dragover);   
  document.getElementById('action-area').appendChild(newAction); 
}
addAction();

Vanilla Javascript - 将Class-name添加到元素中

3 个答案:

DEMO