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

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

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

我该怎么做?


当前回答

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

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

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

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

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

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

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

其他回答

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

对于添加类:

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

要删除类:

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

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

JavaScript提供了两种向HTML元素添加类的不同方式:

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

使用这两种方法,您可以同时添加一个或多个类。

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

var element=document.querySelector('.box');//使用加法//添加单个类element.classList.add('color');//添加多个类element.classList.add('订单','阴影');.box格式{宽度:200px;高度:100px;}.颜色{背景:天蓝;}.边框{边框:2px实心黑色;}.阴影{盒子阴影:5px 5px 5px灰色;}<div class=“box”>我的盒子</div>

2.使用element.className属性

注意:始终使用+=运算符,并在类名前添加一个空格,以使用classList方法添加类。

var element=document.querySelector('.box');//使用className属性//添加单个类element.className+=“颜色”;//添加多个类element.className+='边框阴影';.box格式{宽度:200px;高度:100px;}.颜色{背景:天蓝;}.边框{边框:2px实心黑色;}.阴影{盒子阴影:5px 5px 5px灰色;}<div class=“box”>我的盒子</div>

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

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

HTH

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

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

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

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

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

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

希望这对忧郁的人有帮助