.css()

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

Syntax

.css(propertyName) (getter)

Description

Get the value of a style property for the first element in the set of matched elements.

Parameters

propertyName: A CSS property

Return value

A string containing the CSS property value.

Syntax

.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

Return value

The jQuery object, for chaining purposes.

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             var color = $("b").css("background-color");
             alert(color);
        });
    </script>
  </head>
  <body>
    <body>
       <b>Hello</b>
    </body>
</html>

Click to view the demo

Get background color

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             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.
       <b>Hello</b>
    </body>
</html>

Click to view the demo

Set background color

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("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

Use .css function to change the font.

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
          $(document).ready(function(){
              $("tr:last").css("font-style", "italic");

          });
    </script>
  </head>
  <body>
      <table>
        <tr><td>Row 1</td></tr>
        <tr><td>Row 2</td></tr>
        <tr><td>Row 3</td></tr>
      </table>
  </body>
</html>

Click to view the demo

Change the color

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
          $(document).ready(function(){
             $("label + input").css("color", "red").val("value")
          });
    </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

Set border

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
  $(document).ready(function(){
    $(".myClass").css("border","3px solid red");


  });
    </script>

  </head>
  <body>
      <div class="notMe">div </div>
      <div class="myClass">div</div>
      <span class="myClass">span</span>

  </body>
</html>

Click to view the demo

The following code sets two css properties.

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           $("tr:last").css({backgroundColor: 'yellow', fontWeight: 'bolder'});
        });
    </script>

  </head>
  <body>
    <body>
    <table>
        <tr><td>First</td></tr>
        <tr><td>Middle</td></tr>
        <tr><td>Last</td></tr>
    </table>


    </body>
</html>

Click to view the demo

Nested style setting

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
          $("div").css("background", "yellow").filter(".blue").css("border-color", "red");
        });
    </script>
     <style>
     div { border:2px white solid;}
  </style>

  </head>
  <body>
    <body>
      <div class=blue>asdf</div>
      <div>asdf</div>
      <div>asdf</div>
      <div>asdf</div>
      <div>asdf</div>
      <div>asdf</div>

  </body>
</html>

Click to view the demo

Define CSS in an array and set

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
              $("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>Hello</b>
    </body>
</html>

Click to view the demo

Use the rgb function with JQuery

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
         $("td:empty").text("Was empty").css('background', 'rgb(255,220,200)');

    });

    </script>


  </head>
  <body>
      <table>
          <tr><td>data</td><td></td></tr>
          <tr><td>data</td><td></td></tr>
          <tr><td>data</td><td></td></tr>
      </table>

  </body>
</html>

Click to view the demo