当前位置： 文江博客 话题详情

如何向给定元素添加类？

发布于 2024-07-13 06:56:13 字数 265 浏览 8 评论 0 原文

我有一个已经有类的元素：

<div class="someclass">
    <img ... id="image1" name="image1" />
</div>

现在，我想创建一个 JavaScript 函数，它将向 div 添加一个类（不是替换，而是添加）。

我怎样才能做到这一点？

原文

I have an element that already has a class:

<div class="someclass">
    <img ... id="image1" name="image1" />
</div>

Now, I want to create a JavaScript function that will add a class to the div (not replace, but add).

How can I do that?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（28）

〃安静 2024-07-20 06:56:13

如果您仅针对现代浏览器：

使用 element.classList.add 添加一个类：

element.classList.add("my-class");

和 element.classList.remove 删除类：

element.classList.remove("my-class");

如果您需要支持 Internet Explorer 9 或更低版本：

将空格加上新类的名称添加到元素的 className 属性中。 首先，在元素上放置一个id，以便您可以轻松获取引用。

<div id="div1" class="someclass">
    <img ... id="image1" name="image1" />
</div>

然后

var d = document.getElementById("div1");
d.className += " otherclass";

注意 otherclass 之前的空格。 包含该空间很重要，否则会影响类列表中位于其之前的现有类。

另请参阅MDN 上的element.className。

If you're only targeting modern browsers:

Use element.classList.add to add a class:

element.classList.add("my-class");

And element.classList.remove to remove a class:

element.classList.remove("my-class");

If you need to support Internet Explorer 9 or lower:

Add a space plus the name of your new class to the className property of the element. First, put an id on the element so you can easily get a reference.

<div id="div1" class="someclass">
    <img ... id="image1" name="image1" />
</div>

Then 

var d = document.getElementById("div1");
d.className += " otherclass";

Note the space before otherclass. It's important to include the space otherwise it compromises existing classes that come before it in the class list.

See also element.className on MDN.

回复 原文
我不是你的备胎 2024-07-20 06:56:13

在没有任何框架的情况下执行此操作的最简单方法是使用 element.classList.add 方法。

var element = document.getElementById("div1");
element.classList.add("otherclass");

编辑：
如果您想从元素中删除类 -

element.classList.remove("otherclass");

我不想自己添加任何空白和重复条目处理（这是使用 document.className 方法时必需的）。 有一些浏览器限制，但您可以使用polyfills。

The easiest way to do this without any framework is to use element.classList.add method.

var element = document.getElementById("div1");
element.classList.add("otherclass");

Edit:
And if you want to remove class from an element - 

element.classList.remove("otherclass");

I prefer not having to add any empty space and duplicate entry handling myself (which is required when using the document.className approach). There are some browser limitations, but you can work around them using polyfills.

回复 原文
北方的韩爷 2024-07-20 06:56:13

按照您的意愿找到您的目标元素“d”，然后：

d.className += ' additionalClass'; //note the space

您可以以更聪明的方式包装它以检查预先存在性，并检查空间要求等。

find your target element "d" however you wish and then:

d.className += ' additionalClass'; //note the space

you can wrap that in cleverer ways to check pre-existence, and check for space requirements etc..

回复 原文
荒路情人 2024-07-20 06:56:13

添加类

  • 交叉兼容

    在以下示例中，我们将 classname 添加到 元素。 这是 IE-8 兼容的。

    var a = document.body; 
  a.classList ?   a.classList.add('classname') : a.className += 'classname';

    这是以下内容的简写..

    var a = document.body; 
  if (a.classList) { 
      a.classList.add('等待'); 
  } 别的 { 
      a.className += '等待'; 
  }

  • 性能

    如果您更关心性能而不是交叉兼容性，您可以将其缩短为以下内容，速度提高 4%。

    var z = document.body; 
  document.body.classList.add('等待');

  • 方便

    或者，您可以使用 jQuery，但结果性能会明显变慢。 根据 jsPerf 的数据，慢了 94%

    $('body').addClass('wait');

