<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
<channel>
<title><![CDATA[刘新修]]></title> 
<link>http://pic1.liuxinxiu.com:80/index.php</link> 
<description><![CDATA[刘新修的个人博客 (Liuxinxiu'S Blog)]]></description> 
<language>zh-cn</language> 
<copyright><![CDATA[刘新修]]></copyright>
<item>
<link>http://pic1.liuxinxiu.com:80/jquery_css_dom/</link>
<title><![CDATA[jQuery CSS-DOM操作]]></title> 
<author>刘新修 &lt;admin@yourname.com&gt;</author>
<category><![CDATA[H5/JS/CSS]]></category>
<pubDate>Sat, 18 May 2013 15:48:44 +0000</pubDate> 
<guid>http://pic1.liuxinxiu.com:80/jquery_css_dom/</guid> 
<description>
<![CDATA[ 
	<p><span style="color: rgb(62, 62, 62); font-family: 'Open Sans', georgia; line-height: 20px; text-indent: 2em; -webkit-text-size-adjust: none;">CSS-DOM技术简单来书就是读取和设置style对象的各种属性。style属性很有用，但最大不足是无法通过它来提取到通过外部CSS设置的样式信息，然而在jQuery中，这些都是非常的简单。</span></p><p style="margin-bottom: 0px; padding-top: 3px; padding-bottom: 3px; text-indent: 2em; color: rgb(62, 62, 62); font-family: 'Open Sans', georgia; line-height: 20px; -webkit-text-size-adjust: none;">可以直接利用css()方法获取元素的样式属性，jQuery代码如下；</p><div class="codeText"><div class="codeHead">JavaScript代码</div><ol start="1" class="dp-c"><li class="alt"><span><span>$(</span><span class="string">&quot;p&quot;</span><span>).css(</span><span class="string">&quot;color&quot;</span><span>); </span><span class="comment">// 获取&lt;p&gt;元素的样式颜色</span><span>&nbsp;&nbsp;</span></span></li></ol></div><p style="margin-bottom: 0px; padding-top: 3px; padding-bottom: 3px; text-indent: 2em; color: rgb(62, 62, 62); font-family: 'Open Sans', georgia; line-height: 20px; -webkit-text-size-adjust: none;">&nbsp;</p><p style="margin-bottom: 0px; padding-top: 3px; padding-bottom: 3px; text-indent: 2em;">无论color属性是外部CSS导入，还是直接拼接在HTML元素里，css()方法都可以获取到属性style里的其它属性的值。</p><p style="margin-bottom: 0px; padding-top: 3px; padding-bottom: 3px; text-indent: 2em;">也可以直接利用css()方法设置某个元素的单个样式，例如：</p><div class="codeText"><div class="codeHead">JavaScript代码</div><ol start="1" class="dp-c"><li class="alt"><span><span>$(</span><span class="string">&quot;p&quot;</span><span>).css(</span><span class="string">&quot;color&quot;</span><span>,</span><span class="string">&quot;red&quot;</span><span>); </span><span class="comment">//设置&lt;p&gt;元素的样式颜色为红色</span><span>&nbsp;&nbsp;</span></span></li></ol></div><p style="margin-bottom: 0px; padding-top: 3px; padding-bottom: 3px; text-indent: 2em;"><span style="text-indent: 27.993600845336914px;">与attr()方法一样，css()方法也可以同时设置多个样式属性，代码如下：</span></p><div class="codeText"><div class="codeHead">JavaScript代码</div><ol start="1" class="dp-c"><li class="alt"><span><span>$(</span><span class="string">&quot;p&quot;</span><span>).css(&#123;</span><span class="string">&quot;fontsize&quot;</span><span>：</span><span class="string">&quot;30px&quot;</span><span>, </span><span class="string">&quot;backgroundcolor&quot;</span><span>:</span><span class="string">&quot;#EEE&quot;</span><span>&#125;)&nbsp;&nbsp;</span></span></li><li><span><span class="comment">//同时设置字体大小和背景色</span><span>&nbsp;&nbsp;</span></span></li></ol></div><p style="margin-bottom: 0px; padding-top: 3px; padding-bottom: 3px; text-indent: 2em;"><span style="text-indent: 27.993600845336914px;">对透明度的设置，可以直接使用opacity属性，则可以通过如下jQuery代码实现：</span></p><div class="codeText"><div class="codeHead">JavaScript代码</div><ol start="1" class="dp-c"><li class="alt"><span><span>$(</span><span class="string">&quot;p&quot;</span><span>).css(</span><span class="string">&quot;opacity&quot;</span><span>,</span><span class="string">&quot;0.5&quot;</span><span>);&nbsp;&nbsp;</span></span></li></ol></div><p style="margin-bottom: 0px; padding-top: 3px; padding-bottom: 3px; text-indent: 2em;"><span style="text-indent: 27.993600845336914px;">如果获取某个元素的height属性，则可以通过如下jQuery代码实现；</span></p><div class="codeText"><div class="codeHead">JavaScript代码</div><ol start="1" class="dp-c"><li class="alt"><span><span>$(element).css(</span><span class="string">&quot;height&quot;</span><span>);&nbsp;&nbsp;</span></span></li></ol></div><p style="margin-bottom: 0px; padding-top: 3px; padding-bottom: 3px; text-indent: 2em;"><span style="text-indent: 27.993600845336914px;">在jQuery中还有另外一种方法也可以获取元素的高度，即height().他的左右是取得匹配元素当前计算的高度（px）。jQuery代码如下：</span></p><div class="codeText"><div class="codeHead">JavaScript代码</div><ol start="1" class="dp-c"><li class="alt"><span><span>$(</span><span class="string">&quot;p&quot;</span><span>).height();&nbsp;&nbsp;</span></span></li></ol></div><p style="margin-bottom: 0px; padding-top: 3px; padding-bottom: 3px; text-indent: 2em;"><span style="text-indent: 27.993600845336914px;">height()方法也能用来设置元素的高度，如果传递的值是一个数字，则默认单位为px.如果要用其他单位（例如em），则必须传递一个字符串。jQuery代码如下：</span></p><div class="codeText"><div class="codeHead">JavaScript代码</div><ol start="1" class="dp-c"><li class="alt"><span><span>$(</span><span class="string">&quot;p&quot;</span><span>).height(100);&nbsp;&nbsp;</span></span></li><li><span>$(<span class="string">&quot;p&quot;</span><span>).height(</span><span class="string">&quot;10em&quot;</span><span>);&nbsp;&nbsp;</span></span></li></ol></div><p style="margin-bottom: 0px; padding-top: 3px; padding-bottom: 3px; text-indent: 2em;"><span style="text-indent: 27.993600845336914px;">与height()方法对应的还有一个width()方法，它可以取得匹配元素的宽度值（px）。</span></p><div class="codeText"><div class="codeHead">JavaScript代码</div><ol start="1" class="dp-c"><li class="alt"><span><span>$(</span><span class="string">&quot;p&quot;</span><span>).width(); </span><span class="comment">//获取&lt;p&gt;元素的宽度值</span><span>&nbsp;&nbsp;</span></span></li></ol></div><p style="margin-bottom: 0px; padding-top: 3px; padding-bottom: 3px; text-indent: 2em;"><span style="text-indent: 27.993600845336914px;">同样，width()方法也能用来设置元素的宽度</span></p><div class="codeText"><div class="codeHead">JavaScript代码</div><ol start="1" class="dp-c"><li class="alt"><span><span>$(</span><span class="string">&quot;p&quot;</span><span>).width(</span><span class="string">&quot;400px&quot;</span><span>); </span><span class="comment">//用来设置&lt;p&gt;元素的宽度值为400px</span><span>&nbsp;&nbsp;</span></span></li></ol></div><p style="margin-bottom: 0px; padding-top: 3px; padding-bottom: 3px; text-indent: 2em;">&nbsp;</p><p style="margin-bottom: 0px; padding-top: 3px; padding-bottom: 3px; text-indent: 2em;">此外，在CSS-DOM中，还有以下几个经常使用的方法。</p><h2 style="margin: 0.3em 0px 0.3em 28px; padding: 0px; font-size: 22px; font-weight: normal; font-family: 'Century Gothic', 'Microsoft YaHei'; text-indent: 0px;">1.offset()方法</h2><p style="margin-bottom: 0px; padding-top: 3px; padding-bottom: 3px; text-indent: 2em;">它的作用是获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left,它只对可见元素有效。例如用它来获取&lt;p&gt;元素的偏移量，jQuery代码如下：</p><div class="codeText"><div class="codeHead">JavaScript代码</div><ol start="1" class="dp-c"><li class="alt"><span><span class="keyword">var</span><span> offset = $(</span><span class="string">&quot;p&quot;</span><span>).offset(); </span><span class="comment">//获取&lt;p&gt;元素的offset()</span><span>&nbsp;&nbsp;</span></span></li><li><span><span class="keyword">var</span><span> left = offset.left;&nbsp;&nbsp;</span></span></li><li class="alt"><span><span class="keyword">var</span><span> top = offset.top;&nbsp;&nbsp;</span></span></li></ol></div><p style="margin-bottom: 0px; padding-top: 3px; padding-bottom: 3px; text-indent: 2em;">&nbsp;</p><h2 style="margin: 0.3em 0px 0.3em 28px; padding: 0px; font-size: 22px; font-weight: normal; font-family: 'Century Gothic', 'Microsoft YaHei'; text-indent: 0px;">2.position()方法</h2><p style="margin-bottom: 0px; padding-top: 3px; padding-bottom: 3px; text-indent: 2em;">它的作用是获取元素相对于最近的一个postion样式属性设置为relative或者absolute的祖父节点的相对偏移，与offset()一样，它返回的对象也包括两个属性，即top和left。jQuery代码如下：</p><div class="codeText"><div class="codeHead">JavaScript代码</div><ol start="1" class="dp-c"><li class="alt"><span><span class="keyword">var</span><span> postion = $(</span><span class="string">&quot;p&quot;</span><span>).postion(); </span><span class="comment">//获取&lt;p&gt;元素的postion()</span><span>&nbsp;&nbsp;</span></span></li><li><span><span class="keyword">var</span><span> left = postion.left; </span><span class="comment">//获取左偏移</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span><span class="keyword">var</span><span> top = postion.top; </span><span class="comment">//获取右偏移</span><span>&nbsp;&nbsp;</span></span></li></ol></div><p style="margin-bottom: 0px; padding-top: 3px; padding-bottom: 3px; text-indent: 2em;">&nbsp;</p><h2 style="margin: 0.3em 0px 0.3em 28px; padding: 0px; font-size: 22px; font-weight: normal; font-family: 'Century Gothic', 'Microsoft YaHei'; text-indent: 0px;">3.scrollTop方法和scrollLeft()方法</h2><p style="margin-bottom: 0px; padding-top: 3px; padding-bottom: 3px; text-indent: 2em;">这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离。例如使用下面的代码获取&lt;p&gt;元素的滚动条距离：</p><div class="codeText"><div class="codeHead">JavaScript代码</div><ol start="1" class="dp-c"><li class="alt"><span><span class="keyword">var</span><span> $p = $(</span><span class="string">&quot;p&quot;</span><span>)&nbsp;&nbsp;</span></span></li><li><span><span class="keyword">var</span><span> scroolTop = $p.scrollTop();&nbsp;&nbsp;</span></span></li><li class="alt"><span><span class="keyword">var</span><span> scroolLeft = $p.scrollLeft();&nbsp;&nbsp;</span></span></li></ol></div><p style="margin-bottom: 0px; padding-top: 3px; padding-bottom: 3px; text-indent: 2em;"><span style="text-indent: 27.993600845336914px;">另外，可以为这两个方法指定一个参数，控制元素的滚动条到指定位置。例如使用如下代码控制元素内的滚动条滚动到距顶端300和距左侧300的位置；</span></p><div class="codeText"><div class="codeHead">JavaScript代码</div><ol start="1" class="dp-c"><li class="alt"><span><span>$(</span><span class="string">&quot;textarea&quot;</span><span>).scrollTop(300);&nbsp;&nbsp;</span></span></li><li><span>$(<span class="string">&quot;textarea&quot;</span><span>).scrollLeft(300);&nbsp;&nbsp;</span></span></li></ol></div><br/>Tags - <a href="http://pic1.liuxinxiu.com:80/tags/jquery/" rel="tag">jquery</a> , <a href="http://pic1.liuxinxiu.com:80/tags/css/" rel="tag">css</a> , <a href="http://pic1.liuxinxiu.com:80/tags/dom/" rel="tag">dom</a>
]]>
</description>
</item><item>
<link>http://pic1.liuxinxiu.com:80/jquery_css_dom/#blogcomment</link>
<title><![CDATA[[评论] jQuery CSS-DOM操作]]></title> 
<author> &lt;user@domain.com&gt;</author>
<category><![CDATA[评论]]></category>
<pubDate>Thu, 01 Jan 1970 00:00:00 +0000</pubDate> 
<guid>http://pic1.liuxinxiu.com:80/jquery_css_dom/#blogcomment</guid> 
<description>
<![CDATA[ 
	
]]>
</description>
</item>
</channel>
</rss>