如何动态更改 HTML 标签的 CSS 类？

Posted 2023-03-07

【中文标题】如何动态更改 HTML 标签的 CSS 类？

【英文标题】：How to dynamically change CSS class of an HTML tag?

【发布时间】：2014-04-29 21:25:36

【问题描述】：

我正在使用 javascript。我有一个变量var boolVal，其计算结果为true/false。在我的页面上，我有一个<div> 标签：

<div id='div1' class="redClass"></div>

根据var boolVal的值，我想把<div>标签的CSS类改成blueClass。

例如：当前类使<div>颜色为红色，那么新类应在运行时使页面变为蓝色，而无需刷新页面。

我们可以用简单的 JavaScript 来实现吗？我们可以使用

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

或者我们应该使用AddClass？

【参考方案1】：

您可以像这样在 DOM 元素上编辑内联样式（本例中为高度）：

document.getElementById("element").style.height = height + "px";

基本语法是：

document.getElementById("div1").style.[style property] = [value];

样式属性的语法可能会有所不同，并且可能与 CSS 文件中的语法不完全相同。例如，CSS 文件中的background-color 在上例中将是“backgroundColor”。

【参考方案2】：

您可以使用classList API 动态添加基于id 的CSS 类，如下所示：

document.getElementById('idOfElement').classList.add('newClassName');

还是老办法：

document.getElementById('idOfElement').className = 'newClassName';
// += to keep existing classes

---

您也可以使用下面显示的其他 DOM 查询方法来查找元素。最后三个返回一个集合，因此您必须对其进行迭代并将类应用于集合中的每个元素（类似于下面给出的示例）。

querySelector

querySelectorAll

elements.forEach(element => element.classList.add('newClassName'));

getElementsByClassName

Array.from(elements).forEach(element => element.classList.add('newName'));

getElementsByTagName

Array.from(elements).forEach(element => element.classList.add('newName'));

---

你的情况

var element = document.getElementById('div1');
if(boolVal)
   element.className= 'blueClass'; // += ' blueClass'; to keep existing classes
else
   element.className= 'redClass';

【参考方案3】：

类似这样的：

document.getElementById("MyElement").className = boolVal ? "redClass" : "blueClass";

【参考方案4】：

你应该使用：

    boolVal.onchange=function()
                document.getElementById("MyElement").className = boolVal ? "redClass" : "blueClass";
    ;

【参考方案5】：

使用

document.getElementById('div1').className='blueClass';

【讨论】：

只需使用className= 即可清除其他类。

【参考方案6】：

首先，AddClass 不是纯 Javascript 方法。它与jQuery有关。

You can use Javascript for adding a class:

setAttribute 和className 这两个方法都用于设置类（类属性），这些方法不用于在现有的类中添加另一个类。

document.getElementById('div1').setAttribute( "class", "blueClass" );

或

document.getElementById('div1').className="redClass";

Demo Fiddle

因此，如果您想将 css 类附加到元素，您可以这样做 -

 document.getElementById('div1').setAttribute( "class", document.getElementById('div1').getAttribute('class') + " blueClass" );

或

 document.getElementById('div1').className +=" redClass";

注意：使用这种方式，可以多次添加同一个类。使用javascript完成这项工作只是一个技巧，它不是一个完美的解决方案

或者简单地使用 jQuery 添加类 -

$("#div1").addClass("blueClass");

Working Fiddle