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

上次编辑后

您必须先声明您的 JavaScript 函数，然后才能在 HTML 中引用它！所以将你的<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）我建议您使用backgroundColor，因为您也在 CSS 中使用它。

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

如果您通过样式表（而不是styleHTML 属性）提供 CSS 属性，则该值也无法通过该style属性访问。您必须使用window.getComputedStyle(elem)：

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