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

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

  •  0
  • BluePanda  · 技术社区  · 7 年前

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

    document.getElementById('dialog-box-foot').innerHTML = '<button onclick="Alert.ok()">OK</button>';
    
    5 回复  |  直到 7 年前
        1
  •  0
  •   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>
        2
  •  0
  •   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

        3
  •  0
  •   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>
        4
  •  0
  •   samo0ha    7 年前

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

      document.getElementById("dialog-box-foot").style.cssText = "background-color:#f00;left:10%;top:30%";
    
        5
  •  0
  •   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";