HTML<a>使用 vanilla javascript 添加类属性</a>

Question

我试图在 JS 函数成功时更改 HTML“a”内容的类。 但是，我通过 id 更改类的代码不起作用。 我似乎无法弄清楚我做错了什么，或者我是否遗漏了什么。

场景：三个“a”标签创建fancybox按钮，当文件加载成功时，它们以绿色勾勒（css已经编写并验证是好的——课堂上的“成功”关键字）所以用户知道选择是好的。

标签的 HTML 代码

应该更改其类内容但不是的 JS 代码 -

 document.getElementById('misc-selection-button').class = 'button big success square fit mr-4'; document.getElementById('weapon-selection-button').class = 'button big success square fit mr-4'; document.getElementById('target-selection-button').class = 'button big success square fit mr-4'; console.log("misc-selection-button class:" + document.getElementById('misc-selection-button').class); console.log("weapon-selection-button class:" + document.getElementById('weapon-selection-button').class); console.log("target-selection-button class:" + document.getElementById('target-selection-button').class);

 <div class="row justify-content-center mt-5"> <div class="col-5"> <a data-fancybox href="#load-miscellaneous" id="misc-selection-button" class="button big square fit mr-4">Miscellaneous</a> </div> </div> <div class="row justify-content-center mt-5"> <div class="col-5"> <a data-fancybox href="#load-weapon" id="weapon-selection-button" class="button big square fit mr-4">Weapon</a> </div> <div class="col-5"> <a data-fancybox href="#load-target" id="target-selection-button" class="button big square fit ml-4">Target</a> </div> </div>

Answer 1

我认为您的语法不正确。 它应该是： document.getElementById('misc-selection-button').className = 'button big success square fit mr-4';

Answer 2

这可能是一个语法问题试试

document.getElementById("myDIV").className = "mystyle";

Answer 3

你必须要做

// add a class to the list
document.getElementById('misc-selection-button').classList.add('success');
// remove a class to the list
document.getElementById('misc-selection-button').classList.remove('success');
// toggle class in the list
document.getElementById('misc-selection-button').classList.toggle('success', true);
// set all classes once (overwrite)
document.getElementById('misc-selection-button').className = "button big success square fit mr-4";