Question

我在点击/ mousedown操作上有几个名为.tag的类我想要在所有clear:both项目上将clear:none更改为.tag。或者将班级.clearNone { clear:none; }添加到所有代码中。

到目前为止我没有运气的尝试：

function mouseDown(e) {
    window.addEventListener('mousemove', sizePanel, true);

    // Using ID works
    var tagsCol = document.getElementById("tags-col");
    tagsCol.classList.add("width100");

    // Using class does not
    var tag = document.getElementsByClassName("tag");
    tag.classList.add("clearNone");
};

CSS

.tag {
    overflow: hidden;
    float: left;
    position: relative;
    margin: 0 10px 10px 0;
    padding: 5px 10px;
    width: auto;
    cursor: pointer;
    clear: both;
    @include rounded(4px);
}

.clearNone  { clear: none; }

你将如何做到这一点？请注意，有数百个.tag的

Answer 1

不要那样做。

相反，将标记类名添加到共同的祖先元素，然后使用CSS规则：

.SomeClassName .tag {
    clear: both;
}

Answer 2

要直接解决问题，您需要循环返回的元素：

var tags = document.getElementsByClassName("tag");
for (var x = 0; x < tags.length; x++)
    tags[x].classList.add("clearNone");

但与Slaks' answer一样，有一种更好的方法可以实现这一目标。

Answer 3

您可以尝试以下代码（编辑感谢@Bergi）

var tags = document.getElementsByClassName("tag");
for(var i=0; i<tags.length; ++i){ 
  if(typeof tags[i] === "object" && "classList" in tags[i]){
    tags[i].classList.add("clearNone");
  }
}

纯JavaScript - 如何将类添加到类中？或者在课堂上改变风格

3 个答案: