代码之家 › 专栏 › 技术社区 › BluePanda

如何在javascript中更改按钮的背景色

dom html jquery javascript

BluePanda · 技术社区 · 7 年前

我有以下代码,用于显示自定义对话框。但按钮的颜色默认为灰色。如何在javascript中添加背景色、增大或减小其大小或使其变圆。

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

5 回复 | 直到 7 年前

Sreekanth Reddy Balne 7 年前

如果,这就是您要寻找的:

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

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

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

piratefache 7 年前

您需要编辑元素的CSS:

#dialog-box-foot {
    background-color: #ee6e73;  // Background color
    border-radius: 4px;         // Round
    font-size: 16px;            // Font size
}

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

Vignesh Raja 7 年前

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>

samo0ha 7 年前

如果您有多个 css 风格,你可以试试这个。获得优势 cssText 所有物

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

Enayat 7 年前

使用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";

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

5 月前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

5 月前

user28928120 · 如何在jquery中选择所有类?

6 月前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

6 月前