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

我正在使用引导按钮。按下按钮后，按钮将变为白色。它应该在按下之后恢复原始颜色。

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

Answer 1

这是由引导程序CSS规则

引起的

.btn-default:focus {
    ...
}

有两种解决方案。

第一个解决方案：在!important上使用kiosk_btn color and backroud-color，请注意它。

.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;}

Answer 2

我认为问题是焦点规则，只是覆盖它

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

＆＃13;

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

＆＃13;

.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;
  background-color: #141E26;
  color: white;
}
.kiosk_btn:hover {
  text-decoration: none;
  background-color: #213140;
  color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

＆＃13;

Answer 3

点击按钮后，它会变为focus。

Bootstrap定义了这个：

.btn-default:focus {
    color: #333;
    background-color: #ebebeb;
    border-color: #adadad
}

只需重载.kiosk_btn:focus即可解决问题。

顺便说一句，我在添加按钮时遇到了同样的问题＆＃34;手动＆＃34;在html。

使用javascript困难生成html

3 个答案: