Using jQuery attr() to set “css”

Question

I am reading the book "jQuery Pocket Reference", O’Reilly, 2011.

On page 15 it says:

'For example, calling attr("css", {backgroundColor:"gray"}) is the same as calling css({backgroundColor:"gray"}).'

But I cannot make the attr(“css”, { }) work. My test code: http://jsfiddle.net/4UMN3/4/

$(function() {
$("#btnChangeColor").click(function () {
$("#spanText").attr("css", { backgroundColor: "gray" });

 });

});

The css() method works fine, http://jsfiddle.net/4UMN3/5/

Nothing about it in the docs. Might be an error in the book. — Blazemonger
– Blazemonger, Commented Jul 10, 2014 at 22:38
Does this correspond to the second confirmed error on O'Reilly's site? — Blazemonger
– Blazemonger, Commented Jul 10, 2014 at 22:43

Branimir Đurek · Accepted Answer · 2014-07-10 22:52:53Z

28

Replace:

$("#spanText").attr("css", { backgroundColor: "gray" });

with

$("#spanText").attr('style',  'background-color:gray');

answered Jul 10, 2014 at 22:52

Branimir Đurek

6325 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Oriol · Accepted Answer · 2014-07-10 23:58:56Z

9

Probably, it was meant to be

$("#spanText").attr('style', 'background-color:gray');

This may work, but has some problems:

It is preferred to change style property instead of style attribute.
It will replace all previously set inline styles.

Then, if you use jQuery, better use css method:

$("#spanText").css('background-color', 'gray');

But style property is useful in vanilla-js:

document.getElementById("spanText").style.backgroundColor = 'gray';

answered Jul 10, 2014 at 23:58

Oriol

291k71 gold badges459 silver badges535 bronze badges

Comments

SVSchmidt · Accepted Answer · 2014-07-10 22:44:42Z

3

I think jQuery's .attr() can only affect attributes the element has. HTMLElements do not know an attribute called "css" (meaning <div css="something"></div>).

So, the correct usage would be

$("#spanText").attr("style",{backgroundColor:"gray"});

But this outputs

<span id="spanText" style="[object Object]">This is a test</span>

An example that actually works is

$("#spanText").attr("style","background-color:gray;");

answered Jul 10, 2014 at 22:44

SVSchmidt

6,6052 gold badges30 silver badges37 bronze badges

3 Comments

Alnitak Over a year ago

The .css() function understands the object literal syntax, the .attr() method doesn't.

SVSchmidt Over a year ago

I never claimed something different. I just wanted to show why the shown syntax does not work.

Alnitak Over a year ago

I was just commenting for the benefit of any reader - not criticising your answer.

Kanomdook · Accepted Answer · 2015-12-24 10:44:11Z

1

$("#id").attr('style',  'color:red;cursor:pointer');

answered Dec 24, 2015 at 10:44

Kanomdook

7358 silver badges6 bronze badges

Comments

user117291 · Accepted Answer · 2014-07-11 00:25:20Z

0

=> the .css method modifies the style attribute not the "css" .

$().att('style' , 'backgroundColor : gray');

=> there is no such thing as css attribute in html

answered Jul 11, 2014 at 0:25

user117291

234 bronze badges

Comments

karim somai · Accepted Answer · 2019-08-13 14:01:39Z

0

you use jQuery so you have to use css and not attr, 'cause css add property but attr will replace all style if existe !

answered Aug 13, 2019 at 14:01

karim somai

1492 silver badges3 bronze badges

Comments

jignasha · Accepted Answer · 2019-08-22 09:03:35Z

<style>
    .newClass{
    color:#fff;
    }
    .test2{
    color:red;
    }
    .newclass{
    color:blue;
    }
</style>

<script>
$(document).ready(function(){

    //get style and class name in alert
      $('#attr').click(function () {
        alert($('h3').attr("style"));
        alert($('h3').attr("class"));
      });

     //set css property
     $("#setcss").click(function(){
        $("#test").css({"background-color": "#000", "color": "teal"});
      });

      //change class name property
      $('#changeclassname').click(function(){
        $('#test3').removeClass('test2').addClass('newclass');
      });
});


</script>


<!--get style and class name in alert-->
<h3 class="test" style="color: white; background: red;">This is the tag and this will be our tag</h3> 

<button id="attr">get Attribute</button>


<!--set css property-->
<p id="test" class="test1">This is some <b>bold</b> text in a paragraph.</p>

<button id="setcss">set Attribute</button>


<!--change class name property-->
<p id="test3" class="test2">This is some text in a paragraph.</p>

<button id="changeclassname">set Attribute</button>

Collectives™ on Stack Overflow

Using jQuery attr() to set “css”

7 Answers 7

Comments

Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related