向已经有类的元素添加类

Add class to elements which already have a class

本文关键字：添加 元素      更新时间：2023-09-26

我有一组div，当一个按钮被点击时，我动态生成类，"砖"。这给了它们维度和top的起始位置: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();};

谢谢!

您可以通过以下方式为元素添加一个类:

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

这只是一个类名字符串，所以如果你要添加，不要忘记添加空格。

见https://developer.mozilla.org/en-US/docs/Web/API/Element.className

如果你想使用纯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/

相关文章：