Nombre de propiedad de estilo CSS: yendo de la versión normal a la propiedad JS camelCase versión y viceversa

Question

¿Existe una disposición para obtener los nombres correspondientes?

Una función que estoy escribiendo tiene que establecer el estilo a través de element.style[propnameCamelCase] y recuperar el valor representado existente a través de document.defaultView.getComputedStyle(element,'').getPropertyValue(propname-regular), y no puedo justificar tener que pasar dos argumentos separados pero semánticamente idénticos a esta función.

Sé que para la mayoría de ellos es una transcripción bastante sencilla entre camelCase y delimitado por guiones con las mismas palabras, por lo que puedo usar expresiones regulares para convertirlas. Pero tal vez hay algunos que no son así?

En la parte superior de mi cabeza, estoy teniendo dificultades para entender cómo manejar las letras en mayúscula para la caja de camello con expresiones regulares.

editar: Ah, podría usar una función para reemplazar la expresión regular, cada vez que veo un guión, convierta la letra siguiente en mayúscula.

Answer 1

Así que básicamente estás reinventando jQuery.css(). Tal vez un vistazo a cómo jQuery resolvió el problema camelCase podría ayudar: https://github.com/jquery/jquery/blob/master/src/core.js#L600

Answer 2

Estaba a punto de hacer una pregunta sobre la misma cosa (y tenía la intención de ponerle el nombre "Traducir nombres css a \ de contrapartes javascript"). De alguna manera terminé escribiendo mi propia solución.

function cssNameToJsName(name) 
{ 
    var split = name.split("-"); 
    var output = ""; 
    for(var i = 0; i < split.length; i++) 
    { 
     if (i > 0 && split[i].length > 0 && !(i == 1 && split[i] == "ms")) 
     { 
      split[i] = split[i].substr(0, 1).toUpperCase() + split[i].substr(1); 
     } 
     output += split[i]; 
    } 
    return output; 
} 

function jsNameToCssName(name) 
{ 
    return name.replace(/([A-Z])/g, "-$1").toLowerCase(); 
}