我有一个元素已经有一个类:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>
现在,我想创建一个JavaScript函数,它将向div添加一个类(不是替换,而是添加)。
我该怎么做?
我有一个元素已经有一个类:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>
现在,我想创建一个JavaScript函数,它将向div添加一个类(不是替换,而是添加)。
我该怎么做?
当前回答
可以使用classList.add或classList.remove方法从元素中添加/删除类。
var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")
上述代码将向nameElem添加(而不是替换)一个类“anyclass”。类似地,可以使用classList.remove()方法删除类。
nameElem.classList.remove("anyclss")
其他回答
大多数人在getElementById上使用.classList.add,但我想在getElementByClassName上使用它。为此,我使用了如下的forEach:
document.getElementsByClassName(“类名”).forEach(element=>element.classList.add(“new class”));
但它不起作用,因为我发现getElementsByClassName返回的是HTML集合,而不是数组。为了处理这个问题,我使用以下代码将其转换为数组:
[…document.getElementsByClassName(“类名”)].forEach(element=>element.classList.add(“new class”));
假设您所做的不仅仅是添加这个类(例如,您还有异步请求等),我建议使用Prototype或jQuery这样的库。
这将使你需要做的所有事情(包括这个)变得非常简单。
假设您现在在页面上有jQuery,您可以使用如下代码向元素添加类名(在本例中是加载时):
$(document).ready( function() {
$('#div1').addClass( 'some_other_class' );
} );
查看jQueryAPI浏览器以了解其他内容。
为了详细说明其他人所说的,多个CSS类组合在一个字符串中,由空格分隔。因此,如果您想对其进行硬编码,它只需如下所示:
<div class="someClass otherClass yetAnotherClass">
<img ... id="image1" name="image1" />
</div>
从那里,您可以很容易地导出添加新类所需的javascript。。。只需在元素的className属性中添加一个空格,后跟新类。知道了这一点,您还可以编写一个函数,以便以后在需要时删除类。
如果您只针对现代浏览器:
使用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";
注意其他类之前的空格。包含空间很重要,否则它会损害类列表中前面的现有类。
另请参见MDN上的element.className。
首先,给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>