How to change CSS using jQuery

Question

I am trying to change the CSS using jQuery    x000D   x000D    init   x000D       x000D  function init     x000D         h1   css  backgroundColor    yellow    x000D          myParagraph   css   backgroundColor   black   color   white    x000D          bordered   css  border    1px solid black    x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 0 jquery min js  gt  lt  script gt  x000D   lt div class  bordered  gt  x000D       lt h1 gt Header lt  h1 gt  x000D       lt p id  myParagraph  gt This is some paragraph text lt  p gt  x000D   lt  div gt  x000D   x000D   x000D    What am I missing here

User · Answer

Ignore the people that are suggesting that the property name is the issue. The jQuery API documentation explicitly states that either notation is acceptable: http://api.jquery.com/css/

The actual problem is that you are missing a closing curly brace on this line:

$("#myParagraph").css({"backgroundColor":"black","color":"white");

Change it to this:

$("#myParagraph").css({"backgroundColor": "black", "color": "white"});

Here's a working demo: http://jsfiddle.net/YPYz8/

_x000D_

$(init);_x000D_
    _x000D_
function init() {_x000D_
    $("h1").css("backgroundColor", "yellow");_x000D_
    $("#myParagraph").css({ "backgroundColor": "black", "color": "white" });_x000D_
    $(".bordered").css("border", "1px solid black");_x000D_
}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>_x000D_
<div class="bordered">_x000D_
    <h1>Header</h1>_x000D_
    <p id="myParagraph">This is some paragraph text</p>_x000D_
</div>

_x000D_

User · Answer

radioValue   css   background-color   -webkit-linear-gradient  e9e9e9 rgba 255  255  255  0 43137254901960786   e9e9e9    color    454545       padding    8px

User · Answer

You can do either      h1   css  background-color    yellow      Or      h1   css  backgroundColor   yellow

User · Answer

To clear things up a little  since some of the answers are providing incorrect information     The jQuery  css   method allows the use of either DOM or CSS notation in many cases  So  both backgroundColor and background-color will get the job done   Additionally  when you call  css   with arguments you have two choices as to what the arguments can be  They can either be 2 comma separated strings representing a css property and its value  or it can be a Javascript object containing one or more key value pairs of CSS properties and values   In conclusion the only thing wrong with your code is a missing    The line should read       myParagraph   css   backgroundColor   black   color   white       You cannot leave the curly brackets out  but you may leave the quotes out from around backgroundColor and color  If you use background-color you must put quotes around it because of the hyphen   In general  it s a good habit to quote your Javascript objects  since problems can arise if you do not quote an existing keyword     A final note is that about the jQuery  ready   method    handler     is synonymous with     document  ready handler     as well as with a third not recommended form   This means that   init  is completely correct  since init is the handler in that instance  So  init will be fired when the DOM is constructed

User · Answer

Just wanted to add that when using numbers for values with the css method you have to add them outside the apostrophe and then add the CSS unit in apostrophes       block   css  width  50           or  var  block       block         block css    width   50         height   4    em    background     FFDAB9

User · Answer

The  css   method makes it super simple to find and set CSS properties and combined with other methods like  animate    you can make some cool effects on your site   In its simplest form  the  css   method can set a single CSS property for a particular set of matched elements  You just pass the property and value as strings and the element   s CSS properties are changed       example   css  background-color    red     This would set the    background-color    property to    red    for any element that had the class of    example      But you aren   t limited to just changing one property at a time  Sure  you could add a bunch of identical jQuery objects  each changing just one property at a time  but this is making several  unnecessary calls to the DOM and is a lot of repeated code   Instead  you can pass the  css   method a Javascript object that contains the properties and values as key value pairs  This way  each property will then be set on the jQuery object all at once       example   css        background-color    red        border     1px solid red        color     white        font-size    32px        text-align     center        display     inline-block        This will change all of these CSS properties on the     example    elements

User · Answer

When you are using Multiple css property with jQuery then you must use the curly Brace in starting and in the end  You are missing the ending curly brace   function init         h1   css  backgroundColor    yellow          myParagraph   css   background-color   black   color   white           bordered   css  border    1px solid black        You can have a look at this jQuery CSS Selector tutorial

User · Answer

x000D   x000D    function     x000D      bordered   css   x000D   border   1px solid  EFEFEF   x000D   margin   0 auto   x000D   width   80   x000D      x000D   x000D     h1   css   x000D   margin-left   10px  x000D      x000D   x000D      myParagraph   css   x000D   margin-left   10px   x000D   font-family   sans-serif  x000D      x000D   x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 0 jquery min js  gt  lt  script gt  x000D   lt div class  bordered  gt  x000D   lt h1 gt Header lt  h1 gt  x000D   lt p id  myParagraph  gt This is some paragraph text lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

wrong code     myParagraph   css   backgroundColor   black   color   white     its  missing       after white   change it to this       myParagraph   css   background-color   black   color   white

User · Answer

lt  DOCTYPE html gt   lt html gt     lt head gt       lt script src  https   ajax googleapis com ajax libs jquery 3 1 1 jquery min js  gt  lt  script gt       lt script gt           document   ready function                 h1   css  color    3498db                   lt  script gt       lt style gt         wrapper          height 450px          background  ededed          text-align center              lt  style gt     lt  head gt     lt body gt       lt div class  wrapper  gt         lt h1 gt Title lt  h1 gt       lt  div gt     lt  body gt   lt  html gt

[javascript] How to change CSS using jQuery?

Examples related to javascript

Examples related to jquery

Examples related to css