【问题标题】:Opposite of jQuery.camelCase for CSS property names与 CSS 属性名称的 jQuery.camelCase 相反
【发布时间】:2013-05-19 23:21:04
【问题描述】:

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

我想做相反的事情来动态创建 CSS 过渡值。

我不想为此使用 all 关键字。我想让不强制编码器只使用background-color 而不是backgroundColor 成为可能。

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

编辑:

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

我不想做与我的示例完全相同的操作,但这说明了问题。

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

【问题讨论】:

  • 但是jQuery两者都接受,你为什么要这么做?
  • 是的,但我不需要这个属性名称本身。我需要它来设置 transition 值,例如transition: backgroundColor 1s 将失败。还是不行?

标签: javascript jquery css css-transitions camelcasing


【解决方案1】:

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

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

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

可能还有很多其他方法。

另外,您可以使用以下方法进行驼峰式:

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

【讨论】:

【解决方案2】:

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

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

欢迎任何更好(更多记录/测试)的解决方案!

【讨论】:

    猜你喜欢
    • 2014-01-31
    • 2019-11-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-08-12
    • 2021-01-18
    • 2018-04-06
    相关资源
    最近更新 更多