迭代CSS样式 - 样式命名不一致

时间:2015-01-28 14:02:21

标签: javascript html css stylesheet

我正在尝试迭代CSS样式。例如,我得到这样的风格:

document.styleSheets[0].cssRules[10].style

返回CSSStyleRule,它是一个包含整数和字符串键的对象。

整数和.length键可用于迭代样式中的属性赋值,每个键都给出属性的名称,例如:

document.styleSheets[0].cssRules[10].style[0] == "max-height"

字符串键可以访问样式的实际实际文本,如下所示:

document.styleSheets[0].cssRules[10].style["maxHeight"] == "100px"

因此理论上很容易迭代所有属性。但请注意从max-heightmaxHeight的令人抓狂的变化!我怎么处理这个?我怎么知道这个映射是什么?我是否只需编写一个将-a转换为A的函数,依此类推?

1 个答案:

答案 0 :(得分:0)

我最终使用此功能来改变案例:

function camelCaseCssName(str) {
    var ret = "";
    for (var i = 0; i < str.length; ++i) {
        if (str[i] == '-') {
            if (i < str.length - 1) {
                ret += str[i+1].toUpperCase();
                ++i;
            }
        } else {
            ret += str[i];
        }           
    }
    return ret;
}

Bhojendra发布的链接还包含我尚未测试过的版本,但它的版本要短得多:

styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
  return letter.toUpperCase();
});