与jQuery.camelCase相反的CSS属性名称 [英] Opposite of jQuery.camelCase for CSS property names

问题描述

jQuery.camelCase 用于将虚线CSS属性转换为camelcased CSSOM（？或DOM？）属性。

我想反过来动态创建一个CSS转换值。

我不想使用 all 此关键字。我想让强制编码器只能使用 background-color 代替 backgroundColor 。 / p>

这可能（可能是通过jQuery）还是需要大量代码来支持跨浏览器？

编辑：

  $（＃example）。css（transition-property，backgroundColor ）//失败
  

我不想做与我的例子完全相同但这个显示问题。

我正在尝试遍历包含css属性和值的对象，以将对象键设置为transition-properties。例如。 {backgroundColor：red} 应将 background-color 设置为 transition-property 而不是 backgroundColor 。

解决方案

一个简单的函数做的工作是：

  function deCase（s）{
 return s.replace（/ [AZ] / g，function（a）{return' - '+ a.toLowerCase（）}）; 
} 
 
 alert（deCase（'scrollbarDarkShadowColor'））; // scrollbar-dark-shadow-color 
  

还有很多其他方法。

此外，你可以使用以下方式进行camelCase：

  function camelCase（s）{
返回s.replace（/-(.)/ g，function（a，$ 1）{return $ 1.toUpperCase（）;}）; 
} 
  

jQuery.camelCase is used to convert dashed CSS properties to camelcased CSSOM(? or DOM?) properties.

I'd like to do the opposite to dynamically create a CSS transition value.

I don't want to use the all keyword for this. I'd like to make it possible to not force the coder to only use background-color instead of backgroundColor.

Is this possible (maybe via jQuery) or will it take lots of code for cross browser support?

Edit:

$("#example").css("transition-property", "backgroundColor") // Fail

I don't want to do exactly the same as in my example but this shows the problem.

I'm trying to iterate through an object that contains css properties and values to set the objects keys as transition-properties. E.g. { backgroundColor: "red" } should set background-color as transition-property instead of backgroundColor.

解决方案

A simple function to do the job is:

function deCase(s) {
    return s.replace(/[A-Z]/g, function(a) {return '-' + a.toLowerCase()});
}

alert(deCase('scrollbarDarkShadowColor')); // scrollbar-dark-shadow-color

There are likely many other ways.

Also, you can do camelCase using:

function camelCase(s) {
    return s.replace(/-(.)/g, function(a, $1){return $1.toUpperCase();});
}

这篇关于与jQuery.camelCase相反的CSS属性名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！