如何使用JavaScript更改响应 onClick 事件的HTML元素类？

25 回答

68
您可以像这样使用 node.className ：
```
document.getElementById('foo').className = 'bar';
```
根据PPK，这应该适用于IE5.5及更高版本 .
回复于 2024-04-19T16:49:21+08:00

我在代码中使用以下vanilla JavaScript函数 . 它们使用正则表达式和 indexOf 但不要求在正则表达式中引用特殊字符 .

function addClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) < 0) {
        el.className = (c0 + c1).replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

function delClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) >= 0) {
        el.className = c0.replace(c1, " ").replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

您也可以在现代浏览器中使用element.classList .

回复于 2024-04-19T16:49:21+08:00

这对于像jQuery这样的库来说最简单：

<input type="button" onClick="javascript:test_byid();" value="id='second'" />

<script>
function test_byid()
{
    $("#second").toggleClass("highlight");
}
</script>

回复于 2024-04-19T16:49:21+08:00

104
我会使用jQuery并写下这样的东西：
```
jQuery(function($) {
    $("#some-element").click(function() {
        $(this).toggleClass("clicked");
    });
});
```
此代码添加了在单击id some-element 的元素时要调用的函数 . 该函数将 clicked 追加到元素's class attribute if it'已经不是它的一部分，如果它在那里则删除它 .

是的，您需要在页面中添加对jQuery库的引用才能使用此代码，但至少您可以放心，库中的大多数功能都可以在几乎所有现代浏览器上运行，并且可以节省您实施的时间你自己的代码做同样的事情 .

谢谢
回复于 2024-04-19T16:49:21+08:00

在ASP.NET中使用JavaScript更改元素的CSS类：

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        lbSave.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbSave.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
        lbCancel.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbCancel.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
    End If
End Sub

回复于 2024-04-19T16:49:21+08:00

classList DOM API：

添加和删除类的一种非常方便的方式是 classList DOM API . 此API允许我们选择特定DOM元素的所有类，以便使用javascript修改列表 . 例如：

const el = document.getElementById("main");
console.log(el.classList);

<div class="content wrapper animated" id="main"></div>

我们可以在日志中观察到我们不仅返回一个对象，而且还包含元素的类，还有许多辅助方法和属性 . 此对象继承自接口 DOMTokenList ，该接口在DOM中用于表示一组空格分隔的标记（如类） .

示例：

const el = document.getElementById('container');


function addClass () {
   el.classList.add('newclass');
}


function replaceClass () {
     el.classList.replace('foo', 'newFoo');
}


function removeClass () {
       el.classList.remove('bar');
}

button{
  margin: 20px;
}

.foo{
  color: red;
}

.newFoo {
  color: blue;
}

.bar{
  background-color:powderblue;
}

.newclass{
  border: 2px solid green;
}

<div class="foo bar" id="container">
  "Sed ut perspiciatis unde omnis 
  iste natus error sit voluptatem accusantium doloremque laudantium, 
  totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et 
  quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam 
  voluptatem quia voluptas 
 </div>
  
<button onclick="addClass()">AddClass</button>
  
<button onclick="replaceClass()">ReplaceClass</button>
  
<button onclick="removeClass()">removeClass</button>

回复于 2024-04-19T16:49:21+08:00

使用纯JavaScript代码：

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
    if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

function replaceClass(ele, oldClass, newClass){
    if(hasClass(ele, oldClass)){
        removeClass(ele, oldClass);
        addClass(ele, newClass);
    }
    return;
}

function toggleClass(ele, cls1, cls2){
    if(hasClass(ele, cls1)){
        replaceClass(ele, cls1, cls2);
    }else if(hasClass(ele, cls2)){
        replaceClass(ele, cls2, cls1);
    }else{
        addClass(ele, cls1);
    }
}

回复于 2024-04-19T16:49:21+08:00

15
没有冒犯，但是在动态改变类是不可能的，因为它迫使CSS解释器重新计算整个网页的视觉呈现 .

原因是CSS解释器几乎不可能知道是否可以更改任何继承或级联，所以简短的答案是：

永远不要动态更改className！ - ）

但通常你只需要改变一两个属性，这很容易实现：
```
function highlight(elm){
    elm.style.backgroundColor ="#345";
    elm.style.color = "#fff";
}
```
回复于 2024-04-19T16:49:21+08:00

你也可以这样做：

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

并切换一个类（如果存在则删除，否则添加它）：

document.getElementById('id').classList.toggle('class');

回复于 2024-04-19T16:49:21+08:00

-18
以前的正则表达式上的一些小注释和调整：

如果类列表具有多次类名，您将希望全局执行此操作 . 而且，您可能希望从类列表的末尾删除空格并将多个空格转换为一个空格以防止空格的运行 . 如果使用类名称的唯一代码使用下面的正则表达式并在添加之前删除名称，则这些都不应该成为问题 . 但 . 好吧，谁知道谁可能会在 class 名单上加油 .

此正则表达式不区分大小写，因此在不关心类名称中的大小写的浏览器上使用代码之前，类名中的错误可能会显示出来 .
```
var s = "testing   one   four  one  two";
var cls = "one";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "test";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "testing";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "tWo";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
```
回复于 2024-04-19T16:49:21+08:00

在我没有使用jQuery的一个旧项目中，我构建了以下函数来添加，删除和检查元素是否具有类：

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(ele, cls) {
    if (!hasClass(ele, cls)) ele.className += " " + cls;
}
function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

所以，例如，如果我想onclick添加一些类，我可以使用这个按钮：

<script type="text/javascript">
    function changeClass(btn, cls) {
        if(!hasClass(btn, cls)) {
            addClass(btn, cls);
        }
    }
</script>
...
<button onclick="changeClass(this, "someClass")">My Button</button>

到目前为止，肯定会更好地使用jQuery .

回复于 2024-04-19T16:49:21+08:00

我以为我会把它扔进去：

function inArray(val, ary){
  for(var i=0,l=ary.length; i<l; i++){
    if(ary[i] === val){
      return true;
    }
  }
  return false;
}
function removeClassName(classNameS, fromElement){
  var x = classNameS.split(/\s/), s = fromElement.className.split(/\s/), r = [];
  for(var i=0,l=s.length; i<l; i++){
    if(!iA(s[i], x))r.push(s[i]);
  }
  fromElement.className = r.join(' ');
}
function addClassName(classNameS, toElement){
  var s = toElement.className.split(/\s/);
  s.push(c); toElement.className = s.join(' ');
}

回复于 2024-04-19T16:49:21+08:00

43
只是添加来自其他流行框架Google Closures的信息，请参阅他们的dom/classes课程：
```
goog.dom.classes.add(element, var_args)

goog.dom.classes.addRemove(element, classesToRemove, classesToAdd)

goog.dom.classes.remove(element, var_args)
```
选择元素的一个选项是使用带有CSS3选择器的goog.dom.query：
```
var myElement = goog.dom.query("#MyElement")[0];
```
回复于 2024-04-19T16:49:21+08:00

这是我的版本，完全正常工作：

function addHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    obj.className += " " + classname
}

function removeHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    var classes = ""+obj.className
    while (classes.indexOf(classname)>-1) {
        classes = classes.replace (classname, "")
    }
    obj.className = classes
}

用法：

<tr onmouseover='addHTMLClass(this,"clsSelected")'
onmouseout='removeHTMLClass(this,"clsSelected")' >

回复于 2024-04-19T16:49:21+08:00

只要说 myElement.classList="new-class" 除非你需要维护其他现有的类，在这种情况下你可以使用 classList.add, .remove 方法 .

var doc = document;
var divOne = doc.getElementById("one");
var goButton = doc.getElementById("go");

goButton.addEventListener("click", function() {
  divOne.classList="blue";
});

div{
  min-height:48px;
  min-width:48px;
}
.bordered{
  border: 1px solid black;
}
.green{
  background:green;
}
.blue{
  background: blue;
}

<button id="go">Change Class</button>

<div id="one" class="bordered green">

</div>

回复于 2024-04-19T16:49:21+08:00

13
好吧，我认为在这种情况下你应该使用jQuery或在纯javascript中编写自己的方法，我的偏好是添加我自己的方法，而不是将所有jQuery注入我的应用程序，如果我不需要其他原因 .

我想做一些像下面的方法作为我的javascript框架的方法添加几个功能，处理添加类，删除类等类似于jQuery，这在IE9中完全支持，我的代码也是用ES6编写的，所以你需要为了确保你的浏览器支持它或你使用像babel这样的东西，否则需要在你的代码中使用ES5语法，也就是这样，我们通过ID找到元素，这意味着元素需要有一个ID来选择：
```
//simple javascript utils for class management in ES6
var classUtil = {

  addClass: (id, cl) => {
    document.getElementById(id).classList.add(cl);
  },

  removeClass: (id, cl) => {
    document.getElementById(id).classList.remove(cl);
  },

  hasClass: (id, cl) => {
    return document.getElementById(id).classList.contains(cl);
  },

  toggleClass: (id, cl) => {
    document.getElementById(id).classList.toggle(cl);
  }

}
```
并且您可以简单地调用如下所示使用它们，想象您的元素具有'id'的id和'class'的类，请确保将它们作为字符串传递，您可以使用如下的util：
```
classUtil.addClass('myId', 'myClass');
classUtil.removeClass('myId', 'myClass');
classUtil.hasClass('myId', 'myClass');
classUtil.toggleClass('myId', 'myClass');
```
回复于 2024-04-19T16:49:21+08:00

