gistfile1.txt

{{APIHeader|CSS|css|function}}
{{APIEntry|
|type=function
|name=css
|cat=CSS
|return=String
|added=1.0
|desc=Return a style property on the first matched element.
|longdesc=
|arg0=name
|arg0type=String
|arg0desc=The name of the property to access.
}}
<noinclude>
{{APIExamples|
{{APIExample
|desc=To access the background color of a clicked div.
|code=<nowiki>
    $("div").</nowiki>{{Code|Events|click}}<nowiki>(function () {
      var color = $(this).</nowiki>{{Code|CSS|css}}<nowiki>("background-color");
      $("#result").</nowiki>{{Code|Attributes|html}}<nowiki>("That div is <span style='color:" +
                         color + ";'>" + color + "</span>.");
    });
</nowiki>
|css=<nowiki>
  div { width:60px; height:60px; margin:5px; float:left; }
  </nowiki>
|html=<nowiki><span id="result">&nbsp;</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></nowiki>
}}
}}
</noinclude>
{{APIEntry|
|type=function
|name=css
|cat=CSS
|return=jQuery
|added=1.0
|desc=Set a key/value object as style properties to all matched elements.
|longdesc=This is the best way to set several style properties on all matched elements.
|arg0=properties
|arg0type=Map
|arg0desc=Key/value pairs to set as style properties.
}}
<noinclude>
{{APIExamples|
{{APIExample
|desc=To set the color of all paragraphs to red and background to blue:
|code=<nowiki>
    $("p").</nowiki>{{Code|Events|hover}}<nowiki>(function () {
      $(this).</nowiki>{{Code|CSS|css}}<nowiki>({ backgroundColor:"yellow", fontWeight:"bolder" });
    }, function () {
      var cssObj = {
        backgroundColor: "#ddd",
        fontWeight: "",
        color: "rgb(0,40,244)"
      }
      $(this).</nowiki>{{Code|CSS|css}}<nowiki>(cssObj);
    });
</nowiki>
|css=<nowiki>
  p { color:green; }
  </nowiki>
|html=<nowiki><p>
    Move the mouse over a paragraph.
  </p>
  <p>
    Like this one or the one above.
  </p></nowiki>
}}
{{APIExample
|desc=If the property name includes a "-", put it between quotation marks:
|code=<nowiki>
    $("p").</nowiki>{{Code|Events|hover}}<nowiki>(function () {
      $(this).</nowiki>{{Code|CSS|css}}<nowiki>({ "background-color":"yellow", "font-weight":"bolder" });
    }, function () {
      var cssObj = {
        "background-color": "#ddd",
        "font-weight": "",
        color: "rgb(0,40,244)"
      }
      $(this).</nowiki>{{Code|CSS|css}}<nowiki>(cssObj);
    });
</nowiki>
|css=<nowiki>
  p { color:green; }
  </nowiki>
|html=<nowiki><p>
    Move the mouse over a paragraph.
  </p>
  <p>
    Like this one or the one above.
  </p></nowiki>
}}
}}
</noinclude>
{{APIEntry|
|type=function
|name=css
|cat=CSS
|return=jQuery
|added=1.0
|desc=Set a single style property to a value on all matched elements.
|longdesc=If a number is provided, it is automatically converted into a pixel value.
|arg0=name
|arg0type=String
|arg0desc=The name of the property to set.
|arg1=value
|arg1type=String, Number
|arg1desc=The value to set the property to.
}}
<noinclude>
{{APIExamples|
{{APIExample
|desc=To change the color of any paragraph to red on mouseover event.
|code=<nowiki>
    $("p").</nowiki>{{Code|Events|mouseover}}<nowiki>(function () {
      $(this).</nowiki>{{Code|CSS|css}}<nowiki>("color","red");
    });
</nowiki>
|css=<nowiki>
  p { color:blue; width:200px; font-size:14px; }
  </nowiki>
|html=<nowiki><p>
    Just roll the mouse over me.
  </p>
  <p>
    Or me to see a color change.
  </p></nowiki>
}}
{{APIExample
|desc=To highlight a clicked word in the paragraph.
|code=<nowiki>
    var words = $("p:first").</nowiki>{{Code|Attributes|text}}<nowiki>().split(" ");
    var text = words.join("</span> <span>");
    $("p:first").</nowiki>{{Code|Attributes|html}}<nowiki>("<span>" + text + "</span>");
    $("span").</nowiki>{{Code|Events|click}}<nowiki>(function () {
      $(this).</nowiki>{{Code|CSS|css}}<nowiki>("background-color","yellow");
    });
</nowiki>
|css=<nowiki>
  p { color:blue; font-weight:bold; cursor:pointer; }
  </nowiki>
|html=<nowiki><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></nowiki>
}}
}}
</noinclude>
{{APIFooter|CSS|css|function}}