使用JavaScript更改元素的类

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

Answer 1

用于改变类的现代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中不起作用，不过有一点可以在IE8和IE9上增加对它的支持。 但是，越来越多的支持 。

简单的跨浏览器解决scheme

select元素的标准JavaScript方法是使用document.getElementById("Id") ，这是以下示例使用的 – 您当然可以通过其他方式获取元素，而在正确的情况下可以简单地使用this ，详细了解这个超出了答案的范围。

要更改元素的所有类：

要用一个或多个新类replace所有现有类，请设置className属性：

 document.getElementById("MyElement").className = "MyClass"; 

（您可以使用空格分隔的列表来应用多个类。）

为一个元素添加一个额外的类：

要添加一个类到一个元素，而不删除/影响现有的值，追加一个空格和新的类名，如下所示：

 document.getElementById("MyElement").className += " MyClass"; 

从元素中移除一个类：

要将单个类移除到某个元素，而不影响其他潜在的类，则需要一个简单的正则expression式replace：

 document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace ( /(?:^|\s)MyClass(?!\S)/g , '' ) /* Code wrapped for readability - above is all one statement */ 

这个正则expression式的解释如下：

 (?:^|\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 # (ie must be end of string or a space) 

g标志告诉replace重复根据需要，以防万一class级名称已被多次添加。

要检查一个类是否已经应用到一个元素：

上面用于移除类的正则expression式也可以用来检查某个特定的类是否存在：

 if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) ) 

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

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

实现这一目标的第一步是创build一个函数，并在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工作，或者任何可能具有不寻常的跨浏览器行为的东西，那么这是值得考虑的。

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

上面的例子使用jQuery （可能是最常用的JavaScript库）进行了重新编译（尽pipe还有其他值得研究的地方）。

（请注意$这里是jQuery对象。）

用jQuery改变类：

 $('#MyElement').addClass('MyClass'); $('#MyElement').removeClass('MyClass'); if ( $('#MyElement').hasClass('MyClass') ) 

另外，jQuery提供了一个快捷方式来添加一个类，如果它不适用，或者删除一个类：

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

用jQuery为一个点击事件分配一个函数：

 $('#MyElement').click(changeClass); 

或者，不需要ID：

 $(':button:contains(My Button)').click(changeClass); 

Answer 2

你也可以做：

的document.getElementById（ 'ID'）classList.add（ '类'）。
的document.getElementById（ 'ID'）classList.remove（ '类'）。

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

 。的document.getElementById（ '编号'）classList.toggle（ '类'）;

Answer 3

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

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

所以，例如，如果我想点击添加一些类的button，我可以使用这个：

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

Answer 4

你可以像这样使用node.className ：

 document.getElementById('foo').className = 'bar'; 

这应该在IE5.5和PPK的工作 。

Answer 5

哇，这里有这么多的矫枉过正的答案

 <div class="firstClass" onclick="this.className='secondClass'"> 

Answer 6

使用纯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); } } 

Answer 7

这对我有用：

 function setCSS(eleID) { var currTabElem = document.getElementById(eleID); currTabElem.setAttribute("class", "some_class_name"); currTabElem.setAttribute("className", "some_class_name"); } 

Answer 8

你也可以扩展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'); } 

这里是演示 。

Answer 9

只要添加来自另一个stream行框架（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) 

select元素的一个选项是使用goog.dom.query和CSS3select器：

 var myElement = goog.dom.query("#MyElement")[0]; 

Answer 10

以前的正则expression式中有一些小调和调整：

如果class级名单不止一次地拥有class级名称，您将需要在全球进行。 而且，您可能需要从class级列表的末尾去掉空格，并将多个空格转换为一个空格，以避免空格被占用。 如果使用类名的唯一代码使用下面的正则expression式并在添加名称之前删除名称，则这些事情都不应该成为问题。 但。 那么，谁知道谁可能会与class级名单下降。

这个正则expression式是不区分大小写的，这样在类名称中不用关心大小写的浏览器上使用代码之前，类名中的错误可能会出现。

 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, ' ') + "]"); 

Answer 11

