【问题标题】:how to get true css property names from CSSStyleDeclaration object?如何从 CSSStyleDeclaration 对象中获取真正的 CSS 属性名称?
【发布时间】:2012-08-03 16:07:05
【问题描述】:

问题是一些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]

【问题讨论】:

    标签: javascript css


    【解决方案1】:

    所有包含 - 的 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 之类的。

    【讨论】:

    • 没有例外?这个正则表达式安全吗?从 js 到 css 的其他方式也是如此?
    • @rsk82:至少我不知道有任何例外情况。
    • float 转换为 cssFloat :(
    猜你喜欢
    • 2022-08-23
    • 2019-08-13
    • 1970-01-01
    • 1970-01-01
    • 2013-01-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多