bootstrap5 状态按钮方法——迹忆客-ag捕鱼王app官网

这些是标准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);
    });
});