删除类

  • 性能

    如果您关心性能，有选择地使用 jQuery 是删除类的最佳方法

    var a = document.body, c = '类名'; 
  $(a).removeClass(c);

  • 没有 jQuery，速度会慢 32%

    var a = document.body, c = '类名'; 
  a.className = a.className.replace( c, '' ); 
  a.className = a.className + c;

参考

  1. jsPerf 测试用例：添加类
  2. jsPerf 测试用例：

使用原型删除类

Element("document.body").ClassNames.add("classname")
Element("document.body").ClassNames.remove("classname")
Element("document.body").ClassNames.set("classname")

使用 YUI

YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")

Add Class

  • Cross Compatible

    In the following example we add a classname to the <body> element. This is IE-8 compatible.

    var a = document.body;
a.classList ? a.classList.add('classname') : a.className += ' classname';

    This is shorthand for the following..

    var a = document.body;
if (a.classList) {
    a.classList.add('wait');
} else {
    a.className += ' wait';
}

  • Performance

    If your more concerned with performance over cross-compatibility you can shorten it to the following which is 4% faster.

    var z = document.body;
document.body.classList.add('wait');

  • Convenience

    Alternatively you could use jQuery but the resulting performance is significantly slower. 94% slower according to jsPerf

    $('body').addClass('wait');

Removing the class

  • Performance

    Using jQuery selectively is the best method for removing a class if your concerned with performance

    var a = document.body, c = ' classname';
$(a).removeClass(c);

  • Without jQuery it's 32% slower

    var a = document.body, c = ' classname';
a.className = a.className.replace( c, '' );
a.className = a.className + c;

References

  1. jsPerf Test Case: Adding a Class
  2. jsPerf Test Case: Removing a Class

Using Prototype

Element("document.body").ClassNames.add("classname")
Element("document.body").ClassNames.remove("classname")
Element("document.body").ClassNames.set("classname")

Using YUI

YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")
回复 原文
霊感 2024-07-20 06:56:13

使用 JavaScript 添加类的 2 种不同方法

JavaScript 提供了 2 种不同的方法来添加类HTML 元素：

  1. 使用 element.classList.add() 方法
  2. 使用 className 属性

使用这两种方法，您可以一次添加单个或多个类。

1. 使用 element.classList.add() 方法

var element = document.querySelector('.box');
// using add method
// adding single class
element.classList.add('color');

// adding multiple class
element.classList.add('border', 'shadow');
.box {
    width: 200px;
    height: 100px;
}
.color {
    background: skyblue;
}
.border {
    border: 2px solid black;
}
.shadow {
    box-shadow: 5px 5px 5px gray;
}
<div class="box">My Box</div>

2. 使用 element.className 属性

注意：始终使用 += 运算符，并在类名前添加空格使用 classList 方法添加类。

var element = document.querySelector('.box');
// using className Property
// adding single class
element.className += ' color';

// adding multiple class
// keep classes space separated
element.className += ' border shadow';
.box {
    width: 200px;
    height: 100px;
}
.color {
    background: skyblue;
}
.border {
    border: 2px solid black;
}
.shadow {
    box-shadow: 5px 5px 5px gray;
}
<div class="box">My Box</div>

2 different ways to add class using JavaScript

JavaScript provides 2 different ways by which you can add classes to HTML elements:

  1. Using element.classList.add() Method
  2. Using className property

Using both methods you can add single or multiple classes at once.

1. Using element.classList.add() Method

var element = document.querySelector('.box');
// using add method
// adding single class
element.classList.add('color');

// adding multiple class
element.classList.add('border', 'shadow');
.box {
    width: 200px;
    height: 100px;
}
.color {
    background: skyblue;
}
.border {
    border: 2px solid black;
}
.shadow {
    box-shadow: 5px 5px 5px gray;
}
<div class="box">My Box</div>

2. Using element.className Property

Note: Always use += operator and add a space before class name to add class with classList method.

var element = document.querySelector('.box');
// using className Property
// adding single class
element.className += ' color';

// adding multiple class
// keep classes space separated
element.className += ' border shadow';
.box {
    width: 200px;
    height: 100px;
}
.color {
    background: skyblue;
}
.border {
    border: 2px solid black;
}
.shadow {
    box-shadow: 5px 5px 5px gray;
}
<div class="box">My Box</div>

回复 原文
浅黛梨妆こ 2024-07-20 06:56:13

