web-dev-qa-db-ja.com

プログラムでボタンの色を変更する

ボタンの色、または少なくともプログラムでボタンラベルの色を変更する方法はありますか?ラベル自体を変更できます

document.getElementById("button").object.textElement.innerText = "newlabel";

しかし、色を変更する方法は?

24
Zsolt

私はついに動作するコードを見つけました-これを試してください:

document.getElementById("button").style.background='#000000';
25

HTMLを使用した例を次に示します。

<input type="button" value="click me" onclick="this.style.color='#000000';
this.style.backgroundColor = '#ffffff'" />

JavaScriptを使用した例を次に示します。

document.getElementById("button").bgcolor="#Insert Color Here";
6
Nathan Campos

ClassNameを変更するのが最善でしょう:

document.getElementById("button").className = 'button_color';

次に、ボタンのスタイルをCSSに追加して、背景色などを設定できます。

5
matpol
use jquery :  $("#id").css("background","red");
1

私はあなたがbgcolorが欲しいと信じています。このようなもの:

document.getElementById("button").bgcolor="#ffffff";

以下に役立ついくつかのデモを示します。

背景色

背景色チェンジャー

0
DOK

クラスに割り当てると動作するはずです:

<script>
  function changeClass(){
    document.getElementById('myButton').className = 'formatForButton';
  }
</script>

<style>
  .formatForButton {
    background-color:pink;
   }
</style>

<body>
  <input id='myButton' type=button class=none value='Change Color to pink' onclick='changeClass()'>
</body>
0

このコードを試してください このようなものが必要な場合があります

<button class="normal" id="myButton" 
        value="Hover" onmouseover="mouseOver()" 
        onmouseout="mouseOut()">Some text</button>

次に、.jsファイルにthisと入力します。htmlが.jsに接続されていることを確認します。

var tag=document.getElementById("myButton");

function mouseOver() {
    tag.style.background="yellow";
};
function mouseOut() {
    tag.style.background="white";
};
0
user9919032