JQuery .attr标记不起作用

Question

我不明白为什么.attr（）不会将div“outline”的背景颜色更改为红色。

HTML CODE：

<div id="outline"></div>

CSS代码：

#outline {
height: 300px;
width: 300px;
background-color: black;
}

JAVASCRIPT（JQUERY）代码：

$("#outline").attr('background-color', 'blue');

Answer 1

background-color不是html属性，而是样式属性 - 改为使用css函数。

$("#outline").css('background-color', 'blue');

#outline {
  height: 300px;
  width: 300px;
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outline"></div>

Answer 2

// To set the html style attribute, use .css()
// .css() is dedicated to set one or more
// styles at a time
$("#outline").css('background-color','blue');

// This is equivalent to the above
// .attr() is dedicated to set one or more html
// attributes at a time
$("#outline").attr('style', 'background-color:blue');

#outline {
height: 300px;
width: 300px;
background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outline"></div>

Answer 3

background-color不是一个属性，它是一个css属性。

使用：

$("#outline").css('backgroundColor', 'blue');