CSS样式属性名称 - 从常规版本到JS属性camelCase版本,反之亦然

时间:2011-10-10 16:02:43

标签: javascript css

是否存在获取相应名称的规定?

我正在编写的函数必须通过element.style[propnameCamelCase]设置样式并通过document.defaultView.getComputedStyle(element,'').getPropertyValue(propname-regular)检索现有的渲染值,我很难证明必须将两个单独但语义相同的参数传递给它功能。

我知道,对于他们中的大多数来说,这是一个相当直接的转录,在camelCase和连字符之间用相同的单词分隔,所以我可以使用正则表达式来转换它们。但也许有一些不是这样的?

离开我的头脑我很难弄清楚如何用正则表达式来处理骆驼案的大写字母。

编辑:啊,我可以使用函数进行正则表达式替换,每次看到连字符时,将下一个字母转换为大写。

3 个答案:

答案 0 :(得分:5)

所以你基本上正在重塑jQuery.css()。也许看看jQuery如何解决camelCase问题可能会有所帮助:https://github.com/jquery/jquery/blob/master/src/core.js#L600

答案 1 :(得分:1)

我正要问同样的问题(我打算将其命名为“将jss名称翻译成来自javascript的同行”)。不知何故,我最终编写了自己的解决方案。

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();
}

答案 2 :(得分:0)

我想提一下,CSSStyleDeclaration.style.setProperty接受css /连字符类型的属性名称而不进行转换,如记录的here

尝试使用带连字符的属性,例如:

document.body.style.setProperty("background-color", "red");

您也可以这样做:

document.body.style["background-color"] = "silver";

这些方法-如果可以使用的话-可能会更简单。