使用纯 JavaScript 将类添加到元素的另一种方法

添加类：

document.getElementById("div1").classList.add("classToBeAdded");

删除类：

document.getElementById("div1").classList.remove("classToBeRemoved");

Another approach to add the class to element using pure JavaScript

For adding class:

document.getElementById("div1").classList.add("classToBeAdded");

For removing class:

document.getElementById("div1").classList.remove("classToBeRemoved");
回复 原文
风筝有风，海豚有海 2024-07-20 06:56:13 
document.getElementById('some_id').className+='  someclassname'

或者：

document.getElementById('some_id').classList.add('someclassname')

当第二种方法不起作用时，第一种方法有助于添加类。
不要忘记在第一种方法中的 'someclassname' 前面保留一个空格。

要删除，您可以使用：

document.getElementById('some_id').classList.remove('someclassname')

document.getElementById('some_id').className+='  someclassname'

OR:

document.getElementById('some_id').classList.add('someclassname')

First approach helped in adding the class when second approach didn't work.
Don't forget to keep a space in front of the ' someclassname' in the first approach.

For removal you can use:

document.getElementById('some_id').classList.remove('someclassname')
回复 原文
谷夏 2024-07-20 06:56:13

当我所做的工作不需要使用库时，我使用这两个函数：

function addClass( classname, element ) {
    var cn = element.className;
    //test for existance
    if( cn.indexOf( classname ) != -1 ) {
        return;
    }
    //add a space if the element already has class
    if( cn != '' ) {
        classname = ' '+classname;
    }
    element.className = cn+classname;
}

function removeClass( classname, element ) {
    var cn = element.className;
    var rxp = new RegExp( "\\s?\\b"+classname+"\\b", "g" );
    cn = cn.replace( rxp, '' );
    element.className = cn;
}

When the work I'm doing doesn't warrant using a library, I use these two functions:

function addClass( classname, element ) {
    var cn = element.className;
    //test for existance
    if( cn.indexOf( classname ) != -1 ) {
        return;
    }
    //add a space if the element already has class
    if( cn != '' ) {
        classname = ' '+classname;
    }
    element.className = cn+classname;
}

function removeClass( classname, element ) {
    var cn = element.className;
    var rxp = new RegExp( "\\s?\\b"+classname+"\\b", "g" );
    cn = cn.replace( rxp, '' );
    element.className = cn;
}
回复 原文
冷默言语 2024-07-20 06:56:13

假设您所做的不仅仅是添加这一类（例如，您还有异步请求等等），我会推荐一个像 原型 或 jQuery。

这将使您需要做的几乎所有事情（包括这个）变得非常简单。

假设您的页面上现在有 jQuery，您可以使用这样的代码将类名添加到元素（在本例中为加载时）

$(document).ready( function() {
  $('#div1').addClass( 'some_other_class' );
} );

： jquery.com/" rel="noreferrer">jQuery API 浏览器 用于其他内容。

Assuming you're doing more than just adding this one class (eg, you've got asynchronous requests and so on going on as well), I'd recommend a library like Prototype or jQuery.

This will make just about everything you'll need to do (including this) very simple.

So let's say you've got jQuery on your page now, you could use code like this to add a class name to an element (on load, in this case):

$(document).ready( function() {
  $('#div1').addClass( 'some_other_class' );
} );

Check out the jQuery API browser for other stuff.

回复 原文
稚气少女 2024-07-20 06:56:13

您可以使用 classList.add 或 classList.remove 方法在元素中添加/删除类。

var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")

上面的代码将添加（而不是替换）一个类“anyclass”到 nameElem。
类似地，您可以使用 classList.remove() 方法来删​​除类。

nameElem.classList.remove("anyclss")

You can use the classList.add OR classList.remove method to add/remove a class from a element.

var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")

The above code will add(and NOT replace) a class "anyclass" to nameElem.
Similarly you can use classList.remove() method to remove a class.

nameElem.classList.remove("anyclss")
回复 原文
蒲公英的约定 2024-07-20 06:56:13

要向元素添加附加类：

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

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

要更改元素的所有类：

将所有现有类替换为一个类或者更多新类，设置className属性：（

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

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

