如何从CSSStyleDeclaration对象获取真实的CSS属性名称? [英] how to get true css property names from CSSStyleDeclaration object?

问题描述

问题在于，某些CSS属性具有不同的名称，例如javascript，例如js中的 textOverflow 是CSS中的 text-overflow .

The thing is that some css properties have different name is javascript, for example textOverflow in js is text-overflow in css.

我可以访问js引擎中某处的翻译表，还是必须自己编写一个翻译数组或对象，如:

Is there a translation table somewhere in js engine that I can access or I must do myself a translation array or object like:

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

例如，我正在遍历此对象，而我得到的只是js名称:

For example I'm looping through this object and all I get is only js names:

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

也许简单的正则表达式替换就可以了，但是我不知道规则是否将js名称中的所有大写字母转换为css名称中的-[a-z] ?

Or maybe simple regex replace will be ok, but I don't know if rule that all big letters in js names tranlsate to -[a-z] in css names ?

推荐答案

所有包含-的css样式都将替换为ECMAscript中的 camelCase 表示形式，因为我们可以不要在任何情况下都使用-.您可以通过调用如下正则表达式来翻译名称:

All css style which contain a - are replaced by their camelCase representation in ECMAscript, since we can't use - in all occasions. You can translate the names, by invoking a regular expression like this:

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 或其他类似功能.

which also works for like -webkit-box-shadow or whatnot.

这篇关于如何从CSSStyleDeclaration对象获取真实的CSS属性名称?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！