JQuery .attr标记不起作用

Question

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

HTML代码：

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

CSS代码：

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

JAVASCRIPT（JQUERY）CODE：

$("#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

背景颜色不是一个属性，它是一个CSS属性。

用途：

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