To add an additional class to an element:

To add a class to an element, without removing/affecting existing values, append a space and the new classname, like so:

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

To change all classes for an element:

To replace all existing classes with one or more new classes, set the className attribute:

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

(You can use a space-delimited list to apply multiple classes.)

回复 原文
∞觅青森が 2024-07-20 06:56:13

这可能对 WordPress 开发人员等有帮助。

document.querySelector('[data-section="section-hb-button-1"] .ast-custom-button').classList.add('TryMyClass');

This might be helpful for WordPress developers etc.

document.querySelector('[data-section="section-hb-button-1"] .ast-custom-button').classList.add('TryMyClass');
回复 原文
纸短情长 2024-07-20 06:56:13

如果您不想使用 jQuery 并且希望支持旧版浏览器：

function addClass(elem, clazz) {
    if (!elemHasClass(elem, clazz)) {
        elem.className += " " + clazz;
    }
}

function elemHasClass(elem, clazz) {
    return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}

If you don't want to use jQuery and want to support older browsers:

function addClass(elem, clazz) {
    if (!elemHasClass(elem, clazz)) {
        elem.className += " " + clazz;
    }
}

function elemHasClass(elem, clazz) {
    return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}
回复 原文
遇到 2024-07-20 06:56:13

我也认为最快的方法是像 es5 中那样使用 Element.prototype.classList： document.querySelector(".my.super-class").classList.add('new-class')
但在 ie8 中没有 Element.prototype.classList 这样的东西，无论如何你可以用这个片段填充它（可以随意编辑和改进它）：

if(Element.prototype.classList === void 0){
	function DOMTokenList(classes, self){
		typeof classes == "string" && (classes = classes.split(' '))
		while(this.length){
			Array.prototype.pop.apply(this);
		}
		Array.prototype.push.apply(this, classes);
		this.__self__ = this.__self__ || self
	}

	DOMTokenList.prototype.item = function (index){
		return this[index];
	}

	DOMTokenList.prototype.contains = function (myClass){
		for(var i = this.length - 1; i >= 0 ; i--){
			if(this[i] === myClass){
				return true;
			}
		}
		return false
	}

	DOMTokenList.prototype.add = function (newClass){
		if(this.contains(newClass)){
			return;
		}
		this.__self__.className += (this.__self__.className?" ":"")+newClass;
		DOMTokenList.call(this, this.__self__.className)
	}

	DOMTokenList.prototype.remove = function (oldClass){
		if(!this.contains(newClass)){
			return;
		}
		this[this.indexOf(oldClass)] = undefined
		this.__self__.className = this.join(' ').replace(/  +/, ' ')
		DOMTokenList.call(this, this.__self__.className)
	}

	DOMTokenList.prototype.toggle = function (aClass){
		this[this.contains(aClass)? 'remove' : 'add'](aClass)
		return this.contains(aClass);
	}

	DOMTokenList.prototype.replace = function (oldClass, newClass){
		this.contains(oldClass) && this.remove(oldClass) && this.add(newClass)
	}

	Object.defineProperty(Element.prototype, 'classList', {
		get: function() {
			return new DOMTokenList( this.className, this );
		},
		enumerable: false
	})
}

I too think that the fastest way is to use Element.prototype.classList as in es5: document.querySelector(".my.super-class").classList.add('new-class')
but in ie8 there is no such thing as Element.prototype.classList, anyway you can polyfill it with this snippet (fell free to edit and improve it):