您也可以扩展HTMLElement对象，以便添加添加，删除，切换和检查类的方法（gist）：

HTMLElement = typeof(HTMLElement) != 'undefiend' ? HTMLElement : Element;

HTMLElement.prototype.addClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    if (string[i] && !new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)').test(this.className)) {
      this.className = this.className.trim() + ' ' + string[i];
    }
  }
}

HTMLElement.prototype.removeClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    this.className = this.className.replace(new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)'), ' ').trim();
  }
}

HTMLElement.prototype.toggleClass = function(string) {
  if (string) {
    if (new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className)) {
      this.className = this.className.replace(new RegExp('(\\s+|^)' + string + '(\\s+|$)'), ' ').trim();
    } else {
      this.className = this.className.trim() + ' ' + string;
    }
  }
}

HTMLElement.prototype.hasClass = function(string) {
  return string && new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className);
}

然后就这样使用（点击将添加或删除类）：

document.getElementById('yourElementId').onclick = function() {
  this.toggleClass('active');
}

这是demo .

回复于 2024-04-19T16:49:21+08:00

使用JavaScript代码：

<div id="div_add" class="div_add">Add class from Javascript</div>
<div id="div_replace" class="div_replace">Replace class from Javascript</div>
<div id="div_remove" class="div_remove">Remove class from Javascript</div>
<button onClick="div_add_class();">Add class from Javascript</button>
<button onClick="div_replace_class();">Replace class from Javascript</button>
<button onClick="div_remove_class();">Remove class from Javascript</button>
<script type="text/javascript">
    function div_add_class()
    {
        document.getElementById("div_add").className += " div_added";
    }
    function div_replace_class()
    {
        document.getElementById("div_replace").className = "div_replaced";
    }
    function div_remove_class()
    {
        document.getElementById("div_remove").className = "";
    }
</script>

您可以从this link下载工作代码 .

回复于 2024-04-19T16:49:21+08:00

这对我有用：

function setCSS(eleID) {
    var currTabElem = document.getElementById(eleID);

    currTabElem.setAttribute("class", "some_class_name");
    currTabElem.setAttribute("className", "some_class_name");
}

回复于 2024-04-19T16:49:21+08:00

-1

这条线

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','')

应该：

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');

回复于 2024-04-19T16:49:21+08:00

-3
这是一个简单的jQuery代码 .
```
$(".class1").click(function(argument) {
    $(".parentclass").removeClass("classtoremove");
    setTimeout(function (argument) {
        $(".parentclass").addClass("classtoadd");
    }, 100);
});
```
这里，
- Class1是事件的监听器 .
- 父类是承载要更改的类的类
- Classtoremove是你的老班 .
- 要添加的类是要添加的新类 .
- 100是更改类的超时延迟 .
祝好运 .
回复于 2024-04-19T16:49:21+08:00

-55

这是一个toggleClass来切换/添加/删除元素上的类：

// If newState is provided add/remove theClass accordingly, otherwise toggle theClass
function toggleClass(elem, theClass, newState) {
    var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g');
    var add=(arguments.length>2 ? newState : (elem.className.match(matchRegExp) == null));

    elem.className=elem.className.replace(matchRegExp, ''); // clear all
    if (add) elem.className += ' ' + theClass;
}

见jsfiddle

还可以看到我的答案here用于动态创建新类

回复于 2024-04-19T16:49:21+08:00

391
现代HTML5用于更改类的技术

现代浏览器添加了classList，它提供了一些方法，可以在不需要库的情况下更轻松地操作类：
```
document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

if ( document.getElementById("MyElement").classList.contains('MyClass') )

document.getElementById("MyElement").classList.toggle('MyClass');
```
不幸的是，这些在v10之前的Internet Explorer中不起作用，尽管有一个shim可以添加对IE8和IE9的支持，可以从this page获得 . 但是，它变得越来越多supported .

简单的跨浏览器解决方案

选择元素的标准JavaScript方法是使用document.getElementById("Id")，这是以下示例所使用的 - 您当然可以通过其他方式获取元素，并且在正确的情况下可以简单地使用 this - 但是，详细说明这一点超出了答案的范围 .

要更改元素的所有类：

要使用一个或多个新类替换所有现有类，请设置className属性：
```
document.getElementById("MyElement").className = "MyClass";
```
（您可以使用以空格分隔的列表来应用多个类 . ）

要向元素添加其他类：

要向元素添加类，而不删除/影响现有值，请附加空格和新类名，如下所示：
```
document.getElementById("MyElement").className += " MyClass";
```
要从元素中删除类：

