<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>FoxLing - 前端开发 &#187; getComputedStyle</title>
	<atom:link href="http://foxling.org/tag/getcomputedstyle/feed/" rel="self" type="application/rss+xml" />
	<link>http://foxling.org</link>
	<description>我还在寻找方向</description>
	<lastBuildDate>Tue, 10 Apr 2012 16:48:41 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Javascript获取CSS值</title>
		<link>http://foxling.org/js-ajax-dom/javascript-get-style/</link>
		<comments>http://foxling.org/js-ajax-dom/javascript-get-style/#comments</comments>
		<pubDate>Sun, 04 Jan 2009 15:28:19 +0000</pubDate>
		<dc:creator>FoxLing</dc:creator>
				<category><![CDATA[JS/AJAX/DOM]]></category>
		<category><![CDATA[currentStyle]]></category>
		<category><![CDATA[getComputedStyle]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[获取CSS值]]></category>

		<guid isPermaLink="false">http://wp.foxling.cn/as-flex-air/javascript-get-css/</guid>
		<description><![CDATA[IE: element.currentStyle currentStyle 对象返回了元素上的样式表，但是 style 对象只返回通过 style 标签属性应用到元素的内嵌样式。因此，通过 currentStyle 对象获取的样式值可能与通过 style 对象获取的样式值不同。例如，如果段落的 color 属性值通过链接或嵌入样式表设置为红色( red )，而不是内嵌的话，对象.currentStyle.color 将返回正确的颜色，而对象 style.color 不能返回值。但是，如果用户指定了 &#60;P STYLE=&#34;color:&#8217;red&#8217;&#34;&#62;，currentStyle 和 STYLE 对象都将返回值 red。 currentStyle 对象反映了样式表中的样式优先顺序。在 HTML 中此顺序为： 内嵌样式 样式表规则 HTML 标签属性 HTML 标签的内部定义 W3C: window.getComputedStyle(element,pseudoElt) element 必选，HTML元素 pseudoElt 必选，获取该元素的伪类样式 关于获取css的浏览器兼容： http://www.quirksmode.org/dom/w3c_css.html jQuery里关于获取CSS的实现： function( elem, name, force ) { var ret, style = elem.style, [...]]]></description>
			<content:encoded><![CDATA[<p><strong>IE:</strong><br />
element.currentStyle</p>
<p><strong>currentStyle</strong> 对象返回了元素上的样式表，但是 <strong>style</strong>  对象只返回通过 <strong>style</strong> 标签属性应用到元素的内嵌样式。因此，通过 <strong>currentStyle</strong>  对象获取的样式值可能与通过 <strong>style</strong> 对象获取的样式值不同。例如，如果段落的 <strong>color</strong> 属性值通过链接或嵌入样式表设置为红色( red  )，而不是内嵌的话，对象.<strong>currentStyle</strong>.color 将返回正确的颜色，而对象 <strong>style</strong>.<strong>color</strong>  不能返回值。但是，如果用户指定了 &lt;P STYLE=&quot;color:&#8217;red&#8217;&quot;&gt;，<strong>currentStyle</strong> 和  <strong>STYLE</strong> 对象都将返回值 red。<br />
<strong>currentStyle</strong> 对象反映了样式表中的样式优先顺序。在 HTML 中此顺序为：</p>
<ol>
<li>内嵌样式</li>
<li>样式表规则</li>
<li>HTML 标签属性</li>
<li>HTML 标签的内部定义</li>
</ol>
<p><strong>W3C:</strong><br />
window.getComputedStyle(element,pseudoElt)<br />
<em>element</em> 必选，HTML元素<br />
<em>pseudoElt</em> 必选，获取该元素的伪类样式</p>
<p>关于获取css的浏览器兼容：<br />
<a href="http://www.quirksmode.org/dom/w3c_css.html">http://www.quirksmode.org/dom/w3c_css.html</a></p>
<p>jQuery里关于获取CSS的实现：</p>
<pre>
function( elem, name, force ) {
	var ret, style = elem.style, filter;

	// IE uses filters for opacity
	if ( !jQuery.support.opacity &#038;&#038; name === "opacity" &#038;&#038; elem.currentStyle ) {
		ret = ropacity.test(elem.currentStyle.filter || "") ?
			(parseFloat(RegExp.$1) / 100) + "" :
			"";

		return ret === "" ?
			"1" :
			ret;
	}

	// Make sure we're using the right name for getting the float value
	if ( rfloat.test( name ) ) {
		name = styleFloat;
	}

	if ( !force &#038;&#038; style &#038;&#038; style[ name ] ) {
		ret = style[ name ];

	} else if ( getComputedStyle ) {

		// Only "float" is needed here
		if ( rfloat.test( name ) ) {
			name = "float";
		}

		name = name.replace( rupper, "-$1" ).toLowerCase();

		var defaultView = elem.ownerDocument.defaultView;

		if ( !defaultView ) {
			return null;
		}

		var computedStyle = defaultView.getComputedStyle( elem, null );

		if ( computedStyle ) {
			ret = computedStyle.getPropertyValue( name );
		}

		// We should always get a number back from opacity
		if ( name === "opacity" &#038;&#038; ret === "" ) {
			ret = "1";
		}

	} else if ( elem.currentStyle ) {
		var camelCase = name.replace(rdashAlpha, fcamelCase);

		ret = elem.currentStyle[ name ] || elem.currentStyle[ camelCase ];

		// From the awesome hack by Dean Edwards
		// http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291

		// If we're not dealing with a regular pixel number
		// but a number that has a weird ending, we need to convert it to pixels
		if ( !rnumpx.test( ret ) &#038;&#038; rnum.test( ret ) ) {
			// Remember the original values
			var left = style.left, rsLeft = elem.runtimeStyle.left;

			// Put in the new values to get a computed value out
			elem.runtimeStyle.left = elem.currentStyle.left;
			style.left = camelCase === "fontSize" ? "1em" : (ret || 0);
			ret = style.pixelLeft + "px";

			// Revert the changed values
			style.left = left;
			elem.runtimeStyle.left = rsLeft;
		}
	}

	return ret;
}
</pre>
]]></content:encoded>
			<wfw:commentRss>http://foxling.org/js-ajax-dom/javascript-get-style/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