if(Element.prototype.classList === void 0){
	function DOMTokenList(classes, self){
		typeof classes == "string" && (classes = classes.split(' '))
		while(this.length){
			Array.prototype.pop.apply(this);
		}
		Array.prototype.push.apply(this, classes);
		this.__self__ = this.__self__ || self
	}

	DOMTokenList.prototype.item = function (index){
		return this[index];
	}

	DOMTokenList.prototype.contains = function (myClass){
		for(var i = this.length - 1; i >= 0 ; i--){
			if(this[i] === myClass){
				return true;
			}
		}
		return false
	}

	DOMTokenList.prototype.add = function (newClass){
		if(this.contains(newClass)){
			return;
		}
		this.__self__.className += (this.__self__.className?" ":"")+newClass;
		DOMTokenList.call(this, this.__self__.className)
	}

	DOMTokenList.prototype.remove = function (oldClass){
		if(!this.contains(newClass)){
			return;
		}
		this[this.indexOf(oldClass)] = undefined
		this.__self__.className = this.join(' ').replace(/  +/, ' ')
		DOMTokenList.call(this, this.__self__.className)
	}

	DOMTokenList.prototype.toggle = function (aClass){
		this[this.contains(aClass)? 'remove' : 'add'](aClass)
		return this.contains(aClass);
	}

	DOMTokenList.prototype.replace = function (oldClass, newClass){
		this.contains(oldClass) && this.remove(oldClass) && this.add(newClass)
	}

	Object.defineProperty(Element.prototype, 'classList', {
		get: function() {
			return new DOMTokenList( this.className, this );
		},
		enumerable: false
	})
}

回复 原文
意犹 2024-07-20 06:56:13

以简单的方式添加、删除或检查元素类：

var uclass = {
    exists: function(elem,className){var p = new RegExp('(^| )'+className+'( |$)');return (elem.className && elem.className.match(p));},
    add: function(elem,className){if(uclass.exists(elem,className)){return true;}elem.className += ' '+className;},
    remove: function(elem,className){var c = elem.className;var p = new RegExp('(^| )'+className+'( |$)');c = c.replace(p,' ').replace(/  /g,' ');elem.className = c;}
};

var elem = document.getElementById('someElem');
//Add a class, only if not exists yet.
uclass.add(elem,'someClass');
//Remove class
uclass.remove(elem,'someClass');

To add, remove or check element classes in a simple way:

var uclass = {
    exists: function(elem,className){var p = new RegExp('(^| )'+className+'( |$)');return (elem.className && elem.className.match(p));},
    add: function(elem,className){if(uclass.exists(elem,className)){return true;}elem.className += ' '+className;},
    remove: function(elem,className){var c = elem.className;var p = new RegExp('(^| )'+className+'( |$)');c = c.replace(p,' ').replace(/  /g,' ');elem.className = c;}
};

var elem = document.getElementById('someElem');
//Add a class, only if not exists yet.
uclass.add(elem,'someClass');
//Remove class
uclass.remove(elem,'someClass');
回复 原文
丢了幸福的猪 2024-07-20 06:56:13

您可以使用类似于 jQuery 的现代方法

如果您只需要更改一个元素，即 JS 在 DOM 中找到的第一个元素，您可以使用以下方法：

document.querySelector('.someclass').className += " red";
.red {
  color: red;
}
<div class="someclass">
  <p>This method will add class "red" only to first element in DOM</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

请记住在类名称之前留一个空格。

如果你有多个类想要添加新类，你可以像这样使用它

document.querySelectorAll('.someclass').forEach(function(element) {
  element.className += " red";
});
.red {
  color: red;
}
<div class="someclass">
  <p>This method will add class "red" to all elements in DOM that have "someclass" class.</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

You can use modern approach similar to jQuery

If you need to change only one element, first one that JS will find in DOM, you can use this: 

document.querySelector('.someclass').className += " red";
.red {
  color: red;
}
<div class="someclass">
  <p>This method will add class "red" only to first element in DOM</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

Keep in mind to leave one space before class name.

If you have multiple classes where you want to add new class, you can use it like this

document.querySelectorAll('.someclass').forEach(function(element) {
  element.className += " red";
});
.red {
  color: red;
}
<div class="someclass">
  <p>This method will add class "red" to all elements in DOM that have "someclass" class.</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

回复 原文
彼岸花ソ最美的依靠 2024-07-20 06:56:13

我知道 IE9 已正式关闭，我们可以使用 element.classList 来实现它，正如上面许多人所说的那样，但我只是尝试在上面的许多答案的帮助下了解它在没有 classList 的情况下如何工作我可以学习它。

下面的代码扩展了上面的许多答案，并通过避免添加重复的类来改进它们。

function addClass(element,className){
  var classArray = className.split(' ');
  classArray.forEach(function (className) {
    if(!hasClass(element,className)){
      element.className += " "+className;
    }
  });            
}
//this will add 5 only once
addClass(document.querySelector('#getbyid'),'3 4 5 5 5');

