关于html：如何用JavaScript更改元素的类？

How to change an element's class with JavaScript?

如何使用JavaScript响应EDCOX1 0事件来更改一个HTML元素？

现代HTML5换课技术

现代浏览器增加了ClassList，它提供了一些方法，可以更容易地操作类而不需要库：

1
2
3
4
5
6
7

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添加对它的支持，可从本页获得。不过，它得到了越来越多的支持。

简单的跨浏览器解决方案

选择一个元素的标准javascript方法是使用document.getElementById("Id")，这就是下面的示例所使用的方法-当然，您可以用其他方法获得元素，并且在正确的情况下，可能只使用this-但是，详细介绍这一点超出了答案的范围。

要更改元素的所有类，请执行以下操作：

要用一个或多个新类替换所有现有类，请设置classname属性：

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

(可以使用空格分隔的列表应用多个类。)

要向元素添加附加类，请执行以下操作：

要在不删除/影响现有值的情况下向元素添加类，请附加一个空格和新的类名，如下所示：

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

要从元素中移除类，请执行以下操作：

要在不影响其他潜在类的情况下将单个类移除到元素，需要使用简单的regex替换：

1
2
3
4

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

此regex的解释如下：

1
2
3
4
5
6
7

(?:^|\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根据需要重复。

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

上面用于移除类的ReGEX也可以用作检查特定类是否存在：

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

< BR>

将这些操作分配给单击事件：

虽然可以直接在HTML事件属性(如EDCOX1(3)中)写入JavaScript，但这并不推荐行为。特别是在更大的应用程序中，通过将HTML标记与JavaScript交互逻辑分离来实现更可维护的代码。

实现这一点的第一步是创建一个函数，并在onclick属性中调用该函数，例如：

1
2
3
4
5
6
7

_{(不需要在脚本标记中包含此代码，这只是为了示例的简洁，并且将javascript包含在不同的文件中可能更合适。)}

第二步是将onclick事件移出HTML并移入JavaScript，例如使用addEventListener。

1
2
3
4
5
6
7
8
9
10
11

(请注意，window.onload部分是必需的，以便在HTML完成加载后执行该函数的内容-如果不这样做，调用javascript代码时可能不存在myElement，因此该行将失败。)

< BR>

JavaScript框架和库

上面的代码都是标准的javascript，但是通常的做法是使用框架或库来简化常见的任务，并从编写代码时可能不会想到的固定错误和边缘情况中获益。

虽然有些人认为添加一个大约50 kb的框架来简单地更改一个类是过分杀伤力的，但是如果您正在做大量的javascript工作，或者任何可能具有异常跨浏览器行为的事情，那么这是值得考虑的。

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

上面的例子已经使用jquery(可能是最常用的javascript库)在下面复制(尽管还有其他值得研究的库)。

(注意，这里是jquery对象。)

使用jquery更改类：

1
2
3
4
5

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

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

if ( $('#MyElement').hasClass('MyClass') )

此外，jquery还提供了一个快捷方式，用于在类不适用时添加该类，或者删除具有以下功能的类：

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

< BR>

使用jquery为Click事件分配函数：

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

或者，不需要ID：

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

< BR>

相关讨论

彼得回答得很好。一个问题…为什么使用jquery比使用javascript更好？jquery很好，但是如果这就是您所需要做的全部事情，那么包括整个jquery库(而不是几行javascript)有什么理由？
@mattstuehler 1)短语"更好的X"通常意味着"更好的X"。2)为了深入了解问题的核心，jquery的设计是为了帮助访问/操作DOM，而且如果您需要在整个地方完成这类工作，通常也需要这样做。
注意，在添加类名的情况下，您要添加的类名前面必须有空白。
如果添加一个类，上一个类会被删除，还是必须手动删除？
以前的课程将继续。如果您想这样做，就必须手动删除其他类。
这个解决方案的一个缺陷是：当您多次单击按钮时，它会多次将"myClass"类添加到元素中，而不是检查它是否已经存在。因此，您最终可能得到一个HTML类属性，它看起来像这样：class="button MyClass MyClass MyClass"。
我想解决这个问题的方法是：if ( ! document.getElementById("MyElement").className.match(/(?:^|\‌s)MyClass(?!\S)/) )或者jquery:if ( ! $j('#MyElement').hasClass('MyClass') )(尽管我怀疑addclass不会添加重复项？)
如果您试图删除一个类"MyClass"，并且您有一个类"Prefix MyClass"，则上面为删除类而给出的regex将在您的类名中留下"Prefix-"：o
哇，三年加183票直到现在还没人发现。感谢Jinglessura，我已经纠正了regex，这样它就不会错误地删除类名的部分。//我想这是一个很好的例子，说明了为什么框架(如jquery)值得使用——像这样的错误很快就会被捕获和修复，并且不需要更改正常代码。
我做了一些小的修改来改进答案-希望人们同意他们的改进？如果还有什么我错过的，请告诉我(或者自己编辑答案)。
@彼得布顿不确定你是否认为这是一个进步，但我喜欢：(' '+document.getElementById("MyElement").className+' ').replace( ' '+MyClass+' ' , '' )。
@paulp.r.o.您正在将周围的空格和regex折叠为一个空值，它将把周围的类名字符串(如果有的话)连接在一起。我认为elem.classname=elem.classname.replace("'+classname+''"，)是我们想要的。谢谢！
我使用类似的方法，但是使用G(通用)regex。原因正是上面@web_designer所描述的问题：如果用户单击多次，则最终会出现同一类的多个实例，必须删除所有实例才能删除该类。
导入一个完整的库来完成一个简单的任务，正是为什么互联网上会有如此多的开销。所以我不同意使用jquery是"更好"的解决方案。
我刚刚对这个答案做了实质性的补充——大部分都是一样的，但是如果有任何错误或需要进一步改进的地方，我会非常感谢您的反馈。
当用类名的变量创建regex时，我必须查找语法：var regExp = new RegExp('(?:^|\\s)' + classToAddOrRemove + '(?!\\S)', 'g');。
这里缺少的一个重要细节是框架和库之间的区别。jquery是一个库，而不是框架。为了安全起见，例如，一个框架就是AngularJS。
(您可以指定一个以空格分隔的元素列表。)您必须表示要分配的类的列表，而不是要选择的元素。
真正优秀的答案完全不能回答OP的问题：你如何改变现有课程的价值？
如果它不能回答OP的问题，为什么他们把它标记为解决方案？您的问题似乎是另一个问题(您可能想更改链接到类名的CSS属性/声明？不确定浏览器是否允许这样做)-为什么不在一个新的问题中澄清你在追求什么，这个问题正好解释了你想要/正在试图实现的目标？
关于"向元素添加一个额外的类"点(列表中的第二个)，我认为最好抓取当前的el.className，使用" class-to-add"进行字符串concat，最后在更新目标元素之前对字符串调用.trim()。也就是说，我不认为css真的关心\s，元素的单个类无论如何都由一个空格分隔的列表决定。
heh:var a=[];e.className=((a=e.className.split("")).splice(a.indexOf(oldClass),1,newClass)&&a).join("").trim();d:
你能重新安排一下吗？在我看来，浏览器支持的带有垫片的类列表应该在顶部。
如果smth也能做到这一点，删除类名：document.getElementById("MyElement").className -=" MyClass";会不会很酷？
所以答案很简单就是$(‘myElement’).ToggleClass(‘myClass’)；谢谢，它对我有用。
你好。我想知道你会怎么说使用单词边界而不是(？：s)在开头和(？s)靠近正则表达式的末尾。评论？document.getElementById("MyElement").className.replace( /\bMyClass\b/g , '' )。我似乎从来没有理由使用许多正则表达式捷径，但这似乎(好像)它也能起作用。虽然，对它认为是一个单词的字符有限制，但你永远不知道某人可能用什么来类名。
b与连字符相邻。
有比使用regexp移除类更快的方法，特别是如果要将其转换为polyfill。参见jspef.com/removeclass-methods
中的代码，用于从元素中删除类：并检查类是否已应用于元素：行的末尾缺少节;。有什么原因吗？如果在中有一个注释可以从元素中删除类，那也会很好：指示空格会发生什么。否则，这是一个很好的答案。
我希望(^start(\s+start)*\s*)|((?:\s+)start(?!\S+))从空白的单独列表中删除start这个词。
angular:angular.element(document.getElementByID("myElement")).remove&zwnj；&8203；class("class name")；angular.element(document.getElementByID("myElement").addcla&zwnj；&8203；ss("class name")。
嗨，这是个很好的答案。我希望在加载HTML时更改类，而不是单击按钮上的事件。请参考此问题：stackoverflow.com/questions/38028756/&hellip；
移除类的方法几乎要注意移除项后可能出现的额外空间。但结果可能会以领先的空间开始。如果添加.trim()，则移除类的方法将不包含任何额外的空格。
此外，您还可以安全地移除""。："在regex的开头，这样它会读到：new regexp？"(？)(^ ^ ^？)+ CordNe+？？"！""G"？
我为删除类名创建了一个广泛的替代测试。您的解决方案正在测试中。这里有测试
@zymotik您可能希望添加另一个单独的答案，而不是编辑其他人的答案。这是一个有用的片段，但应该是它自己的答案。
我使用github.com/toddmotto/apollo
@Poornasenanigamage——你的编辑说原因是"格式改进"，我想知道你怎么能认为这是"改进"？编辑之前很好，编辑之后也很好。您刚刚用您碰巧喜欢的另一种标准代码格式方法替换了原始作者首选的一种标准代码格式方法(至少是选定的)。你的编辑被批准对我来说是个谜，因为在我看来这是一个不恰当的编辑。一致认为这不是一个极其重要的问题。其他人，请让我知道如果我不在线。

你也可以这样做：

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

并切换类(如果存在则删除，否则添加该类)：

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

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12

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

1
2
3
4
5
6
7
8
9

现在可以肯定的是，最好使用jquery。

相关讨论

您可以这样使用node.className：

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

根据PPK，这应该在IE5.5和更高版本中有效。

相关讨论

哇，奇怪这里有这么多多余的答案…

相关讨论

使用纯javascript代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

相关讨论

这对我很有用：

1
2
3
4
5
6

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

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

相关讨论

同样，您可以扩展HTMLEngy对象，以便添加添加、删除、切换和检查类(GIST)的方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

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

然后像这样使用(点击将添加或删除类)：

1
2
3

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

这是演示。

相关讨论

只需从另一个流行的框架google closures添加信息，就可以看到它们的dom/classes类：

1
2
3
4
5

goog.dom.classes.add(element, var_args)

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

goog.dom.classes.remove(element, var_args)

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

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

前一个正则表达式上的几个小注释和调整：

如果类列表中的类名不止一次，您将希望全局执行该操作。而且，您可能希望从类列表的末尾删除空格，并将多个空格转换为一个空格，以避免出现空格。如果唯一使用类名的代码挖掘在添加前使用下面的regex并删除一个名称，那么这些事情都不应该是问题。但是。好吧，谁知道谁在吃班级名单呢。

这个regex不区分大小写，因此类名中的错误可能会在不关心类名大小写的浏览器上使用代码之前出现。

1
2
3
4
5
6
7
8
9
10
11
12
13

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

在ASP.NET中使用javascript更改元素的css类：

1
2
3
4
5
6
7
8

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

我将使用jquery编写如下内容：

1
2
3
4
5

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

此代码添加了一个函数，当单击某个元素的id元素时，将调用该函数。如果元素的class属性尚未包含，则该函数会将单击的内容追加到该属性，如果该属性已存在，则将其移除。

是的，您确实需要在页面中添加一个对jquery库的引用来使用此代码，但至少您可以确信库中的大多数函数在几乎所有现代浏览器上都能工作，并且这样做可以节省您实现自己的代码的时间。

谢谢

相关讨论

线

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

应该是：

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

相关讨论

下面是切换/添加/删除元素类的ToggleClass：

1
2
3
4
5
6
7
8

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

参见JSFIDLE

也可以在这里看到我动态创建新类的答案

这是我的版本，完全有效：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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
}

