JavaScript属性值不更新引导样式_Javascript_Twitter Bootstrap

JavaScript属性值不更新引导样式

javascript twitter-bootstrap

JavaScript属性值不更新引导样式,javascript,twitter-bootstrap,Javascript,Twitter Bootstrap,我从嵌入式脚本创建了一个按钮，但是添加的引导样式“btn btn success”没有显示绿色按钮。 <body> <div class="container"> <main> </main> <aside> <hr> <button onclick="createElementBtn();">Create a button</button><b

我从嵌入式脚本创建了一个按钮，但是添加的引导样式“btn btn success”没有显示绿色按钮。

<body>
<div class="container">
    <main>
    </main>
    <aside>
        <hr>
    <button onclick="createElementBtn();">Create a button</button><br />
    </aside>
</div>  <!-- /container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
function createElementBtn(){
        var bodyEl = document.getElementsByTagName("body")[0];
        var mainEl = bodyEl.getElementsByTagName("main")[0];
        var btn = document.createElement("button");
        btn.type='button';
        btn.class='btn btn-success';
        btn.innerHTML='Basic Button';
        mainEl.appendChild(btn);
}
</script>
</body>
</html>



创建一个按钮

函数createElementBtn（）{
var bodyEl=document.getElementsByTagName（“主体”）[0]；
var mainEl=bodyEl.getElementsByTagName（“main”）[0]；
var btn=document.createElement（“按钮”）；
btn.type='button'；
btn.class='btn btn success'；
btn.innerHTML='Basic Button'；
主语、副词（btn）；
}

您应该修改元素的

className

属性，而不是定义

class

属性

<body>
<div class="container">
    <main>
    </main>
    <aside>
        <hr>
    <button onclick="createElementBtn();">Create a button</button><br />
    </aside>
</div>  <!-- /container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
function createElementBtn(){
        var bodyEl = document.getElementsByTagName("body")[0];
        var mainEl = bodyEl.getElementsByTagName("main")[0];
        var btn = document.createElement("button");
        btn.type='button';
        btn.class='btn btn-success';
        btn.innerHTML='Basic Button';
        mainEl.appendChild(btn);
}
</script>
</body>
</html>

btn.className = 'btn btn-success';

btn.className = 'btn btn-success';

您应该修改元素的

className

属性，而不是定义

class

属性

<body>
<div class="container">
    <main>
    </main>
    <aside>
        <hr>
    <button onclick="createElementBtn();">Create a button</button><br />
    </aside>
</div>  <!-- /container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
function createElementBtn(){
        var bodyEl = document.getElementsByTagName("body")[0];
        var mainEl = bodyEl.getElementsByTagName("main")[0];
        var btn = document.createElement("button");
        btn.type='button';
        btn.class='btn btn-success';
        btn.innerHTML='Basic Button';
        mainEl.appendChild(btn);
}
</script>
</body>
</html>

btn.className = 'btn btn-success';

btn.className = 'btn btn-success';

试试这个：

<body>
<div class="container">
    <main>
    </main>
    <aside>
        <hr>
    <button onclick="createElementBtn();">Create a button</button><br />
    </aside>
</div>  <!-- /container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
function createElementBtn(){
        var bodyEl = document.getElementsByTagName("body")[0];
        var mainEl = bodyEl.getElementsByTagName("main")[0];
        var btn = document.createElement("button");
        btn.type='button';
        btn.class='btn btn-success';
        btn.innerHTML='Basic Button';
        mainEl.appendChild(btn);
}
</script>
</body>
</html>

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

或按类名：

<body>
<div class="container">
    <main>
    </main>
    <aside>
        <hr>
    <button onclick="createElementBtn();">Create a button</button><br />
    </aside>
</div>  <!-- /container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
function createElementBtn(){
        var bodyEl = document.getElementsByTagName("body")[0];
        var mainEl = bodyEl.getElementsByTagName("main")[0];
        var btn = document.createElement("button");
        btn.type='button';
        btn.class='btn btn-success';
        btn.innerHTML='Basic Button';
        mainEl.appendChild(btn);
}
</script>
</body>
</html>

试试这个：

<body>
<div class="container">
    <main>
    </main>
    <aside>
        <hr>
    <button onclick="createElementBtn();">Create a button</button><br />
    </aside>
</div>  <!-- /container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
function createElementBtn(){
        var bodyEl = document.getElementsByTagName("body")[0];
        var mainEl = bodyEl.getElementsByTagName("main")[0];
        var btn = document.createElement("button");
        btn.type='button';
        btn.class='btn btn-success';
        btn.innerHTML='Basic Button';
        mainEl.appendChild(btn);
}
</script>
</body>
</html>

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

或按类名：

<body>
<div class="container">
    <main>
    </main>
    <aside>
        <hr>
    <button onclick="createElementBtn();">Create a button</button><br />
    </aside>
</div>  <!-- /container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
function createElementBtn(){
        var bodyEl = document.getElementsByTagName("body")[0];
        var mainEl = bodyEl.getElementsByTagName("main")[0];
        var btn = document.createElement("button");
        btn.type='button';
        btn.class='btn btn-success';
        btn.innerHTML='Basic Button';
        mainEl.appendChild(btn);
}
</script>
</body>
</html>