I know IE9 is shutdown officially and we can achieve it with element.classList as many told above but I just tried to learn how it works without classList with help of many answers above I could learn it.

Below code extends many answers above and improves them by avoiding adding duplicate classes.

function addClass(element,className){
  var classArray = className.split(' ');
  classArray.forEach(function (className) {
    if(!hasClass(element,className)){
      element.className += " "+className;
    }
  });            
}
//this will add 5 only once
addClass(document.querySelector('#getbyid'),'3 4 5 5 5');
回复 原文
玉环 2024-07-20 06:56:13

只是为了详细说明其他人所说的，多个 CSS 类组合在一个字符串中，并以空格分隔。 因此，如果您想对其进行硬编码，它看起来就像这样：

<div class="someClass otherClass yetAnotherClass">
      <img ... id="image1" name="image1" />
</div>

从那里您可以轻松导出添加新类所需的 javascript...只需将一个空格后跟新类附加到元素的 className 属性即可。 知道了这一点，您还可以编写一个函数来在以后需要时删除类。

Just to elaborate on what others have said, multiple CSS classes are combined in a single string, delimited by spaces. Thus, if you wanted to hard-code it, it would simply look like this:

<div class="someClass otherClass yetAnotherClass">
      <img ... id="image1" name="image1" />
</div>

From there you can easily derive the javascript necessary to add a new class... just append a space followed by the new class to the element's className property. Knowing this, you can also write a function to remove a class later should the need arise.

回复 原文
只涨不跌 2024-07-20 06:56:13

我认为最好使用纯 JavaScript，我们可以在浏览器的 DOM 上运行它。

这是使用它的功能方式。 我已经使用过 ES6，但您可以随意使用 ES5 和函数表达式或函数定义，只要适合您的 JavaScript StyleGuide 即可。

'use strict'

const oldAdd = (element, className) => {
  let classes = element.className.split(' ')
  if (classes.indexOf(className) < 0) {
    classes.push(className)
  }
  element.className = classes.join(' ')
}

const oldRemove = (element, className) => {
  let classes = element.className.split(' ')
  const idx = classes.indexOf(className)
  if (idx > -1) {
    classes.splice(idx, 1)
  }
  element.className = classes.join(' ')
}

const addClass = (element, className) => {
  if (element.classList) {
    element.classList.add(className)
  } else {
    oldAdd(element, className)
  }
}

const removeClass = (element, className) => {
  if (element.classList) {
    element.classList.remove(className)
  } else {
    oldRemove(element, className)
  }
}

I think it's better to use pure JavaScript, which we can run on the DOM of the Browser.

Here is the functional way to use it. I have used ES6 but feel free to use ES5 and function expression or function definition, whichever suits your JavaScript StyleGuide.

'use strict'

const oldAdd = (element, className) => {
  let classes = element.className.split(' ')
  if (classes.indexOf(className) < 0) {
    classes.push(className)
  }
  element.className = classes.join(' ')
}

const oldRemove = (element, className) => {
  let classes = element.className.split(' ')
  const idx = classes.indexOf(className)
  if (idx > -1) {
    classes.splice(idx, 1)
  }
  element.className = classes.join(' ')
}

const addClass = (element, className) => {
  if (element.classList) {
    element.classList.add(className)
  } else {
    oldAdd(element, className)
  }
}

const removeClass = (element, className) => {
  if (element.classList) {
    element.classList.remove(className)
  } else {
    oldRemove(element, className)
  }
}

回复 原文
澜川若宁 2024-07-20 06:56:13

纯JS示例。 在第一个示例中，我们获取元素的 id 并添加例如 2 个类。

document.addEventListener('DOMContentLoaded', function() {
    document.getElementsById('tabGroup').className = "anyClass1 anyClass2";
})

在第二个示例中，我们获取元素的类名并添加 1。

document.addEventListener('DOMContentLoaded', function() {
    document.getElementsByClassName('tabGroup')[0].className = "tabGroup ready";
})

Sample with pure JS. In first example we get our element's id and add e.g. 2 classes.

document.addEventListener('DOMContentLoaded', function() {
    document.getElementsById('tabGroup').className = "anyClass1 anyClass2";
})

