Javascript 从字符串获取css属性

我正在创建一个插件，它允许用户通过键入如下内容来定义通知

growl-top-left-300px;

我使用了一个split来去除宽度，但是这仍然需要我有很多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'
})

---

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

Use可以使用fallthrough switch语句，尽管它们仍然非常难看

switch(position.split("-").sort().join("-")) {
    case 'growl-top-left': //apply css
        break;
    case 'growl-center-top': // apply css
        break;
}

感谢@Amberlamps关于使用position.split（“-”）.sort（）.join（“-”）的精彩建议，他的完整解决方案也绝对优于此

这个怎么样：

// map string to one key
var key = position.split("-").sort().join("-");

var map = {

    "growl-bottom-center": "your CSS",
    // ...
    "growl-right-top": "your CSS"

}

applyCSS(map[key]);

---

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

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

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

container.css (updateCSS);

如果您使用更复杂的字符串，如

growl上止点填充

e.t.c，请使用迭代

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

var updateCSS={}；
变量标记=位置.分割（'-'）；
for（var i=0；i

你可以把它作为一个类应用到元素上，然后使用css，比如.growl-top-left，.growl-left-top{}如果，这些

里面有什么？如果它有类似于设置
top
和
left
的
growlleft-top
，那么我有一个技巧；）我刚刚发布了一个更新，显示了我如何应用CSS@Pete我希望这不使用任何其他文件以外的插件它自己。谢谢你。为什么我总是忘记开关语句。。。每次我告诉你。在我将此标记为答案之前，我想看看是否还有其他人有任何其他想法，但这似乎是缩短代码的一个很好的解决方案。将
position
替换为
position.split（“-”）.sort（）。join（“-”
）。这将为您节省50%的case语句。@Amberlamps这不是让JavaScript引擎更容易处理，而只是为每个case添加一行额外的语句吗？@RobertE.McIntosh:这可能会给引擎带来更大的压力。但是你会有更少的行，而且引擎毕竟是非常强大的平均值？这是否意味着它将跳过实际位置，因为
token[1]
将等于
top
，而不是
growl
@RobertE.McIntosh它是
token[i]
，而不是
token[1]
。注意
i
（迭代器）@RobertE.McIntosh：我想Vega认为
growl
不可能是CSS表达式的一部分。@Amberlamps它是CSS的一部分吗？如果他想让咆哮成为CSS的一部分，他可以移除这个条件。我是根据他在帖子中的if条件来判断的。@Vega问题是，在你的拆分中，第一个对象将是
gorwl
而不是位置，接下来只有第二个和第三个对象将是位置，最后一个对象很可能是填充。这可能会给引擎增加一点压力，但会减少一些压力排队可能会弥补这一点。