Javascript 加减附加类

我正在尝试使用java脚本添加和减去一个类，我也在使用多个类。这是我的代码

function enlargegreen() {

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

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

函数放大绿色（）{
document.getElementByClassName（'playlist-player'）。className+=“放大”；
document.getElementByClassName（'playlist-player'）。className-=“收缩”；
}

---

我正在尝试减去收缩部分并用放大替换它

您没有名为

playlist player

的类。您有一个名为

playlist player shrink green

的类，并且您的类名称不应包含空格。我认为您应该使用

getElementsByClassName

如果jQuery是一个选项，您可以简单地使用addClass（）和removeClass（）

然后看起来像：

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

我在示例中使用了addClass（）和removeClass（）进行了快速调整。两者都有一点：

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

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

以下是一些简单的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

。但是，在我看来，除了字母和数字之外，你应该只拥有

\uuu

或

-

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

更新2 正如ZZBOV正确指出的那样，存在一个与类名末尾不匹配的错误，现在应该纠正该错误。它现在还会在添加类之前进行检查，以确保以前不存在类。我还消除了案件不敏感

---

我想知道

name.replace（/（[^a-zA-Z0-9]）/gi，\\$1'）

可能导致什么问题，因为除了过多的转义之外，我不确定什么可能是问题——在合理的范围内——这些信息对于将来找到这个QA的人来说是有用的。

请参阅

classList

或使用类似jQuery的框架。在

getElementByClassName（）

返回的集合上没有

className

属性。您必须将额外的类分别应用于每个元素。如果使用字符串连接而不是

classList

，则必须使用空格作为每个类的分隔符。没有

getElementByClassName

方法，有一个

getElementsByClassName

，它返回元素的集合，类名中不能有空格我只是在复制他们写的内容。是的，意识到了这一点，然后我尝试了

document.getElementByClassName（'playlist-player-shrink green'）。className+=“playlist player green放大”；document.getElementByClassName（'playlist-player放大绿色'）。className-=“playlist-player缩小绿色”

全部不起作用这在小提琴中起作用，但当我在dreamweaver和chrome中使用它时就不起作用了：我在chrome中工作时制作了这把小提琴，让我看看是否能找到问题。您只需阅读这两个函数并添加jQuery 1.9就可以了。在标题中添加最新的jQuery，并将该函数包装在$（document）.ready（）中。你做了吗？点击我答案左侧你必须查看的复选标记，如果可能的话，也可以升级答案。谢谢。没有一个理智的人会使用jQuery来处理2或3行JScript代码。来吧，大家。停止这种疯狂。此外，jQuery减慢了整个网站的运行速度。“但是，你应该只拥有字母和数字以外的

或

-

”

$%^&*

将是一个有效的类，尽管它可能会导致其他库出现问题，而这些库也会犯与您相同的幼稚错误。@zzzzBov啊，所以我想在完全正确的答案之上陈述我的观点是评分的理由？我完全不同意。您应该只使用这些分隔符，而使用其他任何东西——不管规范可能会说什么——都是自找麻烦。如果你提到的其他角色在未来某个日期变得重要，会发生什么？成为一名优秀的网络开发者的一部分是知道应该避免什么，并形成自己的观点，而不是盲目地遵循规范。不过别担心，我会修改我的答案。我否决了你的帖子，因为你提供的代码是一个幼稚的实现，如果程序员选择使用它，它将弊大于利。规范定义了应该为其编写代码的边缘情况。这就是它被称为规范的原因。@zzzzBov在这种情况下，您现在不应该删除您的否决票吗？考虑到在您第一次发表评论后，我修改了代码以支持任何可能导致问题的额外字符。@zzzzBov啊，现在呢？

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