.css()

Syntax and Description for .css() getter

.css() gets and sets CSS-related properties of elements.

.css(propertyName) (getter)

gets the value of a style property for the first element in the set of matched elements. propertyName is a CSS property. Its return value is a string containing the CSS property value.

Syntax and Description for .css() setter

.css(propertyName, value) (setter)

Set one or more CSS properties for the set of matched elements.

propertyName: A CSS property name. value: A value to set for the property
.css(map) map: A map of property-value pairs to set

.css(propertyName, function)

propertyName: A CSS property name.
function: A function returning the value to set

Its return value is the jQuery object, for chaining purposes.

Set the background color

The following code uses the .css() method to set the background color.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from   ww w  .j a  v a2s .  c o  m-->
             var color = $("b").css("background-color");
             alert(color);
        });
    </script>
  </head>
  <body>
    <body>
       <b>Hello</b>
    </body>
</html>

Click to view the demo

The code above generates the following result.

.css()

Get the background color

The following code gets background color with .css() method and creates a new span element using that color.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from  w  ww.  ja v a 2s .  c o m-->
             var color = $("b").css("background-color");
             alert(color);

            $("b").html("<span style='color:" +color + ";'>" + color + "</span>.");
        });
    </script>
  </head>
  <body>
    <body>
       Highlight all to see me. java2s.com
       <b>Hello</b>
    </body>
</html>

Click to view the demo

The code above generates the following result.

.css()

Set background color for first table row

The following code selects first table row with selector tr:first then sets background color


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--   www  .j  av  a 2  s .c o m-->
            $("tr:first").css("background-color", "red");
        });
    </script>

  </head>
  <body>
    <body>
    <table border="1">
        <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
        <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
        <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
    </table>

    </body>
</html>

Click to view the demo

The code above generates the following result.

.css()

Change the font style for last table row

The following code selects the last table row with selector tr:last then it uses .css function to change the font.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
          $(document).ready(function(){<!--from   w ww. ja  va2  s.c o  m-->
              $("tr:last").css("font-style", "italic");

          });
    </script>
  </head>
  <body>
      <table>
        <tr><td>Row 1</td></tr>
        <tr><td>Row 2</td></tr>
        <tr><td>ja va2s.com</td></tr>
      </table>
  </body>
</html>

Click to view the demo

The code above generates the following result.

.css()

Change the color and value

.css() can also be used to change the color. The following code selects form input element and then sets the color to red and changes its value as well.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
          $(document).ready(function(){<!--  www  . j av  a  2  s  .  c om-->
             $("label + input").css("color", "red").val("java2s.co m")
          });
    </script>

  </head>
  <body>
      <form>
        <label>Name:</label>
        <input name="name" />
        <fieldset>
          <label>Address:</label>
          <input name="newsletter" />
        </fieldset>
      </form>
      <input name="none" />

  </body>
</html>

Click to view the demo

The code above generates the following result.

.css()

Change the border

With .css() we can set the border.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){<!--from   w  ww. j  av  a2 s . co  m-->
        $(".myClass").css("border","3px solid red");
      });
    </script>

  </head>
  <body>
      <div class="notMe">div </div>
      <div class="myClass">div</div>
      <span class="myClass">j av  a2s.com</span>
  </body>
</html>

Click to view the demo

The code above generates the following result.

.css()

Set two css properties

The following code sets two css properties within one command.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!-- w w  w .  j  a v a  2 s  .  co  m-->
           $("tr:last").css({backgroundColor: 'yellow', fontWeight: 'bolder'});
        });
    </script>

  </head>
  <body>
    <body>
    <table>
        <tr><td>First</td></tr>
        <tr><td>Middle</td></tr>
        <tr><td>j av a2s.com</td></tr>
    </table>


    </body>
</html>

Click to view the demo

The code above generates the following result.

.css()

Nested style setting

The following code chains style setting.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from  w  ww  .j  ava 2s  .c om-->
          $("div").css("background", "yellow").filter(".blue").css("border-color", "red");
        });
    </script>
     <style>
     div { border:2px white solid;}
  </style>

  </head>
  <body>
    <body>
      <div class=blue>java2s.com</div>
      <div>ja v  a2s.com</div>
      <div>java  2s.com</div>
      <div>java2s.com</div>
      <div>java2s.com</div>
      <div>java2s.com</div>

  </body>
</html>

Click to view the demo

The code above generates the following result.

.css()

CSS in array

The following code shows how to sets CSS in an array. It creates an array of style properties and values and then sets them together with .css method.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from   www .  ja va 2s. co  m-->
              $("b").hover(function () {
                   $(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
              }, function () {
                   var cssObj = {
                     'background-color' : '#ddd',
                     'font-weight' : '',
                     'color' : 'red'
                   }
                   $(this).css(cssObj);
              });
        });
    </script>
  </head>
  <body>
    <body>
       <b>java2s.co m</b>
    </body>
</html>

Click to view the demo

The code above generates the following result.

.css()

Set background color with rgb format

The following code uses the rgb function with .css() method.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){<!-- w  ww .  j  a va2  s  .c  om-->
         $("td:empty").text("Was empty").css('background', 'rgb(255,220,200)');

    });
    </script>
  </head>
  <body>
      <table>
          <tr><td>data</td><td>java2s.com</td></tr>
          <tr><td>data</td><td></td></tr>
          <tr><td>data</td><td></td></tr>
      </table>

  </body>
</html>

Click to view the demo

The code above generates the following result.

.css()