Question

我有一组div，当我点击一个按钮“brick”时，我正在动态生成这些div。这给了它们尺寸和顶部的起始位置：0。我试图让它们使用带有第二个类赋值的css过渡动画到视图的底部，这给了它们一个底部位置：0;。无法弄清楚将第二个类添加到具有预先存在的类的元素的语法。在检查时，他们只显示原始类别“砖”。

HTML

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
 <div id="container">
  <div id="button" >Click Me</div>
 </div>
</body>
</html>

CSS

#container {
  width: 100%;
  height: 100vh;
  padding: 10vmax;
}

#button {
  position: fixed;
}

.brick {
  position: relative;
  top: 0;
  height: 10vmax;
  width: 20vmax;
  background: white;
  margin: 0;
  padding: 0;
  transition: all 1s;
}

.drop {
  transition: all 1s;
  bottom 0;
}

违规的JS：

var brickCount = function() { 
  var count = prompt("How many boxes you lookin' for?");  
  for(var i=0; i < count; i++) {
    var newBrick = document.createElement("div");
    newBrick.className="brick";
    document.querySelector("#container")
   .appendChild(newBrick);
  }
};

var getBricks = function(){
 document.getElementByClass("brick");
};

var changeColor = function(){
  getBricks.style.backgroundColor = 
 '#'+Math.floor(Math.random()*16777215).toString(16);
};

var addDrop = function() {
  getBricks.brick = "getBricks.brick" + " drop"; 
};

var multiple = function() {
  brickCount();
   getBricks();
   changeColor();
   addDrop();
};


document.getElementById("button").onclick = function() {multiple();};

谢谢！

Answer 1

如果您想使用纯javaScript classList

HTML：

<div id="testdiv" class="brick"></div>

JavaScript的：

document.getElementById("testdiv").classList.add("anotherclass");

alert(document.getElementById("testdiv").className);

http://jsfiddle.net/Dinizworld/PfWqy/1/

如果您想使用jQuery addClass

HTML：

<div id="testdiv" class="brick"></div>

jQuery的：

$(".brick").addClass("numbertwo");

alert($("#testdiv").prop("class"));

http://jsfiddle.net/Dinizworld/UN4gK/

Answer 2

您可以通过执行以下操作向元素添加类：

element.className = element.className + " drop";

这只是一串类名，所以如果您要追加，请不要忘记添加空格。

请参阅https://developer.mozilla.org/en-US/docs/Web/API/Element.className

将类添加到已有类的元素

2 个答案: