CSS的简单用法

jQuery包含了获取和设置元素的CSS属性的简便方法： 

<code class="hljs mel has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//获取CSS属性</span>    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"h1"</span> ).css( <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"fontSize"</span> ); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Returns a string such as "19px".返回一个字符串"19px"。</span>    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"h1"</span> ).css( <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"font-size"</span> ); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Also works.同样会工作。</span>    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 设置CSS属性。</span>    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"h1"</span> ).css( <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"fontSize"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"100px"</span> ); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// Setting an individual property.设置单独的属性</span>    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 设置多个属性。</span>    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"h1"</span> ).css({        fontSize: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"100px"</span>,        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">color</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"red"</span>    });</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li></ul>

注意第二行参数的形式——它是一个包含多重属性的对象。这是传递多重参数到一个函数的常用办法，且很多jQuery设置函数的方法都接受一次性设置多个值的对象。

CSS属性在JavaScript中通常需要将连字号换成驼峰式拼写。例如，CSS属性font-size被用做Javascript中的一个属性名称的时候，用fontSize来表示。然而，当用.css()方法象字符串一样传递一个CSS属性名称的时候，并不会这样应用——在这种情况下，不管是驼峰式拼写还是连字号的形式都将运行。

当用一个对象来设置CSS的时候，CSS属性应该用驼峰式拼写而不应该用一个连字号，但在可生产代码（production-ready code）中，不推荐使用.css()做为设置函数。

应用CSS classes 设置样式

做为一个获取函数，.css()方法是很有价值的。然而，在生成就绪的代码中通常会避免将它做为设置函数，因为通常表现的信息最好和JavaScript代码保持分离。相反，用classes写那些描述多种显示形式的CSS规则，然后更换元素的class。

<code class="hljs r has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">    // 用classes工作。    var h1 = $( <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"h1"</span> );    h1.addClass( <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"big"</span> );    h1.removeClass( <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"big"</span> );    h1.toggleClass( <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"big"</span> );    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> ( h1.hasClass( <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"big"</span> ) ) {        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">...</span>    }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li></ul>

Classes还能够被用来存储关于一个元素的状态信息，例如表明哪个元素被选择。

大小

jQeury提供了丰富的方法用来获取和修饰一个元素的尺寸和定位信息。

下面的代码展示了jQuery中获取元素尺寸大小功能的一个简短概述。如果需要jQuery操作元素尺寸大小方法的全部细节，参见dimensions documentation on api.jquery.com。

<code class="hljs javascript has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 基础的尺寸大小方法。</span>    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//设置所有<h1>元素的宽度。</span>    $( <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"h1"</span> ).width( <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"50px"</span> );    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//获取第一个<h1>元素的宽度。</span>    $( <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"h1"</span> ).width();    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//设置所有<h1>元素的高度。</span>    $( <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"h1"</span> ).height( <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"50px"</span> );         <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//获取第一个<h1>元素的宽度。</span>    $( <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"h1"</span> ).height();    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 返回一个对象，包含第一个<h1>相于对于它的“父元素偏移（定位）”的定位信息。</span>    $( <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"h1"</span> ).position();</code>