In second example we get element's class name and add 1 more. 

document.addEventListener('DOMContentLoaded', function() {
    document.getElementsByClassName('tabGroup')[0].className = "tabGroup ready";
})
回复 原文
人海汹涌 2024-07-20 06:56:13

对于那些使用 Lodash 并想要更新 className 字符串的用户：

// get element reference
var elem = document.getElementById('myElement');

// add some classes. Eg. 'nav' and 'nav header'
elem.className = _.chain(elem.className).split(/[\s]+/).union(['nav','navHeader']).join(' ').value()

// remove the added classes
elem.className = _.chain(elem.className).split(/[\s]+/).difference(['nav','navHeader']).join(' ').value()

For those using Lodash and wanting to update className string:

// get element reference
var elem = document.getElementById('myElement');

// add some classes. Eg. 'nav' and 'nav header'
elem.className = _.chain(elem.className).split(/[\s]+/).union(['nav','navHeader']).join(' ').value()

// remove the added classes
elem.className = _.chain(elem.className).split(/[\s]+/).difference(['nav','navHeader']).join(' ').value()
回复 原文
逆蝶 2024-07-20 06:56:13

大多数人在 getElementById 上使用 .classList.add，但我想在 getElementByClassName 上使用它。 为此，我使用了这样的 forEach ：

document.getElementsByClassName("class-name").forEach(element => element.classList.add("new-class") ));

但它不起作用，因为我发现 getElementsByClassName 返回 HTML 集合而不是数组。 为了处理这个问题，我使用以下代码将其转换为数组：

