如何从CSSStyleDeclaration对象获取真正的css属性名称?

时间:2012-08-03 16:07:05

标签: javascript css

问题是某些css属性有不同的名称是javascript,例如js中的textOverflow在css中是text-overflow

我可以访问js引擎中的某个转换表,或者我必须自己做一个翻译数组或对象,如:

transObj = { textOverflow : 'text-overflow' };

例如,我循环遍历此对象,我得到的只是js名称:

for (var n in csd) {
  if (!csd.hasOwnProperty(n)) continue;
  csd[n].getTrueCSSName() // is there something like this ?
}

或者简单的正则表达式替换也可以,但我不知道是否规则js名称中的所有大字母都转换为css名称中的-[a-z]

1 个答案:

答案 0 :(得分:2)

包含-的所有css样式都被ECMAscript中的 camelCase 表示替换,因为我们无法在所有场合使用-。您可以通过调用如下的正则表达式来翻译名称:

var name = "font-width";

// convert names like "font-width" into css camelCase form like "fontWidth"
name = name.replace( /-(\w)/g, function _replace( $1, $2 ) {
    return $2.toUpperCase();
});

也适用于-webkit-box-shadow或类似的东西。