在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 

Answer 12

我会使用jQuery和写这样的事情：

 jQuery(function($) { $("#some-element").click(function() { $(this).toggleClass("clicked"); }); }); 

这个代码添加了一个函数，当id some元素的一个元素被点击时被调用。 如果函数不是它的一部分，则该函数将附加到元素的类属性中，如果它存在，则将其删除。

是的，你需要在页面中添加一个对jQuery库的引用来使用这个代码，但是至less你可以放心，库中的大多数函数可以在几乎所有的现代浏览器上工作，并且可以节省你的时间你自己的代码也是这样做的。

谢谢

Answer 13

该线

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

应该：

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

Answer 14

这是我的版本，充分工作：

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

Answer 15

用IE6支持在香草JavaScript中更改元素的类

您可以尝试使用节点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> 

Answer 16

这里有一个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

也看到我的答案在这里dynamic地创build一个新的类

Answer 17

我在我的代码中使用下面的香草JavaScript函数。 他们使用正则expression式和indexOf但不需要在正则expression式中引用特殊字符。

 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 。

Answer 18

这可以做到。

HTML：

 <div class="red" id="text"> <a href="#" onclick="changeClass();">Fahad</a> </div> 

CSS：

 .red a{ color:red; } .black a{ color:black; } 

JavaScript的：

 function changeClass(){ document.getElementById("text").className = "black"; } 

小提琴 。

Answer 19

只是想我会把这个：

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

Answer 20

这是很好的，我发现有帮助。

 function classChangeFn() { document.getElementById("MyElement").className = ""; } window.onload = function(){ document.getElementById("MyElement").addEventListener( 'click' , classChangeFn ); } 

Answer 21

使用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> 

您可以从此链接下载工作代码。

Answer 22

经过漫长的search，我发现没有document.getElementById（）的最好的类pipe理解决scheme

 var els = [].slice.apply(document.getElementsByClassName("no-js")); for (var i = 0; i < els.length; i++) { els[i].className = els[i].className.replace(/ *\bno-js\b/g, "js"); } 

解决scheme的原始位置： https ： //stackoverflow.com/a/8708944/1589669

Answer 23

只要说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> 

Answer 24

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

我想做一些像下面的方法来我的JavaScript框架添加几个function，处理添加类，删除类，类似于jQuery，这是完全支持在IE9 +，也是我的代码写在ES6，所以你需要以确保您的浏览器支持它，或者您使用类似babel的东西，否则需要在您的代码中使用ES5语法，也是这样，我们通过IDfind元素，这意味着元素需要select一个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和class的类，确保你将它们作为string传递，你可以使用如下的util：

 classUtil.addClass('myId', 'myClass'); classUtil.removeClass('myId', 'myClass'); classUtil.hasClass('myId', 'myClass'); classUtil.toggleClass('myId', 'myClass'); 

Answer 25

如果你想删除一个类，你可以这样做：ELEMENT.classList.remove（“CLASS_NAME”）;

添加一个类：ELEMENT.classList.add（'CLASS_NAME'）;

Answer 26

这是简单的jQuery代码来做到这一点。

 $(".class1").click(function(argument) { $(".parentclass").removeClass("classtoremove"); setTimeout(function (argument) { $(".parentclass").addClass("classtoadd"); }, 100); }); 

这里，

• Class1是一个事件的侦听器。
• 父类是承载您想要更改的类的类
• Classtoremove是你有的老class。
• 要添加的类是要添加的新类。
• 100是类更改的超时延迟。

祝你好运。

Answer 27

像jQuery这样的库是最简单的：

 <input type="button" onClick="javascript:test_byid();" value="id='second'" /> <script> function test_byid() { $("#second").toggleClass("highlight"); } </script> 

Answer 28

没有冒犯性，但是更改class级的时间并不长，因为它迫使CSS解释器重新计算整个网页的视觉performance。

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

永远不要改变className！ – ）

但通常你只需要改变一个或两个属性，而且很容易实现：

 function highlight(elm){ elm.style.backgroundColor ="#345"; elm.style.color = "#fff"; }