1 line
10 KiB
JSON
1 line
10 KiB
JSON
{"name":"css","type":"method","title":".css()","deprecated":null,"removed":null,"desc":"Get the value of a style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.","categories":["css","manipulation/style-properties","version/1.0","version/1.4","version/1.9"],"entries":[{"return":"String","signatures":[{"added":"1.0","argument":{"desc":"A CSS property.","name":"propertyName","type":"String"}},{"added":"1.9","argument":{"desc":"An array of one or more CSS properties.","name":"propertyNames","type":"Array"}}],"examples":[{"desc":"Get the background color of a clicked div.","code":"\n$( \"div\" ).click(function() {\n var color = $( this ).css( \"background-color\" );\n $( \"#result\" ).html( \"That div is <span style='color:\" +\n color + \";'>\" + color + \"</span>.\" );\n});\n","css":"\n div {\n width: 60px;\n height: 60px;\n margin: 5px;\n float: left;\n }\n","html":"\n<span id=\"result\"> </span>\n<div style=\"background-color:blue;\"></div>\n<div style=\"background-color:rgb(15,99,30);\"></div>\n<div style=\"background-color:#123456;\"></div>\n<div style=\"background-color:#f11;\"></div>\n"},{"desc":"Get the width, height, text color, and background color of a clicked div.","code":"\n$( \"div\" ).click(function() {\n var html = [ \"The clicked div has the following styles:\" ];\n\n var styleProps = $( this ).css([\n \"width\", \"height\", \"color\", \"background-color\"\n ]);\n $.each( styleProps, function( prop, value ) {\n html.push( prop + \": \" + value );\n });\n\n $( \"#result\" ).html( html.join( \"<br>\" ) );\n});\n","css":"\n div {\n height: 50px;\n margin: 5px;\n padding: 5px;\n float: left;\n }\n #box1 {\n width: 50px;\n color: yellow;\n background-color: blue;\n }\n #box2 {\n width: 80px;\n color: rgb(255, 255, 255);\n background-color: rgb(15, 99, 30);\n }\n #box3 {\n width: 40px;\n color: #fcc;\n background-color: #123456;\n }\n #box4 {\n width: 70px;\n background-color: #f11;\n }\n","html":"\n<p id=\"result\"> </p>\n<div id=\"box1\">1</div>\n<div id=\"box2\">2</div>\n<div id=\"box3\">3</div>\n<div id=\"box4\">4</div>\n"}],"desc":"Get the computed style properties for the first element in the set of matched elements.","longdesc":"\n <p>The <code>.css()</code> method is a convenient way to get a style property from the first matched element, especially in light of the different ways browsers access most of those properties (the <code>getComputedStyle()</code> method in standards-based browsers versus the <code>currentStyle</code> and <code>runtimeStyle</code> properties in Internet Explorer) and the different terms browsers use for certain properties. For example, Internet Explorer's DOM implementation refers to the <code>float</code> property as <code>styleFloat</code>, while W3C standards-compliant browsers refer to it as <code>cssFloat</code>. For consistency, you can simply use <code>\"float\"</code>, and jQuery will translate it to the correct value for each browser.</p>\n <p>Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both <code>.css( \"background-color\" )</code> and <code>.css( \"backgroundColor\" )</code>.</p>\n\t <p>Note that the <em>computed style</em> of an element may not be the same as the value specified for that element in a style sheet. For example, computed styles of dimensions are almost always pixels, but they can be specified as em, ex, px or % in a style sheet. Different browsers may return CSS color values that are logically but not textually equal, e.g., #FFF, #ffffff, and rgb(255,255,255).</p>\n <p>Retrieval of shorthand CSS properties (e.g., <code>margin</code>, <code>background</code>, <code>border</code>), although functional with some browsers, is not guaranteed. For example, if you want to retrieve the rendered <code>border-width</code>, use: <code>$( elem ).css( \"borderTopWidth\" )</code>, <code>$( elem ).css( \"borderBottomWidth\" )</code>, and so on.</p>\n <p><strong>As of jQuery 1.9</strong>, passing an array of style properties to <code>.css()</code> will result in an object of property-value pairs. For example, to retrieve all four rendered <code>border-width</code> values, you could use <code>$( elem ).css([ \"borderTopWidth\", \"borderRightWidth\", \"borderBottomWidth\", \"borderLeftWidth\" ])</code>. </p>\n "},{"return":"jQuery","signatures":[{"added":"1.0","argument":[{"desc":"A CSS property name.","name":"propertyName","type":"String"},{"desc":"A value to set for the property.","type":[{"name":"String"},{"name":"Number"}],"name":"value"}]},{"added":"1.4","argument":[{"desc":"A CSS property name.","name":"propertyName","type":"String"},{"desc":"A function returning the value to set. <code>this</code> is the current element. Receives the index position of the element in the set and the old value as arguments.","name":"function(index, value)","type":"Function"}]},{"added":"1.0","argument":{"desc":"An object of property-value pairs to set.","name":"properties","type":"PlainObject"}}],"examples":[{"desc":"Change the color of any paragraph to red on mouseover event.","code":"\n$( \"p\" ).on( \"mouseover\", function() {\n $( this ).css( \"color\", \"red\" );\n});\n","css":"\n p {\n color: blue;\n width: 200px;\n font-size: 14px;\n }\n","html":"\n <p>Just roll the mouse over me.</p>\n\n <p>Or me to see a color change.</p>\n"},{"desc":"Increase the width of #box by 200 pixels the first time it is clicked.","code":"\n$( \"#box\" ).one( \"click\", function() {\n $( this ).css( \"width\", \"+=200\" );\n});\n","css":"\n #box {\n background: black;\n color: snow;\n width: 100px;\n padding: 10px;\n }\n","html":"\n<div id=\"box\">Click me to grow</div>\n"},{"desc":"Highlight a clicked word in the paragraph.","code":"\nvar words = $( \"p\" ).first().text().split( /\\s+/ );\nvar text = words.join( \"</span> <span>\" );\n$( \"p\" ).first().html( \"<span>\" + text + \"</span>\" );\n$( \"span\" ).on( \"click\", function() {\n $( this ).css( \"background-color\", \"yellow\" );\n});\n","css":"\n p {\n color: blue;\n font-weight: bold;\n cursor: pointer;\n }\n","html":"\n<p>\n Once upon a time there was a man\n who lived in a pizza parlor. This\n man just loved pizza and ate it all\n the time. He went on to be the\n happiest man in the world. The end.\n</p>\n"},{"desc":"Change the font weight and background color on mouseenter and mouseleave.","code":"\n$( \"p\" )\n .on( \"mouseenter\", function() {\n $( this ).css({\n \"background-color\": \"yellow\",\n \"font-weight\": \"bolder\"\n });\n })\n .on( \"mouseleave\", function() {\n var styles = {\n backgroundColor : \"#ddd\",\n fontWeight: \"\"\n };\n $( this ).css( styles );\n });\n","css":"\n p {\n color: green;\n }\n","html":"\n<p>Move the mouse over a paragraph.</p>\n<p>Like this one or the one above.</p>\n"},{"desc":"Increase the size of a div when you click it.","code":"\n$( \"div\" ).on( \"click\", function() {\n $( this ).css({\n width: function( index, value ) {\n return parseFloat( value ) * 1.2;\n },\n height: function( index, value ) {\n return parseFloat( value ) * 1.2;\n }\n });\n});\n","css":"\n div {\n width: 20px;\n height: 15px;\n background-color: #f33;\n }\n","html":"\n<div>click</div>\n<div>click</div>\n"}],"desc":"Set one or more CSS properties for the set of matched elements.","longdesc":"\n <p>As with the <code>.prop()</code> method, the <code>.css()</code> method makes setting properties of elements quick and easy. This method can take either a property name and value as separate parameters, or a single object of key-value pairs.</p>\n <p>Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both <code>.css({ \"background-color\": \"#ffe\", \"border-left\": \"5px solid #ccc\" })</code> and <code>.css({backgroundColor: \"#ffe\", borderLeft: \"5px solid #ccc\" })</code>. Notice that with the DOM notation, quotation marks around the property names are optional, but with CSS notation they're required due to the hyphen in the name.</p>\n <p>When using <code>.css()</code> as a setter, jQuery modifies the element's <code>style</code> property. For example, <code>$( \"#mydiv\" ).css( \"color\", \"green\" )</code> is equivalent to <code>document.getElementById( \"mydiv\" ).style.color = \"green\"</code>. Setting the value of a style property to an empty string — e.g. <code>$( \"#mydiv\" ).css( \"color\", \"\" )</code> — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's <code>.css()</code> method, or through direct DOM manipulation of the <code>style</code> property. It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or <code><style></code> element. <strong>Warning:</strong> one notable exception is that, for IE 8 and below, removing a shorthand property such as <code>border</code> or <code>background</code> will remove that style entirely from the element, regardless of what is set in a stylesheet or <code><style></code> element.</p>\n <p>As of jQuery 1.6, <code>.css()</code> accepts relative values similar to <code>.animate()</code>. Relative values are a string starting with <code>+=</code> or <code>-=</code> to increment or decrement the current value. For example, if an element's padding-left was 10px, <code>.css( \"padding-left\", \"+=15\" )</code> would result in a total padding-left of 25px.</p>\n <p>As of jQuery 1.4, <code>.css()</code> allows us to pass a function as the property value:</p>\n <pre><code>\n$( \"div.example\" ).css( \"width\", function( index ) {\n return index * 50;\n});\n </code></pre>\n <p>This example sets the widths of the matched elements to incrementally larger values.</p>\n <p><strong>Note: </strong>If nothing is returned in the setter function (ie. <code>function( index, style ){} )</code>, or if <code>undefined</code> is returned, the current value is not changed. This is useful for selectively setting values only when certain criteria are met.</p>\n "}]} |