javascript - 使用 javascript 困难生成 html

Question

目前在我使用 javascript 生成 html 时遇到问题。下面是我的代码:

html:

<div id="result"></div>

JavaScript:

var html = '';          
for(var i=0; i < 2; i++){
    html += '<button onclick="#" class="btn btn-default kiosk_btn">button</button>'
}         
$( "#result" ).html( html );

CSS:

.kiosk_btn{font-size: 4vmin; background-color: #141E26; border:none; box-shadow: 5px 5px 5px black; margin: 2vmin; height:8vmin; width:80vmin; color:white;}
.kiosk_btn:active{outline: none; text-decoration: none;}
.kiosk_btn:focus{outline: none; text-decoration: none; }
.kiosk_btn:hover{text-decoration: none; background-color: #213140; color:white;}

JSFIDDLE

我正在使用 Bootstrap 按钮。按下后按钮将变为白色。按下后应该会恢复到原来的颜色。

如果我直接将按钮写成html编码而不是使用javascript，就不会出现这样的问题。你们有解决这个问题的想法吗？

Answer 1

这是由 bootstrap CSS 规则引起的

.btn-default:focus {
    ...
}

有两种解决方案。

第一个解决方案:在kiosk_btn color 和backroud-color 上使用!important，要小心。

.kiosk_btn{font-size: 4vmin; background-color: #141E26 !important; border:none; box-shadow: 5px 5px 5px black; margin: 2vmin; height:8vmin; width:80vmin; color:white !important;}

第二个解决方案，覆盖 bootstrap css 规则

.kiosk_btn:focus{outline: none; text-decoration: none; background-color: #141E26;color:white;}