javascript - 从字符串中获取 css 属性

Question

我正在创建一个插件，允许用户通过键入类似这样的内容来定义通知。

growl-top-left-300px;

我使用拆分来消除宽度，但这仍然需要我有很多 if 语句，因为我的用户有以下选择

比如我有

if (position == "growl-top-left" || position == "growl-left-top") {
    container.css ({
        top: '0px',
        left: '0px'
    });
}else if (position == "growl-top-right" || position == "growl-right-top") {
    container.css ({
        top: '0px',
        right: '0px'
    });
}else if (position == "growl-top-center" || position == "growl-center-top") {
    // apply css // Not done yet
}else if (position == "growl-bottom-left" || position == "growl-left-bottom") {
    container.css ({
        bottom: '0px',
        left: '0px'
    });
}else if (position == "growl-bottom-right" || position == "growl-right-bottom") {
    container.css ({
        bottom: '0px',
        right: '0px'
    });
}else if (position == "growl-bottom-center" || position == "growl-center-bottom") {
    // apply css // not done yet
}

但正如您所想象的那样，这看起来像是很多冗余代码，我只想知道是否有人有更好的方法来清理它？

我想如果我能获得顶部和左侧的 css 值就更好了，这样我就可以编写以下代码:

container.css ({
    retrivedCSS[0]: '0px',
    retrivedCSS[1]: '0px'
})

其中 retrivedCSS[0] 是第一个位置，[1] 是第二个位置

Answer 1

如何拆分位置字符串并使用这些标记。见下文，

var tokens = position.split('-');

var updateCSS = {};
updateCSS[tokens[1]] = updateCSS[tokens[2]] = '0px';    

container.css (updateCSS);

如果您使用更复杂的字符串，例如 growl-top-center-padding 等，请使用迭代。

var updateCSS = {};
var tokens = position.split('-');

for (var i = 0; i < tokens.length; i++) {
   if(tokens[i] == 'growl') continue;

   updateCSS[tokens[i]] = '0px';
}

container.css (updateCSS);