Question

我的问题很像my last topic，但它不一样。

我有几个按钮，由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;
}

我的问题是：

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

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

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

DEMO in JsFiddle.

P.S：

如上所述，请不要提出类似的建议：

// HTML 

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

//JavaScript

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

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

任何帮助都会很棒。

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;
    }
}

Demo

Answer 2

如果你使用$（“。Btn”）。点击然后你正在使用jquery。这意味着您可以简化后续行。

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

这是你的小提琴编辑：DEMO

单击按钮时更改Element.attr

2 个答案: