Uses jQuery attr () to set "css"

Question

I am reading the jQuery Pocket Reference book, OReilly, 2011 On page 15 it says

'For example, calling attr ("css", {backgroundColor: "gray"}) is similar to calling css ({backgroundColor: "gray"}). "

But I can't get attr ('css', {}) to work. My test code is: http://jsfiddle.net/4UMN3/4/

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

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

Answer 1

Replace:

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

from

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

Answer 2

Perhaps he should have been

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

This may work, but has some problems:

• It is preferable to change the style property instead of the style attribute.
• It will replace all previously installed inline styles.

Then, if you are using jQuery, it is better to use the css method:

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

But the style property is useful in vanilla-js:

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

Answer 3

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

So proper use would be

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

But it deduces

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

An example that really works is

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

Answer 4

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

Answer 5

=> .css method changes the style attribute, not "css".

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

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

Answer 6

you are using jQuery, so you should use css , not attr , because css add the property , but attr will replace the whole style, if any!

Answer 7

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