JQueryの.attrタグが機能しない

Question

.attr（）はdivの "outline"の背景色をredに変更しない理由はわかりません。

HTMLのCODE：

<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');