将CSS规则转换为JavaScript属性

Question

Is there a quick way or predefined JavaScript method that converts

"text-align"
"-webkit-transform"
"position"
"background-image"

into

"textAlign"
"webkitTransform"
"position"
"backgroundImage"

with vanilla javascript (no jQuery, ect)?

Answer 1

Use this regex replace:

"text-align".replace(/-([a-z])/g,function(m,l,i){return i?l.toUpperCase():l})

It matches a hyphen and then a letter. The replace returns the letter, capitalized if the index is truthy (not 0).

Answer 2

After hunting around I found that the variable I was dealing with was of type CSSStyleDeclaration which comes with a method getPropertyCSSValue

Simplified extract

var rules = document.styleSheets[0/*sheetIndex*/].rules[0/*ruleIndex*/];
console.log(rules.toString()); // "[object CSSStyleRule]"
for(var a = 0; a<rules.style.length; a++)
{
  var rule = rules.style[a];
  console.log(rule,rules.style.getPropertyCSSValue(rule).cssText); // eg: "text-align","center"
}

This avoids issues with "border" and "border-left"