与jQuery.camelCase相反的CSS属性名称

时间:2013-05-19 23:21:04

标签: javascript jquery css css-transitions camelcasing

jQuery.camelCase用于将虚线CSS属性转换为camelcased CSSOM(?或DOM?)属性。

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

我不想为此使用all关键字。我希望不要强迫编码人员只使用background-color代替backgroundColor

这可能(可能是通过jQuery)还是需要大量代码来支持跨浏览器?

修改

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

我不想和我的例子完全一样,但这显示了问题。

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

2 个答案:

答案 0 :(得分:5)

完成这项工作的一个简单功能是:

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

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

可能还有很多其他方法。

另外,你可以使用:

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

答案 1 :(得分:1)

我找到了jQuery.transit.js的解决方案:

function uncamel(str) {
    return str.replace(/([A-Z])/g, function(letter) { return '-' + letter.toLowerCase(); });
}

欢迎任何更好(更有文档/测试)的解决方案!