CODEWITHSUNDEEP
javascriptjqueryhtmlcssattr
igetstuckalot
igetstuckalot

Reputation: 237

JQuery .attr tag not working

I don't understand why .attr() will not change the background-color of div "outline" to red.

HTML CODE:

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

CSS CODE:

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

JAVASCRIPT (JQUERY) CODE:

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

Upvotes: 0

Views: 224

Answers (3)

Vivick
Vivick

Reputation: 4991

background-color isn't an attribute, it's a css property.

Use :

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

Upvotes: 0

jrarama
jrarama

Reputation: 904

// 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>

Upvotes: 0

kind user
kind user

Reputation: 41893

background-color isn't a html attribute, it's a style attribute - use css function instead.

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

Upvotes: 2

Related Questions