[...document.getElementsByClassName("class-name")].forEach(element => element.classList.add("new-class") ）；

The majority of people use a .classList.add on a getElementById, but I i wanted to use it on a getElementByClassName. To do that, i was using a forEach like this :

document.getElementsByClassName("class-name").forEach(element => element.classList.add("new-class"));

But it didn't work because i discovered that getElementsByClassName returns a HTML collection and not an array. To handle that I converted it to an array with this code :

[...document.getElementsByClassName("class-name")].forEach(element => element.classList.add("new-class"));

回复 原文
故人的歌 2024-07-20 06:56:13

最短

image1.parentNode.className+=' box';


image1.parentNode.className+=' box';
.box { width: 100px; height:100px; background: red; }
<div class="someclass">
    <img ... id="image1" name="image1" />
</div>

Shortest

image1.parentNode.className+=' box';


image1.parentNode.className+=' box';
.box { width: 100px; height:100px; background: red; }
<div class="someclass">
    <img ... id="image1" name="image1" />
</div>

回复 原文
风向决定发型 2024-07-20 06:56:13

您可以使用 API querySelector 选择元素，然后使用该元素和新类名作为参数创建一个函数。 对于现代浏览器使用 classlist，否则对于 IE8。 然后您可以在事件发生后调用该函数。

 //select the dom element
 var addClassVar = document.querySelector('.someclass');

 //define the addclass function
 var addClass = function(el,className){
   if (el.classList){
     el.classList.add(className);
   }
   else {
     el.className += ' ' + className;
  }
};

//call the function
addClass(addClassVar, 'newClass');

You can use the API querySelector to select your element and then create a function with the element and the new classname as parameters. Using classlist for modern browsers, else for IE8. Then you can call the function after an event. 

 //select the dom element
 var addClassVar = document.querySelector('.someclass');

 //define the addclass function
 var addClass = function(el,className){
   if (el.classList){
     el.classList.add(className);
   }
   else {
     el.className += ' ' + className;
  }
};

//call the function
addClass(addClassVar, 'newClass');
回复 原文
好多鱼好多余 2024-07-20 06:56:13

就我而言，我在 DOM 中有多个名为 main-wrapper 的类，但我只想影响父 main-wrapper。 使用 :first 选择器 (https://api.jquery.com/first -selector/)，我可以选择第一个匹配的 DOM 元素。 这就是我的解决方案：

$(document).ready( function() {
    $('.main-wrapper:first').addClass('homepage-redesign');
    $('#deals-index > div:eq(0) > div:eq(1)').addClass('doubleheaderredesign');
} );

我也对 DOM 中特定 div 的第二个子级做了同样的事情，正如您在我使用 $('#deals-index > div:eq( 的代码中看到的那样） 0) > div:eq(1)').addClass('doubleheaderredesign');.

注意：如您所见，我使用了 jQuery。

In my case, I had more than one class called main-wrapper in the DOM, but I only wanted to affect the parent main-wrapper. Using :first Selector (https://api.jquery.com/first-selector/), I could select the first matched DOM element. This was the solution for me:

$(document).ready( function() {
    $('.main-wrapper:first').addClass('homepage-redesign');
    $('#deals-index > div:eq(0) > div:eq(1)').addClass('doubleheaderredesign');
} );

I also did the same thing for the second children of a specific div in my DOM as you can see in the code where I used $('#deals-index > div:eq(0) > div:eq(1)').addClass('doubleheaderredesign');.

NOTE: I used jQuery as you can see.

回复 原文
全部不再 2024-07-20 06:56:13

首先，给div一个id。 然后，调用函数appendClass：

<script language="javascript">
  function appendClass(elementId, classToAppend){
    var oldClass = document.getElementById(elementId).getAttribute("class");
    if (oldClass.indexOf(classToAdd) == -1)
    {
      document.getElementById(elementId).setAttribute("class", classToAppend);
    }
}
</script>

first, give the div an id. Then, call function appendClass:

<script language="javascript">
  function appendClass(elementId, classToAppend){
    var oldClass = document.getElementById(elementId).getAttribute("class");
    if (oldClass.indexOf(classToAdd) == -1)
    {
      document.getElementById(elementId).setAttribute("class", classToAppend);
    }
}
</script>
回复 原文
夜还是长夜 2024-07-20 06:56:13

这个js代码对我有用

提供类名替换

var DDCdiv = hEle.getElementBy.....

var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
    if (Ta[i] == 'visible'){
        Ta[i] = 'hidden';
        break;// quit for loop
    }
    else if (Ta[i] == 'hidden'){
        Ta[i] = 'visible';
    break;// quit for loop
    }
}
DDCdiv.setAttribute('class',Ta.join(' ') );  // Join array with space and set class name

添加仅使用

var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
Ta.push('New class name');
// Ta.push('Another class name');//etc...
DDCdiv.setAttribute('class',Ta.join(' ') );  // Join array with space and set class name

删除使用

var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array

for (var i=0; i< Ta.length;i++)
{
    if (Ta[i] == 'visible'){
        Ta.splice( i, 1 );
        break;// quit for loop
    }
}
DDCdiv.setAttribute('class',Ta.join(' ') );  // Join array with space and set class name

希望这对某人有帮助

This js code works for me

provides classname replacement

var DDCdiv = hEle.getElementBy.....

var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
    if (Ta[i] == 'visible'){
        Ta[i] = 'hidden';
        break;// quit for loop
    }
    else if (Ta[i] == 'hidden'){
        Ta[i] = 'visible';
    break;// quit for loop
    }
}
DDCdiv.setAttribute('class',Ta.join(' ') );  // Join array with space and set class name

To add just use

var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
Ta.push('New class name');
// Ta.push('Another class name');//etc...
DDCdiv.setAttribute('class',Ta.join(' ') );  // Join array with space and set class name

To remove use

var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array

for (var i=0; i< Ta.length;i++)
{
    if (Ta[i] == 'visible'){
        Ta.splice( i, 1 );
        break;// quit for loop
    }
}
DDCdiv.setAttribute('class',Ta.join(' ') );  // Join array with space and set class name

Hope this is helpful to sombody

回复 原文
╰沐子 2024-07-20 06:56:13

在 YUI 中，如果包含 yuidom，则可以使用


YAHOO.util.Dom.addClass('div1','className');

HTH

In YUI, if you include yuidom, you can use


YAHOO.util.Dom.addClass('div1','className');

HTH

回复 原文
~没有更多了~

关于作者

草莓酥

暂无简介

0 文章
0 评论
21 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

lioqio

文章 0 评论 0

Single

文章 0 评论 0

禾厶谷欠

文章 0 评论 0

alipaysp_2zg8elfGgC

文章 0 评论 0

qq_N6d4X7

文章 0 评论 0

放低过去

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文