我有一个元素已经有一个类:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>
现在,我想创建一个JavaScript函数,它将向div添加一个类(不是替换,而是添加)。
我该怎么做?
我有一个元素已经有一个类:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>
现在,我想创建一个JavaScript函数,它将向div添加一个类(不是替换,而是添加)。
我该怎么做?
当前回答
纯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";
})
其他回答
在YUI中,如果包含yuidom,则可以使用
YAHOO.util.Dom.addClass('div1','className');
HTH
这可能对WordPress开发人员等有帮助。
document.querySelector('[data-section="section-hb-button-1"] .ast-custom-button').classList.add('TryMyClass');
在我的例子中,我在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。
首先,给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>
这个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
希望这对忧郁的人有帮助