Next »
74/185
« Previous

.css()

In this chapter you will learn:

  1. Syntax and Description for .css() getter
  2. Syntax and Description for .css() setter
  3. How to set the element background color
  4. How to get the background color
  5. How to set the background color for the first table row
  6. How to change the font style for the last table row
  7. How to change the color and value for a form input element
  8. How to change the border style
  9. How to set two properties together
  10. How to chain methods to do style setting
  11. How to set css defined in an array
  12. How to use rgb format color in .css method

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><!--  j a va 2s  . c o m-->
  <head>
    <script src="http://java2s.com/style/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 the background color

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

<html><!--from   j a  va 2  s . c o m-->
  <head>
    <script src="http://java2s.com/style/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. java2s.com
       <b>Hello</b>
    </body>
</html>

Click to view the demo

Set background color for first table row

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

<html><!--from ja v  a  2 s .c om-->
  <head>
    <script src="http://java2s.com/style/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

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><!--from  j  ava  2s  .  c  om-->
  <head>
    <script src="http://java2s.com/style/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>ja va2s.com</td></tr>
      </table>
  </body>
</html>

Click to view the demo

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><!-- j  a v  a 2 s. c  om-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
          $(document).ready(function(){
             $("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

Change the border

With .css() we can set the border.

<html><!-- ja v a  2s .com-->
  <head>
    <script src="http://java2s.com/style/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">j av  a2s.com</span>
  </body>
</html>

Click to view the demo

Set two css properties

The following code sets two css properties within one command.

<html><!--from j  av  a 2 s. com-->
  <head>
    <script src="http://java2s.com/style/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>j av a2s.com</td></tr>
    </table>


    </body>
</html>

Click to view the demo

Nested style setting

The following code chains style setting.

<html><!--from   j a  v  a2 s  . c  o  m-->
  <head>
    <script src="http://java2s.com/style/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>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

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><!-- ja v a2s . co  m-->
  <head>
    <script src="http://java2s.com/style/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>java2s.co m</b>
    </body>
</html>

Click to view the demo

Set background color with rgb format

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

<html><!--from  j av  a  2s .  co m-->
  <head>
    <script src="http://java2s.com/style/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>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

Next chapter...

What you will learn in the next chapter:

  1. Syntax and Description for .detach() method
Next »
« Previous