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/

Answer 1

Replace:

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

with

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

Answer 2

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