Bootstrap5 状态按钮方法

这些是标准Bootstrap程序的按钮方法：

toggle

此方法切换按钮的按下状态。 它改变了按钮的样式，使它看起来像是被激活了。 您还可以通过简单地使用 data-bs-toggle="button" 属性来启用按钮的自动切换。 让我们看一下下面的例子：

document.addEventListener("DOMContentLoaded", function(){
    var buttons = document.querySelectorAll(".btn");

    buttons.forEach(function(button){
        button.addEventListener("click", function(e){
            var btn = new bootstrap.Button(e.target);
            btn.toggle();
        });
    });
});

尝试一下

dispose

此方法销毁元素的按钮（即删除存储在 DOM 元素上的数据）。

document.addEventListener("DOMContentLoaded", function(){
    var disposeBtn = document.getElementById("disposeBtn");
    var myButton = document.getElementById("myButton");

    disposeBtn.addEventListener("click", function(){
        var bsButton = bootstrap.Button.getInstance(myButton);
        console.log(bsButton);
        // {_element: button#myButton.btn.btn-outline-primary.active}

        bsButton.dispose();
        console.log(bsButton);
        // {_element: null}
    });
});

尝试一下

getInstance

这是一个静态方法，它允许我们获取与 DOM 元素关联的按钮实例。

document.addEventListener("DOMContentLoaded", function() {
    var getBtn = document.getElementById("getBtn");
    var myButton = document.getElementById("myButton");

    getBtn.addEventListener("click", function(){
        var bsButton = bootstrap.Button.getInstance(myButton);
        console.log(bsButton);
        // {_element: button#myButton.btn.btn-outline-primary.active}
    });
});

尝试一下

getOrCreateInstance

这是一种静态方法，它允许我们获取与 DOM 元素关联的按钮实例，或者在按钮未初始化的情况下创建一个新的实例。

document.addEventListener("DOMContentLoaded", function() {
    var myBtn = document.getElementById("getBtn");
    var myButton = document.getElementById("myButton");

    getBtn.addEventListener("click", function(){
        var bsButton = bootstrap.Button.getOrCreateInstance(myButton);
        console.log(bsButton);
    });
});

尝试一下