如何将类添加到给定的元素？-白红宇

如何将类添加到给定的元素？

阅读量：3576 次

发布时间：2019-05-20

本文共 9910 字，大约阅读时间需要 33 分钟。

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

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

我怎样才能做到这一点？

#1楼

在没有任何框架的情况下最简单的方法是使用方法。

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

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

element.classList.remove("otherclass");

我宁愿不必自己添加任何空白空间和重复条目（使用document.className方法时需要）。有一些，但是您可以使用来解决它们。

#2楼

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

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

上面的代码将为nameElem添加（而不是替换）一个类“ anyclass”。同样，您可以使用classList.remove（）方法删除一个类。

nameElem.classList.remove("anyclss")

#3楼

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

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 classuclass.remove(elem,'someClass');

#4楼

这个js代码对我有用

提供类名替换

var DDCdiv = hEle.getElementBy.....var cssCNs = DDCdiv.getAttribute('class');var Ta = cssCNs.split(' '); //split into an arrayfor (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 arrayTa.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 arrayfor (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

希望这对身体有益

#5楼

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

对于添加类：

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

对于删除类：

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

#6楼

新增课程

交叉兼容

在下面的示例中，我们向<body>元素添加一个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('wait'); } else { a.className += ' wait'; }

性能
如果您更关心交叉兼容性方面的性能，则可以将其缩短为以下速度，即快4％。
```
var z = document.body; document.body.classList.add('wait');
```

方便
或者，您可以使用jQuery，但结果性能会大大降低。根据jsPerf慢94％
```
$('body').addClass('wait');
```

删除课程

性能
如果您关注性能，则选择性地使用jQuery是删除类的最佳方法
```
var a = document.body, c = ' classname'; $(a).removeClass(c);
```

如果没有jQuery，它的速度要慢32％

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

参考文献

使用原型

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

#7楼

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

//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 functionaddClass(addClassVar, 'newClass');

#8楼

带有纯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";})

#9楼

要将附加类添加到元素：

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

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

更改元素的所有类：

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

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

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

#10楼

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

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

#11楼

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

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

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

#12楼

我知道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 onceaddClass(document.querySelector('#getbyid'),'3 4 5 5 5');

#13楼

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

// get element referencevar 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 classeselem.className = _.chain(elem.className).split(/[\s]+/).difference(['nav','navHeader']).join(' ').value()

#14楼

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

如果只需要更改一个元素（JS将在DOM中找到的第一个元素），则可以使用以下元素：

document.querySelector('.someclass').className += " red";

.red { color: red; }


      
      This method will add class "red" only to first element in DOM
 
     
 
      
      lorem ipsum
 
     
 
      
      lorem ipsum
 
     
 
      
      lorem ipsum

请记住，在班级名称前留一个空格。

如果您有多个班级要在其中添加新班级，则可以像这样使用它

document.querySelectorAll('.someclass').forEach(function(element) { element.className += " red"; });

.red { color: red; }


      
      This method will add class "red" to all elements in DOM that have "someclass" class.
 
     
 
      
      lorem ipsum
 
     
 
      
      lorem ipsum
 
     
 
      
      lorem ipsum

#15楼

我也认为最快的方法是像在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 }) }

#16楼

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

然后

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

注意otherclass之前的otherclass 。重要的是要包含空格，否则会损害类列表中之前的现有类。

另请参见。

#17楼

假设您要做的不仅仅是添加一个类（例如，您还有异步请求等），我建议您使用或类的库。

这将使您几乎需要做的一切（包括此操作）变得非常简单。

因此，假设您现在在页面上有了jQuery，则可以使用如下代码向元素添加类名（在这种情况下为加载）：

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

查看以了解其他内容。

#18楼

根据需要找到目标元素“ d”，然后：

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

您可以用更聪明的方法包装它，以检查是否存在，并检查空间需求等。

#19楼

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

#20楼

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

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

高温超导

#21楼

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

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

#22楼

当我所做的工作不能保证使用库时，我将使用以下两个功能：

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

转载地址：http://nxogj.baihongyu.com/

你可能感兴趣的文章

爬虫篇——腾讯新闻的详细采集过程（列表新闻和新闻内容）

查看>>