Question

例如我有一个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>

问题是我似乎无法将背景颜色存储到变量中。

Answer 1

上次编辑后

您必须先声明JavaScript函数，然后才能在HTML中引用它！因此，将<script>块移到按钮上方。

请参阅此处的差异：

Original code：在控制台中产生错误
JS code in <head> tag：功能正常！

尽管如此，我建议你在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

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

window.getComputedStyle(document.getElementById("button1")).backgroundColor

你可以使用document.getElementById检索属性吗？

1 个答案:

上次编辑后

原始答案