mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-06-08 23:14:06 +08:00
471 lines
49 KiB
HTML
471 lines
49 KiB
HTML
<article class="" id="post-">
|
||
<header class="entry-header">
|
||
<h1 class="entry-title">.css()</h1>
|
||
<div class="entry-meta">
|
||
所属分类：<span class="category"><a href="/category/css/">CSS</a></span><span class="category-divider"> | </span><span class="category"><a href="/category/manipulation/">DOM 操作</a> > <a href="/category/manipulation/style-properties/">CSS 属性</a></span>
|
||
<span class="pull-right">英文文档：<a href="https://api.jquery123.com/css/" target="_blank">.css()</a></span>
|
||
</div><!-- .entry-meta -->
|
||
</header><!-- .entry-header -->
|
||
<!-- .entry-header -->
|
||
<div class="entry-content">
|
||
获取匹配元素集合中的第一个元素的样式属性的值
|
||
或
|
||
设置每个匹配元素的一个或多个CSS属性。<div class="toc">
|
||
<h4><span>Contents:</span></h4>
|
||
<ul class="toc-list">
|
||
<li>
|
||
<a href="#css1">.css( propertyName )</a><ul>
|
||
<li>.css( propertyName )</li>
|
||
<li>.css( propertyNames )</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="#css2">.css( propertyName, value )</a><ul>
|
||
<li>.css( propertyName, value )</li>
|
||
<li>.css( propertyName, function(index, value) )</li>
|
||
<li>.css( properties )</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div><article class="entry method" id="css1"><h2 class="section-title">
|
||
<span class="name">.css( propertyName )</span><span class="returns">返回: <a href="/Types/#String">String</a></span>
|
||
</h2>
|
||
<div class="entry-wrapper">
|
||
<p class="desc"><strong>描述: </strong>获取匹配元素集合中的第一个元素的样式属性的值</p>
|
||
<ul class="signatures">
|
||
<li class="signature" id="css-propertyName">
|
||
<h4 class="name">
|
||
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>.css( propertyName )</h4>
|
||
<ul><li>
|
||
<div><strong>propertyName</strong></div>
|
||
<div>类型: <a href="/Types/#String">String</a>
|
||
</div>
|
||
<div>一个css属性名。</div>
|
||
</li></ul>
|
||
</li>
|
||
<li class="signature" id="css-propertyNames">
|
||
<h4 class="name">
|
||
<span class="version-details">添加的版本: <a href="/category/version/1.9/">1.9</a></span>.css( propertyNames )</h4>
|
||
<ul><li>
|
||
<div><strong>propertyNames</strong></div>
|
||
<div>类型: <a href="/Types/#Array">Array</a>
|
||
</div>
|
||
<div>一个或多个CSS属性组成的一个数组</div>
|
||
</li></ul>
|
||
</li>
|
||
</ul>
|
||
<div class="longdesc" id="entry-longdesc">
|
||
<p><code>.css()</code>方法可以非常方便地获取匹配的元素集合中第一个元素的样式属性值，
|
||
|
||
对于某些属性而言，浏览器访问样式属性的方式是不同的，该方法对于取得这些属性是非常方便的(例如，
|
||
某些属性在标准浏览器下是通过的 <code>getComputedStyle()</code> 方法取得的，而在Internet Explorer下是通过<code>currentStyle</code> 和 <code>runtimeStyle</code>属性取得的)并且，某些特定的属性，不同浏览器的写法不一。举个例子， Internet Explorer的DOM 将<code>float</code> 属性写成 <code>styleFloat</code>实现，W3C标准浏览器将<code>float</code> 属性写成<code>cssFloat</code>。 为了保持一致性，您可以简单地使用<code>"float"</code>，jQuery将为每个浏览器返回它需要的正确值。</p>
|
||
<p>另外,jQuery同样可以解析 CSS 和 用multiple-word格式化（用横杠连接的词，比如：background-color）的DOM属性的不同写法。举个例子：jQery能解析<code>.css('background-color')</code> 和 <code>.css('backgroundColor')</code>并且返回正确的值。不同的浏览器可能会返回CSS颜色值在逻辑上相同，但在文字上表现不同，例如： #FFF, #ffffff, 和 rgb(255,255,255)。</p>
|
||
<p>简写速写的CSS属性(例如： margin, background, border) 是不支持的，例如，如果你想重新获取margin，可以使用<code>$(elem).css('marginTop')</code> 和 <code>$(elem).css('marginRight')</code>，其他的也是如此。</p>
|
||
<p><strong>从jQuery 1.9开始</strong>, 传递一个CSS的样式属性的数组给<code>.css()</code>将返回 属性 - 值 配对的对象。例如，要获取元素4个边距宽度值<code>border-width</code>，你可以使用<code>$( elem ).css([ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ])</code>.</p>
|
||
</div>
|
||
<section class="entry-examples" id="entry-examples"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-0">
|
||
<h4>Example: <span class="desc">点击div，得到它的背景颜色</span>
|
||
</h4>
|
||
<div class="syntaxhighlighter xml ">
|
||
<table>
|
||
<tbody>
|
||
<tr>
|
||
<td class="gutter">
|
||
<div class="line n1">1</div>
|
||
<div class="line n2">2</div>
|
||
<div class="line n3">3</div>
|
||
<div class="line n4">4</div>
|
||
<div class="line n5">5</div>
|
||
<div class="line n6">6</div>
|
||
<div class="line n7">7</div>
|
||
<div class="line n8">8</div>
|
||
<div class="line n9">9</div>
|
||
<div class="line n10">10</div>
|
||
<div class="line n11">11</div>
|
||
<div class="line n12">12</div>
|
||
<div class="line n13">13</div>
|
||
<div class="line n14">14</div>
|
||
<div class="line n15">15</div>
|
||
<div class="line n16">16</div>
|
||
<div class="line n17">17</div>
|
||
<div class="line n18">18</div>
|
||
<div class="line n19">19</div>
|
||
<div class="line n20">20</div>
|
||
<div class="line n21">21</div>
|
||
<div class="line n22">22</div>
|
||
<div class="line n23">23</div>
|
||
<div class="line n24">24</div>
|
||
<div class="line n25">25</div>
|
||
<div class="line n26">26</div>
|
||
<div class="line n27">27</div>
|
||
</td>
|
||
<td class="code">
|
||
<pre><div class="container"><div class="line"><code><span class="doctype"><!DOCTYPE html></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">html</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">style</span>></span><span class="css"></span></code></div></div><div class="container"><div class="line"><code><span class="tag">div</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"><span class="number">60</span>px;</span></span> <span class="rule"><span class="attribute">height</span>:<span class="value"><span class="number">60</span>px;</span></span> <span class="rule"><span class="attribute">margin</span>:<span class="value"><span class="number">5</span>px;</span></span> <span class="rule"><span class="attribute">float</span>:<span class="value">left;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"></<span class="title">style</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">span</span> <span class="attribute">id</span>=<span class="value">"result"</span>></span>&nbsp;<span class="tag"></<span class="title">span</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">div</span> <span class="attribute">style</span>=<span class="value">"background-color:blue;"</span>></span><span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">div</span> <span class="attribute">style</span>=<span class="value">"background-color:rgb(15,99,30);"</span>></span><span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">div</span> <span class="attribute">style</span>=<span class="value">"background-color:#123456;"</span>></span><span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">div</span> <span class="attribute">style</span>=<span class="value">"background-color:#f11;"</span>></span><span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">script</span>></span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">"div"</span>).click(<span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code> <span class="keyword">var</span> color = $(<span class="keyword">this</span>).css(<span class="string">"background-color"</span>);</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"#result"</span>).html(<span class="string">"That div is <span style='color:"</span> +</code></div></div><div class="container"><div class="line"><code> color + <span class="string">";'>"</span> + color + <span class="string">"</span>."</span>);</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">html</span>></span></code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<h4>Demo:</h4>
|
||
<div class="demo code-demo"></div>
|
||
</div>
|
||
<div class="entry-example" id="example-1">
|
||
<h4>Example: <span class="desc">点击div，得到宽度，高度，文本颜色，背景颜色。</span>
|
||
</h4>
|
||
<div class="syntaxhighlighter xml ">
|
||
<table>
|
||
<tbody>
|
||
<tr>
|
||
<td class="gutter">
|
||
<div class="line n1">1</div>
|
||
<div class="line n2">2</div>
|
||
<div class="line n3">3</div>
|
||
<div class="line n4">4</div>
|
||
<div class="line n5">5</div>
|
||
<div class="line n6">6</div>
|
||
<div class="line n7">7</div>
|
||
<div class="line n8">8</div>
|
||
<div class="line n9">9</div>
|
||
<div class="line n10">10</div>
|
||
<div class="line n11">11</div>
|
||
<div class="line n12">12</div>
|
||
<div class="line n13">13</div>
|
||
<div class="line n14">14</div>
|
||
<div class="line n15">15</div>
|
||
<div class="line n16">16</div>
|
||
<div class="line n17">17</div>
|
||
<div class="line n18">18</div>
|
||
<div class="line n19">19</div>
|
||
<div class="line n20">20</div>
|
||
<div class="line n21">21</div>
|
||
<div class="line n22">22</div>
|
||
<div class="line n23">23</div>
|
||
<div class="line n24">24</div>
|
||
<div class="line n25">25</div>
|
||
<div class="line n26">26</div>
|
||
<div class="line n27">27</div>
|
||
<div class="line n28">28</div>
|
||
<div class="line n29">29</div>
|
||
<div class="line n30">30</div>
|
||
<div class="line n31">31</div>
|
||
<div class="line n32">32</div>
|
||
<div class="line n33">33</div>
|
||
<div class="line n34">34</div>
|
||
<div class="line n35">35</div>
|
||
<div class="line n36">36</div>
|
||
</td>
|
||
<td class="code">
|
||
<pre><div class="container"><div class="line"><code><span class="doctype"><!DOCTYPE html></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">html</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">style</span>></span><span class="css"></span></code></div></div><div class="container"><div class="line"><code><span class="tag">div</span> <span class="rules">{ <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">50</span>px;</span></span> <span class="rule"><span class="attribute">margin</span>:<span class="value"> <span class="number">5</span>px;</span></span> <span class="rule"><span class="attribute">padding</span>:<span class="value"> <span class="number">5</span>px;</span></span> <span class="rule"><span class="attribute">float</span>:<span class="value"> left;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="id">#box1</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">50</span>px;</span></span> <span class="rule"><span class="attribute">color</span>:<span class="value"> yellow;</span></span> <span class="rule"><span class="attribute">background-color</span>:<span class="value"> blue;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code><span class="id">#box2</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">80</span>px;</span></span> <span class="rule"><span class="attribute">color</span>:<span class="value"> <span class="function">rgb(<span class="number">255</span>,<span class="number">255</span>,<span class="number">255</span>)</span>;</span></span> <span class="rule"><span class="attribute">background-color</span>:<span class="value"> <span class="function">rgb(<span class="number">15</span>,<span class="number">99</span>,<span class="number">30</span>)</span>;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code><span class="id">#box3</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">40</span>px;</span></span> <span class="rule"><span class="attribute">color</span>:<span class="value"> <span class="hexcolor">#fcc</span>;</span></span> <span class="rule"><span class="attribute">background-color</span>:<span class="value"> <span class="hexcolor">#123456</span>;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code><span class="id">#box4</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">70</span>px;</span></span> <span class="rule"><span class="attribute">background-color</span>:<span class="value"> <span class="hexcolor">#f11</span>;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">style</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">p</span> <span class="attribute">id</span>=<span class="value">"result"</span>></span>&nbsp;<span class="tag"></<span class="title">p</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"box1"</span>></span>1<span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"box2"</span>></span>2<span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"box3"</span>></span>3<span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"box4"</span>></span>4<span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">script</span>></span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">"div"</span>).click(<span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code> <span class="keyword">var</span> html = [<span class="string">"The clicked div has the following styles:"</span>];</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="keyword">var</span> styleProps = $(<span class="keyword">this</span>).css( [<span class="string">"width"</span>, <span class="string">"height"</span>, <span class="string">"color"</span>, <span class="string">"background-color"</span>] );</code></div></div><div class="container"><div class="line"><code> $.each( styleProps, <span class="keyword">function</span>( prop, value ) {</code></div></div><div class="container"><div class="line"><code> html.push( prop + <span class="string">": "</span> + value );</code></div></div><div class="container"><div class="line"><code> });</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> $( <span class="string">"#result"</span> ).html( html.join( <span class="string">"<br>"</span> ) );</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">html</span>></span></code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<h4>Demo:</h4>
|
||
<div class="demo code-demo"></div>
|
||
</div></section>
|
||
</div></article><article class="entry method" id="css2"><h2 class="section-title">
|
||
<span class="name">.css( propertyName, value )</span><span class="returns">返回: <a href="/Types/#jQuery">jQuery</a></span>
|
||
</h2>
|
||
<div class="entry-wrapper">
|
||
<p class="desc"><strong>描述: </strong>设置每个匹配元素的一个或多个CSS属性。</p>
|
||
<ul class="signatures">
|
||
<li class="signature" id="css-propertyName-value">
|
||
<h4 class="name">
|
||
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>.css( propertyName, value )</h4>
|
||
<ul>
|
||
<li>
|
||
<div><strong>propertyName</strong></div>
|
||
<div>类型: <a href="/Types/#String">String</a>
|
||
</div>
|
||
<div>一个CSS属性名</div>
|
||
</li>
|
||
<li>
|
||
<div><strong>value</strong></div>
|
||
<div>类型: <a href="/Types/#String,%20Number">String, Number</a>
|
||
</div>
|
||
<div>设置这个CSS属性的值</div>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="signature" id="css-propertyName-functionindex--value">
|
||
<h4 class="name">
|
||
<span class="version-details">添加的版本: <a href="/category/version/1.4/">1.4</a></span>.css( propertyName, function(index, value) )</h4>
|
||
<ul>
|
||
<li>
|
||
<div><strong>propertyName</strong></div>
|
||
<div>类型: <a href="/Types/#String">String</a>
|
||
</div>
|
||
<div>一个CSS属性名</div>
|
||
</li>
|
||
<li>
|
||
<div><strong>function(index, value)</strong></div>
|
||
<div>类型: <a href="/Types/#Function">Function</a>()</div>
|
||
<div>一个返回设置值的函数。<code>this</code> 是当前元素。接收index 参数表示元素在匹配集合中的索引位置和html 参数表示元素上原来的 HTML 内容。</div>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="signature" id="css-properties">
|
||
<h4 class="name">
|
||
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>.css( properties )</h4>
|
||
<ul><li>
|
||
<div><strong>properties</strong></div>
|
||
<div>类型: <a href="/Types/#PlainObject">PlainObject</a>
|
||
</div>
|
||
<div>一个 属性-值 配对的对象</div>
|
||
</li></ul>
|
||
</li>
|
||
</ul>
|
||
<div class="longdesc" id="entry-longdesc-1">
|
||
<p>和<code>.prop()</code>方法一样，<code>.css()</code>方法使得设置元素的CSS属性快速而又简单。这个方法可以使用任何一个CSS属性名和用空格隔开的值，或者一个“键/值”对对象(JavaScript 对象符号)作为参数。 </p>
|
||
<p>另外,jQuery可以同样解析CSS和用multiple-word（用横杠连接的词，比如：background-color）属性的DOM格式。举个例子：jquery能解析<code>.css({'background-color': '#ffe', 'border-left': '5px solid #ccc'})</code> 和 <code>.css({backgroundColor: '#ffe', borderLeft: '5px solid #ccc'})</code>并且返回正确的值（注意这两条语句的单引号和“-”）。在 DOM 标记法中，属性名可以不使用引号包裹，但是在 CSS 标记法中，如果属性中含有连字符(-)的话，则必须用引号包裹。。</p>
|
||
<p>
|
||
当<code>.css()</code> 作为一个设置函数使用的时候，jQuery修改元素的<code>style</code>（样式）属性。例如，<code>$('#mydiv').css('color', 'green')</code> 等价于 <code>document.getElementById('mydiv').style.color = 'green'</code>。样式属性的值设置为空字符串 - 例如，<code>$('#mydiv').css('color', '')</code> - 那么会从元素上移除该属性（若该属性存在的话），该属性之前可能是通过 jQuery 的 <code>.css()</code> 方法设置的 HTML style 属性，也有可能是通过直接对 <code>style</code> 属性进行 DOM 操作而被设置的。它不会移除通过 CSS 规则或 <code><style></code> 元素设置的属性。
|
||
<strong>警告：</strong>一个值得注意的例外情况是，IE 8及以下版本，删除的简写属性，如边<code>border</code> 或者 <code>background</code> 将完全的删除该元素样式，不管是在样式表或<code><style></code>元素中。</p>
|
||
<p>
|
||
从jQuery1.6开始，<code>.css()</code>接受类似于<code>.animate()</code>的相对值。相对值时以<code>+=</code> 或者 <code>-=</code>开头的字符串，表示递增或递减当前的值。 例如，如果一个元素的左边填充（padding-left）是10px的，<code>.css( "padding-left", "+=15" )</code>将返回总的左填充（padding-left ）为25px。</p>
|
||
<p>从 jQuery 1.4开始, <code>.css()</code> 让我们传递一个函数给属性值：</p>
|
||
<div class="syntaxhighlighter javascript nogutter">
|
||
<table>
|
||
<tbody>
|
||
<tr>
|
||
<td class="gutter">
|
||
<div class="line n1">1</div>
|
||
<div class="line n2">2</div>
|
||
<div class="line n3">3</div>
|
||
</td>
|
||
<td class="code">
|
||
<pre><div class="container"><div class="line"><code>$(<span class="string">'div.example'</span>).css(<span class="string">'width'</span>, <span class="keyword">function</span>(index) {</code></div></div><div class="container"><div class="line"><code> <span class="keyword">return</span> index * <span class="number">50</span>;</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p>这个例子设置一个匹配元素的宽度增加到较大的值。</p>
|
||
<p><strong>注意: </strong>如果设置函数没有返回任何东西(例如. <code>function(index, style){})</code>，或者如果返回<code>undefined</code>，当前的值不会改变。只有当某些条件得到满足，选择性的设定值的时后是有用的。</p>
|
||
</div>
|
||
<section class="entry-examples" id="entry-examples-1"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-1-0">
|
||
<h4>Example: <span class="desc">通过mouseover事件改变一些段落的颜色为红色。</span>
|
||
</h4>
|
||
<div class="syntaxhighlighter xml ">
|
||
<table>
|
||
<tbody>
|
||
<tr>
|
||
<td class="gutter">
|
||
<div class="line n1">1</div>
|
||
<div class="line n2">2</div>
|
||
<div class="line n3">3</div>
|
||
<div class="line n4">4</div>
|
||
<div class="line n5">5</div>
|
||
<div class="line n6">6</div>
|
||
<div class="line n7">7</div>
|
||
<div class="line n8">8</div>
|
||
<div class="line n9">9</div>
|
||
<div class="line n10">10</div>
|
||
<div class="line n11">11</div>
|
||
<div class="line n12">12</div>
|
||
<div class="line n13">13</div>
|
||
<div class="line n14">14</div>
|
||
<div class="line n15">15</div>
|
||
<div class="line n16">16</div>
|
||
<div class="line n17">17</div>
|
||
<div class="line n18">18</div>
|
||
<div class="line n19">19</div>
|
||
<div class="line n20">20</div>
|
||
<div class="line n21">21</div>
|
||
<div class="line n22">22</div>
|
||
</td>
|
||
<td class="code">
|
||
<pre><div class="container"><div class="line"><code><span class="doctype"><!DOCTYPE html></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">html</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">style</span>></span><span class="css"></span></code></div></div><div class="container"><div class="line"><code> <span class="tag">p</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value">blue;</span></span> <span class="rule"><span class="attribute">width</span>:<span class="value"><span class="number">200</span>px;</span></span> <span class="rule"><span class="attribute">font-size</span>:<span class="value"><span class="number">14</span>px;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"></<span class="title">style</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">p</span>></span>Just roll the mouse over me.<span class="tag"></<span class="title">p</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">p</span>></span>Or me to see a color change.<span class="tag"></<span class="title">p</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">script</span>></span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code> $(<span class="string">"p"</span>).mouseover(<span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code> $(<span class="keyword">this</span>).css(<span class="string">"color"</span>,<span class="string">"red"</span>);</code></div></div><div class="container"><div class="line"><code> });</code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">html</span>></span></code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<h4>Demo:</h4>
|
||
<div class="demo code-demo"></div>
|
||
</div>
|
||
<div class="entry-example" id="example-1-1">
|
||
<h4>Example: <span class="desc">增加#box 的宽度为200像素</span>
|
||
</h4>
|
||
<div class="syntaxhighlighter xml ">
|
||
<table>
|
||
<tbody>
|
||
<tr>
|
||
<td class="gutter">
|
||
<div class="line n1">1</div>
|
||
<div class="line n2">2</div>
|
||
<div class="line n3">3</div>
|
||
<div class="line n4">4</div>
|
||
<div class="line n5">5</div>
|
||
<div class="line n6">6</div>
|
||
<div class="line n7">7</div>
|
||
<div class="line n8">8</div>
|
||
<div class="line n9">9</div>
|
||
<div class="line n10">10</div>
|
||
<div class="line n11">11</div>
|
||
<div class="line n12">12</div>
|
||
<div class="line n13">13</div>
|
||
<div class="line n14">14</div>
|
||
<div class="line n15">15</div>
|
||
<div class="line n16">16</div>
|
||
<div class="line n17">17</div>
|
||
<div class="line n18">18</div>
|
||
<div class="line n19">19</div>
|
||
<div class="line n20">20</div>
|
||
</td>
|
||
<td class="code">
|
||
<pre><div class="container"><div class="line"><code><span class="doctype"><!DOCTYPE html></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">html</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">style</span>></span><span class="css"></span></code></div></div><div class="container"><div class="line"><code> <span class="id">#box</span> <span class="rules">{ <span class="rule"><span class="attribute">background</span>:<span class="value"> black;</span></span> <span class="rule"><span class="attribute">color</span>:<span class="value"> snow;</span></span> <span class="rule"><span class="attribute">width</span>:<span class="value"><span class="number">100</span>px;</span></span> <span class="rule"><span class="attribute">padding</span>:<span class="value"><span class="number">10</span>px;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"></<span class="title">style</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"box"</span>></span>Click me to grow<span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">script</span>></span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code> $(<span class="string">"#box"</span>).one( <span class="string">"click"</span>, <span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code> $( <span class="keyword">this</span> ).css( <span class="string">"width"</span>,<span class="string">"+=200"</span> );</code></div></div><div class="container"><div class="line"><code> });</code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">html</span>></span></code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<h4>Demo:</h4>
|
||
<div class="demo code-demo"></div>
|
||
</div>
|
||
<div class="entry-example" id="example-1-2">
|
||
<h4>Example: <span class="desc">突出段落中点击文本。</span>
|
||
</h4>
|
||
<div class="syntaxhighlighter xml ">
|
||
<table>
|
||
<tbody>
|
||
<tr>
|
||
<td class="gutter">
|
||
<div class="line n1">1</div>
|
||
<div class="line n2">2</div>
|
||
<div class="line n3">3</div>
|
||
<div class="line n4">4</div>
|
||
<div class="line n5">5</div>
|
||
<div class="line n6">6</div>
|
||
<div class="line n7">7</div>
|
||
<div class="line n8">8</div>
|
||
<div class="line n9">9</div>
|
||
<div class="line n10">10</div>
|
||
<div class="line n11">11</div>
|
||
<div class="line n12">12</div>
|
||
<div class="line n13">13</div>
|
||
<div class="line n14">14</div>
|
||
<div class="line n15">15</div>
|
||
<div class="line n16">16</div>
|
||
<div class="line n17">17</div>
|
||
<div class="line n18">18</div>
|
||
<div class="line n19">19</div>
|
||
<div class="line n20">20</div>
|
||
<div class="line n21">21</div>
|
||
<div class="line n22">22</div>
|
||
<div class="line n23">23</div>
|
||
<div class="line n24">24</div>
|
||
<div class="line n25">25</div>
|
||
<div class="line n26">26</div>
|
||
<div class="line n27">27</div>
|
||
<div class="line n28">28</div>
|
||
<div class="line n29">29</div>
|
||
</td>
|
||
<td class="code">
|
||
<pre><div class="container"><div class="line"><code><span class="doctype"><!DOCTYPE html></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">html</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">style</span>></span><span class="css"></span></code></div></div><div class="container"><div class="line"><code> <span class="tag">p</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value">blue;</span></span> <span class="rule"><span class="attribute">font-weight</span>:<span class="value">bold;</span></span> <span class="rule"><span class="attribute">cursor</span>:<span class="value">pointer;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"></<span class="title">style</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">p</span>></span></code></div></div><div class="container"><div class="line"><code> Once upon a time there was a man</code></div></div><div class="container"><div class="line"><code> who lived in a pizza parlor. This</code></div></div><div class="container"><div class="line"><code> man just loved pizza and ate it all</code></div></div><div class="container"><div class="line"><code> the time. He went on to be the</code></div></div><div class="container"><div class="line"><code> happiest man in the world. The end.</code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">p</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">script</span>></span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code> <span class="keyword">var</span> words = $(<span class="string">"p:first"</span>).text().split(<span class="string">" "</span>);</code></div></div><div class="container"><div class="line"><code> <span class="keyword">var</span> text = words.join(<span class="string">"</span> <span>"</span>);</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"p:first"</span>).html(<span class="string">"<span>"</span> + text + <span class="string">"</span>"</span>);</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"span"</span>).click(<span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code> $(<span class="keyword">this</span>).css(<span class="string">"background-color"</span>,<span class="string">"yellow"</span>);</code></div></div><div class="container"><div class="line"><code> });</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">html</span>></span></code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<h4>Demo:</h4>
|
||
<div class="demo code-demo"></div>
|
||
</div>
|
||
<div class="entry-example" id="example-1-3">
|
||
<h4>Example: <span class="desc">设置所有段落的文本颜色为红色背景为蓝色：</span>
|
||
</h4>
|
||
<div class="syntaxhighlighter xml ">
|
||
<table>
|
||
<tbody>
|
||
<tr>
|
||
<td class="gutter">
|
||
<div class="line n1">1</div>
|
||
<div class="line n2">2</div>
|
||
<div class="line n3">3</div>
|
||
<div class="line n4">4</div>
|
||
<div class="line n5">5</div>
|
||
<div class="line n6">6</div>
|
||
<div class="line n7">7</div>
|
||
<div class="line n8">8</div>
|
||
<div class="line n9">9</div>
|
||
<div class="line n10">10</div>
|
||
<div class="line n11">11</div>
|
||
<div class="line n12">12</div>
|
||
<div class="line n13">13</div>
|
||
<div class="line n14">14</div>
|
||
<div class="line n15">15</div>
|
||
<div class="line n16">16</div>
|
||
<div class="line n17">17</div>
|
||
<div class="line n18">18</div>
|
||
<div class="line n19">19</div>
|
||
<div class="line n20">20</div>
|
||
<div class="line n21">21</div>
|
||
<div class="line n22">22</div>
|
||
<div class="line n23">23</div>
|
||
<div class="line n24">24</div>
|
||
<div class="line n25">25</div>
|
||
<div class="line n26">26</div>
|
||
<div class="line n27">27</div>
|
||
<div class="line n28">28</div>
|
||
</td>
|
||
<td class="code">
|
||
<pre><div class="container"><div class="line"><code><span class="doctype"><!DOCTYPE html></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">html</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">style</span>></span><span class="css"></span></code></div></div><div class="container"><div class="line"><code> <span class="tag">p</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value">green;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">style</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">p</span>></span>Move the mouse over a paragraph.<span class="tag"></<span class="title">p</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">p</span>></span>Like this one or the one above.<span class="tag"></<span class="title">p</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">script</span>></span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code> $(<span class="string">"p"</span>).hover(<span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code> $(<span class="keyword">this</span>).css({<span class="string">'background-color'</span> : <span class="string">'yellow'</span>, <span class="string">'font-weight'</span> : <span class="string">'bolder'</span>});</code></div></div><div class="container"><div class="line"><code> }, <span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code> <span class="keyword">var</span> cssObj = {</code></div></div><div class="container"><div class="line"><code> <span class="string">'background-color'</span> : <span class="string">'#ddd'</span>,</code></div></div><div class="container"><div class="line"><code> <span class="string">'font-weight'</span> : <span class="string">''</span>,</code></div></div><div class="container"><div class="line"><code> <span class="string">'color'</span> : <span class="string">'rgb(0,40,244)'</span></code></div></div><div class="container"><div class="line"><code> };</code></div></div><div class="container"><div class="line"><code> $(<span class="keyword">this</span>).css(cssObj);</code></div></div><div class="container"><div class="line"><code> });</code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">html</span>></span></code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<h4>Demo:</h4>
|
||
<div class="demo code-demo"></div>
|
||
</div>
|
||
<div class="entry-example" id="example-1-4">
|
||
<h4>Example: <span class="desc">当你点击一个div的时候递增他的尺寸</span>
|
||
</h4>
|
||
<div class="syntaxhighlighter xml ">
|
||
<table>
|
||
<tbody>
|
||
<tr>
|
||
<td class="gutter">
|
||
<div class="line n1">1</div>
|
||
<div class="line n2">2</div>
|
||
<div class="line n3">3</div>
|
||
<div class="line n4">4</div>
|
||
<div class="line n5">5</div>
|
||
<div class="line n6">6</div>
|
||
<div class="line n7">7</div>
|
||
<div class="line n8">8</div>
|
||
<div class="line n9">9</div>
|
||
<div class="line n10">10</div>
|
||
<div class="line n11">11</div>
|
||
<div class="line n12">12</div>
|
||
<div class="line n13">13</div>
|
||
<div class="line n14">14</div>
|
||
<div class="line n15">15</div>
|
||
<div class="line n16">16</div>
|
||
<div class="line n17">17</div>
|
||
<div class="line n18">18</div>
|
||
<div class="line n19">19</div>
|
||
<div class="line n20">20</div>
|
||
<div class="line n21">21</div>
|
||
<div class="line n22">22</div>
|
||
<div class="line n23">23</div>
|
||
<div class="line n24">24</div>
|
||
<div class="line n25">25</div>
|
||
<div class="line n26">26</div>
|
||
<div class="line n27">27</div>
|
||
<div class="line n28">28</div>
|
||
<div class="line n29">29</div>
|
||
</td>
|
||
<td class="code">
|
||
<pre><div class="container"><div class="line"><code><span class="doctype"><!DOCTYPE html></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">html</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">style</span>></span><span class="css"></span></code></div></div><div class="container"><div class="line"><code> <span class="tag">div</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">20</span>px;</span></span> <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">15</span>px;</span></span> <span class="rule"><span class="attribute">background-color</span>:<span class="value"> <span class="hexcolor">#f33</span>;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"></<span class="title">style</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">div</span>></span>click<span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">div</span>></span>click<span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">script</span>></span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code> $(<span class="string">"div"</span>).click(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> $(<span class="keyword">this</span>).css({</code></div></div><div class="container"><div class="line"><code> width: <span class="keyword">function</span>(index, value) {</code></div></div><div class="container"><div class="line"><code> <span class="keyword">return</span> parseFloat(value) * <span class="number">1.2</span>;</code></div></div><div class="container"><div class="line"><code> },</code></div></div><div class="container"><div class="line"><code> height: <span class="keyword">function</span>(index, value) {</code></div></div><div class="container"><div class="line"><code> <span class="keyword">return</span> parseFloat(value) * <span class="number">1.2</span>;</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> });</code></div></div><div class="container"><div class="line"><code> });</code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">html</span>></span></code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<h4>Demo:</h4>
|
||
<div class="demo code-demo"></div>
|
||
</div></section>
|
||
</div></article> </div>
|
||
</article> |