如何通过 javascript 将 Bootstrap 类添加到“按钮”元素？答案

【问题标题】：How can I add a Bootstrap class to a 'Button' element through javascript?如何通过 javascript 将 Bootstrap 类添加到“按钮”元素？
【发布时间】：2021-06-07 20:17:53
【问题描述】：

我正在尝试通过 javascript 创建一个带有 Bootstrap class= "btn btn-info" 的按钮，但不是创建一个样式化的按钮，而是创建一个普通的 HTML 按钮。

代码

let diva = document.createElement('div');
    diva.class = 'fluid-container';
    
    let newContent = document.createElement('textarea');
    newContent.id = 'content';
    newContent.class = 'form-control';
    newContent.rows = '2';
    newContent.style = 'min-width : 100%';
    newContent.placeholder = 'Add argument infavor';
    
    //button = <button class="btn btn-info col-5" type="button" id="against"><b>Against</b></button>
    let btn = document.createElement('button');
    btn.type = 'submit';
    btn.class = 'btn btn-info';
    btn.innerHTML = "Submit";

    diva.appendChild(newContent);
    diva.appendChild(btn);

    parent = document.getElementById("addingArgumentArea");
    parent.appendChild(diva);

我正在尝试使用 btn.class 但它不起作用。为什么这不起作用，因为相同的方法适用于上面创建的文本字段，解决方案是什么？

【问题讨论】：

标签： javascript

【解决方案1】：

我不知道为什么它在 TextField 的情况下会起作用，但是使用 JavaScript DOM 定义类的正确方法是使用 classList 或使用 className，这是两个 DOM 属性。

在您的情况下，您应该使用它将btn btn-info 类添加到按钮。

btn.className = 'btn btn-info';

或者，您也可以使用它来一个一个地添加多个类-

btn.classList.add('btn');
btn.classList.add('btn-info');

【讨论】：

【解决方案2】：

你需要添加class为

btn.classList.add('btn', 'btn-info');

let diva = document.createElement('div');
diva.class = 'fluid-container';

let newContent = document.createElement('textarea');
newContent.id = 'content';
newContent.classList.add('form-control');
newContent.rows = '2';
newContent.style = 'min-width : 100%';
newContent.placeholder = 'Add argument infavor';

//button = <button class="btn btn-info col-5" type="button" id="against"><b>Against</b></button>
let btn = document.createElement('button');
btn.type = 'submit';
btn.classList.add('btn', 'btn-info');
btn.innerHTML = "Submit";

diva.appendChild(newContent);
diva.appendChild(btn);

parent = document.getElementById("addingArgumentArea");
parent.appendChild(diva);

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div id="addingArgumentArea"></div>

【讨论】：