代码之家 › 专栏 › 技术社区 › 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";

推荐文章

Ezz Deghedy · 如何获取数据和读取响应

1 年前

StuP · 响应式Vue组件在数据更改时不更新

2 年前

burr · 让jQuery选择器识别新添加的DOM元素[关闭]

3 年前

viboven · Javascript DOM未从ID检测到按钮,表示其为null[已关闭]

3 年前

Toufique E Joarder · 将<li>移动到第n个位置并使用JavaScript更改href链接

3 年前

HASEEB ALAM RAFIQ · 如何在react中获取QuerySelector所有html元素?

3 年前

J. Hu · “表单提交已取消,因为表单未连接”[重复]

7 年前

pploypiti · 选择所有其他ID不是“this”的元素。id'

7 年前

xiaolingxiao · 导航到页面后运行javascript

7 年前

Voodoobear · 如何将数字变量插入replaceWith(JavaScript)

7 年前