用途：

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

相关讨论

在支持IE6的普通JavaScript中更改元素类

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

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

我在代码中使用了下面的香草JavaScript函数。它们使用正则表达式和EDCOX1(0)，但不需要引用正则表达式中的特殊字符。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

你也可以在现代浏览器中使用元素。

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

1
2
3
4
5
6
7

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13

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

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

很多答案，很多好答案。

TL;DR :

1	document.getElementById('id').className = 'class'

或

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

就是这样。

而且，如果你真的想知道原因并自学，那么我建议你阅读彼得·布格顿的答案，它是完美的：
https://stackoverflow.com/a/19638/1804013

注意事项；
这可以通过(文档或事件)实现：

GetElementByID()。
GetElementsByClassName()。
查询选择器()
查询选择单元格()。

是的，有很多方法可以做到这一点。在ES6语法中，我们可以轻松实现。使用此代码切换添加和删除类。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const tabs=document.querySelectorAll('.menu li');

for(let tab of tabs){

tab.onclick=function(){

let activetab=document.querySelectorAll('li.active');

activetab[0].classList.remove('active')

tab.classList.add('active');
}

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

body {
padding:20px;
font-family:sans-serif;
}

ul {
margin:20px 0;
list-style:none;
}

li {
background:#dfdfdf;
padding:10px;
margin:6px 0;
cursor:pointer;
}

li.active {
background:#2794c7;
font-weight:bold;
color:#ffffff;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Please click an item:

<ul class="menu">
<li class="active"><span>Three</span>
</li>

<li>
<span>Two</span>
</li>

<li>
<span>One</span>
</li>

</ul>

EDOCX1·0的DOMAPI：

添加和移除类的一种非常方便的方式是EDOCX1×0的DOM API。这个API允许我们选择特定的DOM元素的所有类，以便使用JavaScript修改列表。例如：

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

我们可以在日志中观察到，我们返回的对象不仅包含元素的类，还包含许多辅助方法和属性。此对象继承自接口domTokenList，该接口在dom中用于表示一组空格分隔的标记(如类)。

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

button{
margin: 20px;
}

.foo{
color: red;
}

.newFoo {
color: blue;
}

.bar{
background-color:powderblue;
}

.newclass{
border: 2px solid green;
}

1
2
3
4
5
6
7
8
9
10
11
12

"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

<button onclick="addClass()">AddClass</button>

<button onclick="replaceClass()">ReplaceClass</button>

<button onclick="removeClass()">removeClass</button>

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

我想在我的javascript框架中添加一些类似jquery的功能，比如添加类、删除类等，这在IE9+中得到了完全支持，我的代码是用ES6编写的，所以你需要确保浏览器支持它，或者你使用类似babel的工具，否则需要使用ES5syn。在您的代码中纳税，也就是说，我们通过ID查找元素，这意味着元素需要有一个要选择的ID：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

}

您可以简单地调用use them，如下所示，假设您的元素的id为"id"，class为"class"，确保将它们作为字符串传递，您可以使用util，如下所示：

1
2
3
4

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

我只是想把这个扔进去：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

尝试

1	function change(el) { el.className='second' }

1 2	.first { width: 50px; height: 50px; background: blue } .second { width: 150px; height: 150px; background: red; transition: all 0.3s ease-in }

1	<button onclick="change(box)">Click me</button>

工作的javascript代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Add class from Javascript
Replace class from Javascript
Remove class from Javascript
<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 ="";
}

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

相关讨论

下面是简单的jquery代码。

1
2
3
4
5
6

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

在这里，

Class1是事件的侦听器。
父类是承载要更改的类的类
课堂记忆是你的旧课堂。
要添加的类是要添加的新类。
100是更改类的超时延迟。

祝你好运。

这对于类似jquery的库来说是最简单的：

1
2
3
4
5
6
7

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

function test_byid()
{
$("#second").toggleClass("highlight");
}

相关讨论

无意冒犯，但在强制CSS解释器重新计算整个网页的视觉呈现时，立即更改类是不明智的。

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

永远不要在飞行中更改类名！-)

但通常只需要更改一两个属性，这很容易实现：

1
2
3
4

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

相关讨论