ドキュメント

CSS/css

From jQuery JavaScript Library

Jump to: navigation, search

« Back to CSS

css( name )

Return a style property on the first matched element.
Shorthand CSS properties (e.g. margin, background, border) are not supported. For example, if you want to retrieve the rendered margin, use: $(elem).css('marginTop') and $(elem).css('marginRight'), and so on.
Arguments:
nameString
The name of the property to access.
Examples:

To access the background color of a clicked div.

    $("div").click(function () {
      var color = $(this).css("background-color");
      $("#result").html("That div is <span style='color:" +
                         color + ";'>" + color + "</span>.");
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("div").click(function () {
      var color = $(this).css("background-color");
      $("#result").html("That div is <span style='color:" +
                         color + ";'>" + color + "</span>.");
    });

  });
  </script>
  <style>
  div { width:60px; height:60px; margin:5px; float:left; }
  </style>
</head>
<body>
  <span id="result"> </span>
  <div style="background-color:blue;"></div>
  <div style="background-color:rgb(15,99,30);"></div>
  <div style="background-color:#123456;"></div>
  <div style="background-color:#f11;"></div>
</body>
</html>

NameType

css( properties )

Set a key/value object as style properties to all matched elements.
This is the best way to set several style properties on all matched elements. Be aware, however, that when the key contains a hyphen, such as "background-color," it must either be placed within quotation marks or be written in camel case like so: backgroundColor. As "float" and "class" are reserved words in JavaScript, it's recommended to always surround those terms with quotes. jQuery normalizes the "opacity" property in Internet Explorer.
Arguments:
propertiesMap
Key/value pairs to set as style properties.
Examples:

To set the color of all paragraphs to red and background to blue:

    $("p").hover(function () {
      $(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
    }, function () {
      var cssObj = {
        'background-color' : '#ddd',
        'font-weight' : '',
        'color' : 'rgb(0,40,244)'
      }
      $(this).css(cssObj);
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("p").hover(function () {
      $(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
    }, function () {
      var cssObj = {
        'background-color' : '#ddd',
        'font-weight' : '',
        'color' : 'rgb(0,40,244)'
      }
      $(this).css(cssObj);
    });

  });
  </script>
  <style>
  p { color:green; }
  </style>
</head>
<body>
  <p>
    Move the mouse over a paragraph.
  </p>
  <p>
    Like this one or the one above.
  </p>
</body>
</html>

If the property name includes a "-", put it between quotation marks:

    $("p").hover(function () {
      $(this).css({ "background-color":"yellow", "font-weight":"bolder" });
    }, function () {
      var cssObj = {
        "background-color": "#ddd",
        "font-weight": "",
        color: "rgb(0,40,244)"
      }
      $(this).css(cssObj);
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("p").hover(function () {
      $(this).css({ "background-color":"yellow", "font-weight":"bolder" });
    }, function () {
      var cssObj = {
        "background-color": "#ddd",
        "font-weight": "",
        color: "rgb(0,40,244)"
      }
      $(this).css(cssObj);
    });

  });
  </script>
  <style>
  p { color:green; }
  </style>
</head>
<body>
  <p>
    Move the mouse over a paragraph.
  </p>
  <p>
    Like this one or the one above.
  </p>
</body>
</html>

NameType

css( name, value )

Set a single style property to a value on all matched elements.
If a number is provided, it is automatically converted into a pixel value, with the following exceptions: z-index, font-weight, opacity, zoom and line-height). To remove a style property from elements use an empty string value.
Arguments:
nameString
The name of the property to set.
valueString, Number, Callback
The value to set the property to. In case of a Callback, the context is the to the DOM element to change.
Examples:

To change the color of any paragraph to red on mouseover event.

    $("p").mouseover(function () {
      $(this).css("color","red");
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("p").mouseover(function () {
      $(this).css("color","red");
    });

  });
  </script>
  <style>
  p { color:blue; width:200px; font-size:14px; }
  </style>
</head>
<body>
  <p>
    Just roll the mouse over me.
  </p>
  <p>
    Or me to see a color change.
  </p>
</body>
</html>

To highlight a clicked word in the paragraph.

    var words = $("p:first").text().split(" ");
    var text = words.join("</span> <span>");
    $("p:first").html("<span>" + text + "</span>");
    $("span").click(function () {
      $(this).css("background-color","yellow");
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    var words = $("p:first").text().split(" ");
    var text = words.join("</span> <span>");
    $("p:first").html("<span>" + text + "</span>");
    $("span").click(function () {
      $(this).css("background-color","yellow");
    });

  });
  </script>
  <style>
  p { color:blue; font-weight:bold; cursor:pointer; }
  </style>
</head>
<body>
  <p>
    Once upon a time there was a man
    who lived in a pizza parlor. This
    man just loved pizza and ate it all 
    the time.  He went on to be the
    happiest man in the world.  The end.
  </p>
</body>
</html>

NameType