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");

Fiddle

About addClass()

About 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。

添加和减去其他类

4 个答案:

更新

更新2