Question

我现在正在阅读famo.us文档，为我的网站创建一个双列网格和页眉和页脚。

我正在学习在JavaScript对象中将样式设置为键值对。我想知道如何通过外部样式表保留样式的能力。

例如：

layout.header.add(new Surface({
    size: [undefined, 100],
    content: "Header",
    properties: {
        backgroundColor: 'gray',
        lineHeight: "100px",
        textAlign: "center"
    }
}));

如果我想链接到样式表并在其中设置样式，我可能会说：

layout.header.add(new Surface({
    classes: ['header']
}));

然后在我的CSS中写道：

.header {
    background-color: gray;
    line-height: 100px;
    text-align: center;
}

但JS对象中还设置了其他属性，例如“size”，我想在样式表中替换“height”和“width”。另外，我想知道我是否可以使用百分比或ems来设计我的应用程序。

最值得赞赏的是任何提示或参考。也许没有一种支持的方法可以做到这一点，因为我理解famo.us的目标是抽象出DOM并在JS中完成所有这些工作。在那种情况下，我想知道如何在famo.us中处理我的项目，以便工作流程与我习惯的工作流程接近。

Answer 1

表面属性中允许的所有内容都可以放入样式表类中。大小不可能，实际上并不想把它放在CSS中。使用famo.us的重点是能够通过代码而不是CSS样式表来控制位置，大小和转换。如果要动态更改代码中的大小，那么有很多方法可以使用函数而不是固定数组。

例如此代码

new Surface({   content: content,
                size: [100, 100],
                properties: {
                    backgroundColor: "rgb(183, 232, 183)",
                    color: "rgb(51, 51, 51)",
                    fontSize:'10pt',
                    textAlign: 'center',
                    paddingTop:'2pt',
                    border: '1pt solid rgb(135, 192, 140)'
                }
            });

转换为

 new Surface({   content: content,
                size: [100, 100],
                classes:['select-button']
            });

样式表中的

css

 .select-button{
                    background-color: rgb(183, 232, 183);
                    color: rgb(51, 51, 51);
                    font-size:10pt;
                    text-align: center;
                    padding-top:2pt;
                    border: 1pt solid rgb(135, 192, 140);
                }

希望这会有所帮助

Famo.us和外部CSS样式

1 个答案: