0

たとえば、 のボタンがありbackground-color:#FF0000、そのプロパティ (色) を変数に格納したいとします。私はこれを試しました：

var x=document.getElementById("button1").style.background;

しかし、それは機能しません。

間違えてすみません、私はピリオドを使用しています。訂正しました。

ここに完全なコードのスニペットがあります:-

<html>
<body>

<button id="button1" style="width:200px;height:200px;background-color:#00FF00;font-color:white" type="button" onclick="colorchange()">this is green</button>

<button id="button2" style="width:200px;height:200px;background-color:#FF0000;font-color:white" type="button" onclick="colorchange()">this is red</button>

<script>
function colorchange()
{
var color1;
var color2;
var color3;

color1=document.getElementById("button1").style.background
color2=document.getElementById("button2").style.background

color3=color1;
color1=color2;
color2=color3;

document.getElementById("button1").style.background=color1
document.getElementById("button2").style.background=color2
}
</script>

</body>
</html>

問題は、背景色を変数に保存できないように見えることです。

4

1 に答える 1

2

最後の編集後

HTML で参照する前に、JavaScript 関数を宣言する必要があります。<script>ブロックをボタンの上に移動します。

ここで違いを参照してください。

それにもかかわらず、JS でイベント リスナー バインディングを作成することをお勧めします。

document.getElementById("button1").addEventListener("click", colorchange);
document.getElementById("button2").addEventListener("click", colorchange);

さらに再利用するためにボタン参照をキャッシュすることも検討する必要があります。

var btn1 = document.getElementById("button1");
var btn2 = document.getElementById("button1");

元の答え

a) 生理がありません。
b）backgroundColorCSSでも使用しているため、使用することをお勧めします。

alert( document.getElementById("button1").style.backgroundColor );
                                         ^----- period here

(HTML 属性ではなく) スタイル シートを介して CSS プロパティを指定した場合style、この値は属性からもアクセスできませんstyle。window.getComputedStyle(elem)を使用する必要があります:

window.getComputedStyle(document.getElementById("button1")).backgroundColor
于 2013-06-12T17:13:00.513 に答える