要在不影响其他潜在类的情况下将单个类移除到元素，需要使用简单的正则表达式替换：
```
document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */
```
这个正则表达式的解释如下：
```
(?:^|\s) # Match the start of the string, or any single whitespace character

MyClass  # The literal text for the classname to remove

(?!\S)   # Negative lookahead to verify the above is the whole classname
         # Ensures there is no non-space character following
         # (i.e. must be end of string or a space)
```
如果已多次添加类名，则 g 标志会指示replace按要求重复 .

要检查某个类是否已应用于某个元素：

上面用于删除类的相同正则表达式也可用于检查特定类是否存在：
```
if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )
```
将这些操作分配给onclick事件：

虽然可以直接在HTML事件属性（例如 onclick="this.className+=' MyClass'" ）中编写JavaScript，但这不是推荐的行为 . 特别是在较大的应用程序上，通过将HTML标记与JavaScript交互逻辑分离，可以实现更易维护的代码 .

实现这一目标的第一步是创建一个函数，并在onclick属性中调用该函数，例如：
```
<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }
</script>
...
<button onclick="changeClass()">My Button</button>
```
（不需要在脚本标记中包含此代码，这仅仅是为了简洁示例，并且在不同的文件中包含JavaScript可能更合适 . ）

第二步是将onclick事件从HTML中移出并转换为JavaScript，例如使用addEventListener
```
<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }

    window.onload = function(){
        document.getElementById("MyElement").addEventListener( 'click', changeClass);
    }
</script>
...
<button id="MyElement">My Button</button>
```
（请注意，window.onload部分是必需的，以便在HTML加载完成后执行该函数的内容 - 如果没有这个，调用JavaScript代码时MyElement可能不存在，因此该行将失败 . ）

JavaScript框架和库

上面的代码都是标准的JavaScript，但通常的做法是使用框架或库来简化常见任务，以及从编写代码时可能没有想到的修复错误和边缘情况中获益 .

虽然有些人认为添加一个~50 KB的框架来简单地改变一个类是不合适的，如果你正在做大量的JavaScript工作，或者任何可能有不寻常的跨浏览器行为的东西，那么值得考虑 .

（非常粗略地说，库是为特定任务设计的一组工具，而框架通常包含多个库并执行一整套职责 . ）

上面的示例已经使用jQuery重现，可能是最常用的JavaScript库（尽管还有其他值得研究） .

（注意 $ 这里是jQuery对象 . ）

使用jQuery更改类：
```
$('#MyElement').addClass('MyClass');

$('#MyElement').removeClass('MyClass');

if ( $('#MyElement').hasClass('MyClass') )
```
此外，如果不适用，jQuery提供了添加类的快捷方式，或者删除了一个类：
```
$('#MyElement').toggleClass('MyClass');
```
使用jQuery为click事件分配函数：
```
$('#MyElement').click(changeClass);
```
或者，不需要id：
```
$(':button:contains(My Button)').click(changeClass);
```
回复于 2024-04-19T16:49:21+08:00

3432

使用IE6支持更改vanilla JavaScript中的元素类

您可以尝试使用node attributes 属性来保持与旧浏览器的兼容性，即使是IE6：

function getClassNode(element) {
  for (var i = element.attributes.length; i--;)
    if (element.attributes[i].nodeName === 'class')
      return element.attributes[i];
}

function removeClass(classNode, className) {
  var index, classList = classNode.value.split(' ');
  if ((index = classList.indexOf(className)) > -1) {
    classList.splice(index, 1);
    classNode.value = classList.join(' ');
  }
}

function hasClass(classNode, className) {
  return classNode.value.indexOf(className) > -1;
}

function addClass(classNode, className) {
  if (!hasClass(classNode, className))
    classNode.value += ' ' + className;
}

document.getElementById('message').addEventListener('click', function() {
  var classNode = getClassNode(this);
  var className = hasClass(classNode, 'red') && 'blue' || 'red';

  removeClass(classNode, 'red');
  removeClass(classNode, 'blue');

  addClass(classNode, className);
})

.red {
  color: red;
}
.red:before {
  content: 'I am red! ';
}
.red:after {
  content: ' again';
}
.blue {
  color: blue;
}
.blue:before {
  content: 'I am blue! '
}

<span id="message" class="">Click me</span>

回复于 2024-04-19T16:49:21+08:00

5
哇，惊讶的是有这么多这里的矫枉过正的答案......
```
<div class="firstClass" onclick="this.className='secondClass'">
```
回复于 2024-04-19T16:49:21+08:00

使用JavaScript更改元素的类

25 回答

classList DOM API：

示例：

现代HTML5用于更改类的技术

简单的跨浏览器解决方案

要更改元素的所有类：

要向元素添加其他类：

要从元素中删除类：

要检查某个类是否已应用于某个元素：

将这些操作分配给onclick事件：

JavaScript框架和库

使用jQuery更改类：

使用jQuery为click事件分配函数：

使用IE6支持更改vanilla JavaScript中的元素类

相关问题