javascript - 单击按钮时更改 Element.attr

Question

我的问题很像我的上一个主题，但不一样。

---

我有几个按钮并由 CSS 设置样式。

HTML 代码在这里：

<button class="Btn red">Btn1</button>
<button class="Btn blue">Btn2</button>
<button class="Btn green">Btn3</button>
<div id="Content"></div>

CSS代码在这里：

.red {
    background-color: #ff0000;
}
.blue {
    background-color: #0000ff;
}
.green {
    background-color: #00ff00;
}
#Content {
    background-color: #ccc;
    width: 150px;
    height: 150px;
} 

我的问题是：

我如何更改(#Content).backgroundcolor 为(Clicked_Btn).backgroundcolor使用 Javascript。

我试过下面的 JS 命令，我认为它有很多问题：

$(".Btn").click(function(){
document.getElementById("Content").style.backgroundColor = getComputedStyle(this).backgroundColor;    
);

JsFiddle 中的演示。

---

PS：

正如我上面提到的，请不要提出类似的建议：

// HTML 

<button class="Btn red" onClick="changeColor(this);">Btn1</button>
...

//JavaScript

function changeColor(elem){
document.getElementById("Content").style.backgroundColor = getComputedStyle(elem).backgroundColor;    
}

我不想onClick("function();")在 HTML 按钮标签中使用。

任何帮助都是极好的。

Answer 1

纯 Javascript（不依赖 jQuery）：

var buttons = document.getElementsByTagName("button");
for(var i=0; i<buttons.length; i++){
    buttons[i].onclick = function(){
        document.getElementById("Content").style.backgroundColor = getComputedStyle(this).backgroundColor;
    }
}

演示

Answer 2

如果您使用的是 $(".Btn").click 那么您使用的是 jquery。这意味着您可以简化很多后续行。

$(".Btn").click(function(){
  $("#Content").css('background-color',$(this).css('background-color'));   
});

这是你的小提琴编辑：DEMO