我有一个元素已经有一个类:

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

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

我该怎么做?


当前回答

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

OR:

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

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

对于删除,您可以使用:

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

其他回答

要向元素添加其他类,请执行以下操作:

要在不删除/影响现有值的情况下将类添加到元素,请附加一个空格和新类名,如下所示:

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

要更改元素的所有类,请执行以下操作:

要用一个或多个新类替换所有现有类,请设置className属性:

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

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

假设您所做的不仅仅是添加这个类(例如,您还有异步请求等),我建议使用Prototype或jQuery这样的库。

这将使你需要做的所有事情(包括这个)变得非常简单。

假设您现在在页面上有jQuery,您可以使用如下代码向元素添加类名(在本例中是加载时):

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

查看jQueryAPI浏览器以了解其他内容。

我认为最好使用纯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)}}

如果您只针对现代浏览器:

使用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。

这个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

希望这对忧郁的人有帮助