javascript - 添加和减去额外的类

Question

我试图使用java脚本添加和减去一个类我也使用多个类这是我的代码

function enlargegreen() {

    document.getElementByClassName('playlist-player').className += "enlarge";
    document.getElementByClassName('playlist-player').className -= "shrink";

}
<div  class="playlist-player shrink green" onmousedown="enlargegreen()" ></div>

我试图减去收缩部分并用放大替换它

Answer 1

如果 jQuery 是一个选项，您可以简单地使用 addClass ( http://api.jquery.com/addClass/ ) 和 removeClass ( http://api.jquery.com/removeClass/ )

然后它看起来像：

$('.playlist-player').addClass('enlarge');
$('.playlist-player').removeClass('shrink');

Answer 2

$(".playlist-player").addClass("green test2").removeClass("playlist-player");

小提琴

关于 addClass()

关于 removeClass()

我做了一个快速的小提琴，我在我的例子中使用了 addClass() 和 removeClass()。关于两者的一点：

1 ) removeClass() ：从匹配元素集中的每个元素中删除单个类、多个类或所有类。

2 ) addClass() ：将指定的类添加到每个匹配元素集中。

Answer 3

这里有几个简单的js例程：

function addClass( element, name, remove ){
  if ( element.className ) {
    var re = new RegExp(
      '(^|\\s+)' + 
      name.replace(/([^a-zA-Z0-9])/gi, '\\$1') + 
      '(\\s+|$)',
      'g'
    );
    if ( remove ) {
      element.className = element.className.replace( re, '' );
    }
    else if ( !re.test( element.className ) ) {
      element.className += ' ' + name; 
    }
  }
  else if ( !remove ) {
    element.className = name;
  }
};

function removeClass( element, name ){
  return addClass( element, name, true );
};

上面没有检查任何可能破坏RegExp作为类名一部分的特殊字符. 但话又说回来，在我看来，你应该只真正拥有_或-超越字母和数字。

更新

我现在添加了一些保护，它应该转义任何非字母数字字符。

更新 2

正如 zzzzBov 正确指出的那样，存在与类名末尾不匹配的错误，现在应该更正。它现在还在添加类之前进行检查，以确保之前不存在该类。我还删除了不区分大小写。

我很想知道name.replace(/([^a-zA-Z0-9])/gi, '\\$1')可能会导致什么问题，因为除了过度转义之外，我不确定什么可能是问题——在合理的范围内——这些信息对将来找到这个 QA 的人有用。

Answer 4

你没有一个名为playlist-player. 你有一个名为的类playlist-player shrink green，你的类名不应该有空格。我认为你应该使用getElementsByClassName.