我有一个元素已经有一个类:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>
现在,我想创建一个JavaScript函数,它将向div添加一个类(不是替换,而是添加)。
我该怎么做?
我有一个元素已经有一个类:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>
现在,我想创建一个JavaScript函数,它将向div添加一个类(不是替换,而是添加)。
我该怎么做?
当前回答
要以简单的方式添加、删除或检查元素类,请执行以下操作:
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');
其他回答
在我的例子中,我在DOM中有多个称为主包装器的类,但我只想影响父主包装器。使用:第一选择器(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('doubleheadrredesign');。
注意:如您所见,我使用了jQuery。
在没有任何框架的情况下,最简单的方法是使用element.classList.add方法。
var element = document.getElementById("div1");
element.classList.add("otherclass");
编辑:如果要从元素中删除类-
element.classList.remove("otherclass");
我宁愿不添加任何空格和重复条目处理(使用document.className方法时需要这样做)。浏览器存在一些限制,但可以使用polyfills解决这些限制。
要向元素添加其他类,请执行以下操作:
要在不删除/影响现有值的情况下将类添加到元素,请附加一个空格和新类名,如下所示:
document.getElementById("MyElement").className += " MyClass";
要更改元素的所有类,请执行以下操作:
要用一个或多个新类替换所有现有类,请设置className属性:
document.getElementById("MyElement").className = "MyClass";
(可以使用空格分隔的列表来应用多个类。)
可以使用classList.add或classList.remove方法从元素中添加/删除类。
var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")
上述代码将向nameElem添加(而不是替换)一个类“anyclass”。类似地,可以使用classList.remove()方法删除类。
nameElem.classList.remove("anyclss")
我认为最好使用纯JavaScript,它可以在浏览器的DOM上运行。
这里是使用它的函数方法。我使用过ES6,但可以随意使用ES5和函数表达式或函数定义,无论哪种都适合您的JavaScript StyleGuide。
'使用严格'const oldAdd=(元素,className)=>{let classes=element.className.split(“”)if(classes.indexOf(className)<0){classs.push(className)}element.className=classes.join(“”)}const oldRemove=(元素,className)=>{let classes=element.className.split(“”)const idx=classes.indexOf(className)如果(idx>-1){类.拼接(idx,1)}element.className=classes.join(“”)}const addClass=(元素,className)=>{if(element.classList){element.classList.add(className)}其他{oldAdd(元素,className)}}const removeClass=(元素,className)=>{if(element.classList){element.classList.remove(className)}其他{oldRemove(元素,className)}}