Javascript获取CSS值

IE:
element.currentStyle

currentStyle 对象返回了元素上的样式表,但是 style 对象只返回通过 style 标签属性应用到元素的内嵌样式。因此,通过 currentStyle 对象获取的样式值可能与通过 style 对象获取的样式值不同。例如,如果段落的 color 属性值通过链接或嵌入样式表设置为红色( red ),而不是内嵌的话,对象.currentStyle.color 将返回正确的颜色,而对象 style.color 不能返回值。但是,如果用户指定了 <P STYLE="color:’red’">,currentStyleSTYLE 对象都将返回值 red。
currentStyle 对象反映了样式表中的样式优先顺序。在 HTML 中此顺序为:

  1. 内嵌样式
  2. 样式表规则
  3. HTML 标签属性
  4. 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, filter;

	// IE uses filters for opacity
	if ( !jQuery.support.opacity && name === "opacity" && 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 && style && 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" && 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 ) && 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;
}

发表评论

Your email is never shared. Required fields are marked *

*
*