Question

我有以下代码，我用来显示我的自定义对话框。但按钮的颜色默认为灰色。如何添加背景颜色并增大或减小它的大小，或者在javascript中进行循环。

document.getElementById('dialog-box-foot').innerHTML = '<button onclick="Alert.ok()">OK</button>';

Answer 1

使用Javascript，您可以更改背景颜色或大小：

        document.getElementById("mybutton").style.background='#000000';
         // size
        document.getElementById("mybutton").style.height='50px';
        document.getElementById("mybutton").style.width='50px';
        // radious
        document.getElementById("mybutton").style.borderRadius = "25px";

Answer 2

您需要编辑元素的CSS：

{{1}}

您可以在这里找到一些示例：https://www.w3schools.com/css/css3_buttons.asp

Answer 3

var elem = document.getElementById('dialog-box-foot')
//While inserting
elem.innerHTML = '<button style="background:yellow;height:30px;width:30px;border-radius:50%;" onclick="Alert.ok()">OK</button>';

//After inserting
var buttonelem = document.getElementById('buttonelem');
buttonelem.style.background = "aliceblue";
buttonelem.style.height = "50px";
buttonelem.style.width = "50px";
buttonelem.style.borderRadius = "50%";

<div id="dialog-box-foot"></div>
<button id="buttonelem">OK</button>

Answer 4

如果，这就是你要找的东西：

＆＃13;

document.getElementById('dialog-box-foot').innerHTML = "<button class='mybtn' onclick=\"alert(\'ok\')\">OK</button>";

＆＃13;

.mybtn{
	background:#00f;
  outline:none;
  border:none;
  padding:10px;
  border-radius:3px;
  color:#fff;
  cursor:pointer;
}
.mybtn:hover{
	background:#0f0;
}
.mybtn:active{
	background:#f00;
}

＆＃13;

<div id="dialog-box-foot"></div>

＆＃13;

Answer 5

如果您有多种css样式，可以试试这个。获得cssText财产的优势。

  document.getElementById("dialog-box-foot").style.cssText = "background-color:#f00;left:10%;top:30%";

如何在javascript中更改Button的背景颜色

5 个答案: