Javascript获取级联样式表中定义的CSS值

关键词:Javascript获取CSS值 javascript获取级联样式中定义样式值

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的实现:

+展开
-JavaScript
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;
}

来源:http://foxling.org/js-ajax-dom/javascript-get-style/

加支付宝好友偷能量挖...


评论(0)网络
阅读(319)喜欢(0)JavaScript/Ajax开发技巧