blocks|key|4561218|text|要添加不带JQuery的类，只需将yourClassName附加到元素className|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4561219|document.documentElement.className+%2B=+"+yourClassName";|4561220|要删除类，可以使用replace()函数|4561221|document.documentElement.className.replace(/(?:%5E%7C\s)yourClassName(?!\S)/,'');|4561222|另外，正如@DavidThomas提到的，如果您想要将类名动态传递给replace函数，则需要使用new+RegExp()构造函数。|4561223|entityMap^0|H|D|Z|9|0|0|1J|0|9|9|0|0|25|0|1D|C|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|L|3|M|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|N|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|O|$]]

To add class without JQuery just append <code>yourClassName</code> to your element <code>className</code>

<code>document.documentElement.className += " yourClassName";</code>

To remove class you can use <code>replace()</code> function

<code>document.documentElement.className.replace(/(?:^|\s)yourClassName(?!\S)/,'');</code>

Also as @DavidThomas mentioned you'd need to use the <code>new RegExp()</code> constructor if you want to pass class names dynamically to the replace function.

blocks|key|54606|text|从IE10开始可以使用classList，如果可以的话，可以使用它。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|54607|element.classList.add("something");
element.classList.remove("some-class");|code-block|syntax|javascript|54608|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Element.classList^0|B|9|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element.classList" rel="noreferrer">classList</a> is available from IE10 onwards, use that if you can.

<pre><code>element.classList.add("something");
element.classList.remove("some-class");
</code></pre>

blocks|key|4561248|text|为了将来的友好性，我推荐使用polyfill/shim作为classList的第二个建议：https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#wrapper|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4561249|var+elem+=+document.getElementById(+'some-id'+);
elem.classList.add('some-class');+//+Add+class
elem.classList.remove('some-other-class');+//+Remove+class
elem.classList.toggle('some-other-class');+//+Add+or+remove+class
if+(+elem.classList.contains('some-third-class')+)+{+//+Check+for+class
++++console.log('yep!');
}|code-block|syntax|javascript|4561250|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#wrapper^0|19|22|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

For future friendliness, I second the recommendation for classList with polyfill/shim: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#wrapper" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#wrapper</a>

<pre><code>var elem = document.getElementById( 'some-id' );
elem.classList.add('some-class'); // Add class
elem.classList.remove('some-other-class'); // Remove class
elem.classList.toggle('some-other-class'); // Add or remove class
if ( elem.classList.contains('some-third-class') ) { // Check for class
 console.log('yep!');
}
</code></pre>

blocks|key|4561276|text|以下3个函数适用于不支持classList的浏览器|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4561277|function+hasClass(el,+className)
{
++++if+(el.classList)
++++++++return+el.classList.contains(className);
++++return+!!el.className.match(new+RegExp('(\\s%7C%5E)'+%2B+className+%2B+'(\\s%7C$)'));
}

function+addClass(el,+className)
{
++++if+(el.classList)
++++++++el.classList.add(className)
++++else+if+(!hasClass(el,+className))
++++++++el.className+%2B=+"+"+%2B+className;
}

function+removeClass(el,+className)
{
++++if+(el.classList)
++++++++el.classList.remove(className)
++++else+if+(hasClass(el,+className))
++++{
++++++++var+reg+=+new+RegExp('(\\s%7C%5E)'+%2B+className+%2B+'(\\s%7C$)');
++++++++el.className+=+el.className.replace(reg,+'+');
++++}
}|code-block|syntax|javascript|4561278|https://jaketrent.com/post/addremove-classes-raw-javascript/|4561279|entityMap|0|LINK|mutability|MUTABLE|url^0|C|9|0|0|0|1O|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|W|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|X|8|@]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|M|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|L]]]]

The following 3 functions work in browsers which don't support <code>classList</code>:

<pre><code>function hasClass(el, className)
{
 if (el.classList)
 return el.classList.contains(className);
 return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
}

function addClass(el, className)
{
 if (el.classList)
 el.classList.add(className)
 else if (!hasClass(el, className))
 el.className += " " + className;
}

function removeClass(el, className)
{
 if (el.classList)
 el.classList.remove(className)
 else if (hasClass(el, className))
 {
 var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
 el.className = el.className.replace(reg, ' ');
 }
}
</code></pre>

<a href="https://jaketrent.com/post/addremove-classes-raw-javascript/" rel="noreferrer">https://jaketrent.com/post/addremove-classes-raw-javascript/</a>

blocks|key|4561294|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4561295|++const+element+=+document.querySelector('#elementId');
++if+(element.classList.contains("classToBeRemoved"))+{
++++element.classList.remove("classToBeRemoved");

++}|code-block|syntax|javascript|4561296|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this:

<pre><code> const element = document.querySelector('#elementId');
 if (element.classList.contains("classToBeRemoved")) {
 element.classList.remove("classToBeRemoved");

 }
</code></pre>

blocks|key|54710|text|更新的JS类方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|54711|add方法不会添加重复的类，而remove方法只删除字符串完全匹配的类。|offset|length|style|CODE|54712|const+addClass+=+(selector,+classList)+=>+{
++const+element+=+document.querySelector(selector);
++const+classes+=+classList.split('+')
++classes.forEach((item,+id)+=>+{
++++element.classList.add(item)
++})
}

const+removeClass+=+(selector,+classList)+=>+{
++const+element+=+document.querySelector(selector);
++const+classes+=+classList.split('+')
++classes.forEach((item,+id)+=>+{
++++element.classList.remove(item)
++})
}

addClass('button.submit',+'text-white+color-blue')+//+add+text-white+and+color-blue+classes
removeClass('#home+.paragraph',+'text-red+bold')+//+removes+text-red+and+bold+classes|code-block|syntax|javascript|54713|entityMap^0|0|0|3|F|6|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@$D|Q|E|R|F|G]|$D|S|E|T|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|U|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

<h1>Updated JS Class Method</h1>
The <code>add</code> methods do not add duplicate classes and the <code>remove</code> method only removes class with exact string match.
<pre><code>const addClass = (selector, classList) =&gt; {
 const element = document.querySelector(selector);
 const classes = classList.split(' ')
 classes.forEach((item, id) =&gt; {
 element.classList.add(item)
 })
}

const removeClass = (selector, classList) =&gt; {
 const element = document.querySelector(selector);
 const classes = classList.split(' ')
 classes.forEach((item, id) =&gt; {
 element.classList.remove(item)
 })
}

addClass('button.submit', 'text-white color-blue') // add text-white and color-blue classes
removeClass('#home .paragraph', 'text-red bold') // removes text-red and bold classes
</code></pre>

I'm looking for a fast and secure way to add and remove classes from an html element without jQuery. 
It also should be working in early IE (IE8 and up).

How to add and remove classes in Javascript without jQuery

jQuery

我正在寻找一种快速和安全的方式来添加和删除没有jQuery的html元素的类。它也应该在早期的IE (IE8和更高版本)中工作。

问如何在没有jQuery的情况下在Javascript中添加和删除类
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在没有jQuery的情况下在Javascript中添加和删除类EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在没有jQuery的情况下在Javascript中添加和删除类
EN