CODEWITHSUNDEEP
jquery
mjyazdani
mjyazdani

Reputation: 2035

jquery don't change the attributes of a tag

my code is like below: 

<!DOCTYPE html>
<html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">/script>
    </head>
    <body>
         <p id="test1">This is a paragraph.</p>
         <button id="btn1">Set Text</button>
     </body>
 </html>

and my jquery code: 

$(document).ready(function(){
    $("#btn1").click(function(){
        $("#test1").text("Hello world!");
        $("#test1").attr('background-color','#F00');
    });
});

It changes the text but doesn't change the color. what's wrong with my code? jsfiddle link: http://jsfiddle.net/m6AnK/2/

Upvotes: 0

Views: 48

Answers (3)

Devang Rathod
Devang Rathod

Reputation: 6736

Replace

$("#test1").attr('background-color','#F00');

With

$("#test1").css('background-color','#F00');

Upvotes: 0

Pranav
Pranav

Reputation: 8871

Use CSS , instead of ATTR

 $(document).ready(function(){
      $("#btn1").click(function(){
        $("#test1").text("Hello world!");
       $("#test1").css('background-color','red');
      });


    });

Upvotes: 0

adeneo
adeneo

Reputation: 318222

It's not an attribute, it's a style ?

change

$("#test1").attr('background-color','#F00');

to

$("#test1").css('background-color','#F00');

Upvotes: 3

Related Questions